js實(shí)現(xiàn)符合國(guó)情的日期插件詳解
更新時(shí)間：2017年01月19日 16:44:38 作者：彼岸花在開
本篇文章主要介紹了js實(shí)現(xiàn)符合國(guó)情的日期插件的方法與步驟。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
這次開始的項(xiàng)目是PC版的，貌似有2年沒正兒八經(jīng)的折騰PC端了。
言歸正傳，這次功能中有個(gè)選擇日期段的功能，本來不麻煩的事情，但是PM非要參照另外一個(gè)網(wǎng)站的效果來做，把別人代碼扒下來一看，我去，08年的插件，很多功能不能滿足當(dāng)前，PM非要那效果，時(shí)間又TM有限，就又找了個(gè)國(guó)外的插件daterangepicker，基于bootstrap，跟需求長(zhǎng)得很像，功能非常強(qiáng)大，需求都能滿足，但是...但是，PM和測(cè)試說不好用。。。折騰了半天源代碼，優(yōu)化了下，時(shí)間來不及只能湊合用著。
重新動(dòng)手寫了個(gè)。依賴jquery和moment.js(主要處理日期，如果自己處理也可以不需要)，
先看效果圖
使用方法：
var daterangepicker = new DateRangePicker();
daterangepicker.init({
"ele": $("#daterange"),
"pos":"left",
"min_date": "1990-01-01",
"format": "YYYY:MM:DD",
"updateDateFn":function(){
console.log(daterangepicker.getDate())
}
});
基本思路是：
創(chuàng)建一個(gè)日期選擇構(gòu)造函數(shù)
function DateRangePicker() {
this.start_picker = null;
this.end_picker = null;
}
初始化日期構(gòu)造函數(shù)，日期段由兩個(gè)單獨(dú)的日期選擇組成，當(dāng)起始日期和結(jié)束日期變化時(shí)要調(diào)用構(gòu)造函數(shù)的updateDate方法，通知日期發(fā)生了變化。
DateRangePicker.prototype.init = function(opts) {
var self = this;
this.opts = $.extend({
"pos":"left",//日歷位置，靠左或靠右
"min_date":"1970-01-01",//最小日期
"updateDateFn":function(){//日期更新回調(diào)
}
}, opts || {});
this.createCalendarWrap();
this.$wrap=this.opts.ele.parents(".ui-datepicker");
this.start_picker = new DatePicker();//起始日期日歷
this.end_picker = new DatePicker();//結(jié)束日期日歷
this.start_picker.init({
"container": this.$wrap.find(".calendar-container"),
"min_date":self.opts.min_date,
"yearOffset": 20,
"updateCallback": function(){
self.updateDate();
}
});
this.end_picker.init({
"container": this.$wrap.find(".calendar-container2"),
"yearOffset": 20,
"min_date":self.opts.min_date,
"updateCallback": function(){
self.updateDate();
}
});
this.bindEvent();
};
處理日期發(fā)生變化的情況，比如起始日期大于結(jié)束日期，要進(jìn)行互換。
DateRangePicker.prototype.updateDate = function() {
var self = this;
var start_date = moment(self.start_picker.currentDate).format(self.opts.format);
var end_date = moment(self.end_picker.currentDate).format(self.opts.format);
var start_date_time=new Date(self.start_picker.currentDate).getTime();
var end_date_time=new Date(self.end_picker.currentDate).getTime();
if(start_date_time>new Date().getTime()){
self.start_picker.setCurrentDate(new Date());
}
if(end_date_time>new Date().getTime()){
self.end_picker.setCurrentDate(new Date());
}
if(start_date_time>end_date_time){
self.opts.ele.val(end_date + "~" + start_date);
}else{
self.opts.ele.val(start_date + "~" + end_date);
}
$(".ui-daterangepicker-range li").removeClass("active");
self.opts.updateDateFn.call(null,this.getDate());//日期更新后重新獲取當(dāng)前的起始和結(jié)束日期
};
獲取起始和結(jié)束日期
//獲取起始日期和結(jié)束日期段,起始日期若大于結(jié)束日期則互換
DateRangePicker.prototype.getDate = function() {
var start_date=Math.min(this.start_picker.currentDate.getTime(),this.end_picker.currentDate.getTime());
var end_date=Math.max(this.start_picker.currentDate.getTime(),this.end_picker.currentDate.getTime());
start_date=moment(start_date).format(this.opts.format);
end_date=moment(end_date).format(this.opts.format);
return {
"start_date":start_date,
"end_date": end_date
};
};
提供動(dòng)態(tài)設(shè)置當(dāng)前起始日期和結(jié)束日期的方法
//設(shè)置起始日期和結(jié)束日期
DateRangePicker.prototype.setDate = function(start_date, end_date) {
this.start_picker.setCurrentDate(new Date(start_date));
this.end_picker.setCurrentDate(new Date(end_date));
this.updateDate();
};
創(chuàng)建一個(gè)容器，因?yàn)槿掌谶x擇要?jiǎng)偤迷谌掌谖谋究蛳旅?，在日期文本框外面包一層方便定位?/strong>
//創(chuàng)建日期段容器
DateRangePicker.prototype.createCalendarWrap = function() {
var $parent=this.opts.ele.parents(".ui-datepicker");
var h=$parent.height(),w=$parent.width();
var wrap = '<div class="ui-daterangepicker-wrap" style="top:'+h+'px;'+this.opts.pos+':0"><div class="ui-calendar"><p class="calendar-title">開始日期</p><div class="calendar-container"></div></div>' +
'<div class="ui-calendar"><p class="calendar-title">結(jié)束日期</p><div class="calendar-container2"></div></div>' +
'<div class="ui-daterangepicker-range"><ul>' +
'<li range-key="今日">今日</li>' +
'<li range-key="昨日">昨日</li>' +
'<li range-key="最近7日">最近7日</li>' +
'<li range-key="最近30日">最近30日</li>' +
'</ul>' +
'</div></div>';
$parent.append(wrap);
};
接下來是單個(gè)日期選擇的處理
定義構(gòu)造函數(shù)和初始化
function DatePicker() {
this.opts = null;
this.today = new Date(); //今天
this.todayDate=this.today.getDate();
this.currentDate = new Date(); //當(dāng)前選中日期
}
DatePicker.prototype.init = function(opts) {
var opts = $.extend({
'min_date':"1970-01-01",
"yearOffset": 20//默認(rèn)往前推20年
}, opts || {});
this.opts = opts;
this.renderCalendar();
this.bindEvent();
};
事件處理
DatePicker.prototype.bindEvent = function() {
var self = this;
self.opts.container.on("change", ".year-select", function() {
self.renderSelectedDate();
});
//選中月份
self.opts.container.on("change", ".month-select", function() {
self.renderSelectedDate();
});
//下一月
self.opts.container.on("click", ".next-btn", function(e) {
e.stopPropagation();
var cur_date =self.currentDate.setMonth(self.currentDate.getMonth()+1);;
self.setCurrentDate(cur_date);
});
//上一月
self.opts.container.on("click", ".prev-btn", function(e) {
e.stopPropagation();
var cur_date = self.currentDate.setMonth(self.currentDate.getMonth()-1);
self.setCurrentDate(cur_date);
});
//選擇日歷中某一天
self.opts.container.on("click", ".date-item", function() {
if (!$(this).hasClass("disabled")) {
var _day = $(this).attr("date");
var cur_date = self.currentDate.setDate(_day);
self.setCurrentDate(cur_date);
}
});
};
定義臨時(shí)存儲(chǔ)的當(dāng)前日期，默認(rèn)日期是今天，但是選擇的時(shí)候當(dāng)前日期會(huì)變化。
//臨時(shí)被選中的日期
DatePicker.prototype.tempActiveDate=(function(){
var _date=new Date();
return {
getDate: function() {
return _date;
},
setDate:function(date){
_date=new Date(date);
}
};
})();
年月下拉框變化時(shí)更新日期
//設(shè)置下拉框選中的日期
DatePicker.prototype.renderSelectedDate = function() {
var _year = this.opts.container.find(".year-select").val();
var _month = this.opts.container.find(".month-select").val();
var _day = this.currentDate.getDate();
var cur_date = new Date(_year, _month, _day);
this.setCurrentDate(cur_date);
};
渲染日歷框架，日歷固定為42格，7列6行，星期從一到天
//渲染日歷框架
DatePicker.prototype.renderCalendar = function() {
var calendar_header = this.renderHeader();
var calendar_days = '<table class="calendar-table"><thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead>';
var calendar_body = '<tbody class="calendar_body">';
for (var i = 0; i < 6; i++) {
calendar_body += '<tr><td class="date-item"></td><td class="date-item"></td><td class="date-item"></td><td class="date-item"></td><td class="date-item"></td><td class="date-item"></td><td class="date-item"></td></tr>';
}
calendar_body + '</tbody></table>';
this.opts.container.html(calendar_header + calendar_days + calendar_body);
this.renderCalendarData();
};
渲染日歷的頭部，包括上月、下月按鈕，年月的下拉框
//渲染日歷頭部
DatePicker.prototype.renderHeader = function() {
var _year = this.today.getFullYear();
var _month = this.today.getMonth() + 1;
var current_year = this.currentDate.getFullYear();
var current_month = this.currentDate.getMonth();
var monthArr = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
var min_year=(new Date(this.opts.min_date)).getFullYear();//最小年份
var start_year=current_year - this.opts.yearOffset>=min_year?current_year - this.opts.yearOffset:min_year;//下拉框起始年份
var yearSelect="";
//如果已經(jīng)是最小日期，不顯示上月按鈕
if (current_year <= min_year && current_month <= 0) {
yearSelect+='<select class="year-select">';
}else{
yearSelect = '<span class="prev-btn"><</span> <select class="year-select">';
}
for (var i =start_year; i <= _year; i++) {
if (i == current_year) {
yearSelect += '<option value="' + i + '" selected>' + i + '</option>';
} else {
yearSelect += '<option value="' + i + '">' + i + '</option>';
}
}
yearSelect += '</select>';
var monthSelect = '<select class="month-select">';
for (var i = 0; i < 12; i++) {
var state="";
if (current_year < _year) {
if (i == current_month) {
state="selected";
}
}else if (current_year == _year) {
if(i==current_month){
state="selected";
}else{
state="disabled";
}
}else{
state="disabled";
}
monthSelect += '<option value="' + i + '" '+state+'>' + monthArr[i] + '月</option>';
}
if (current_year >= _year && current_month+1 >= _month) {
monthSelect += '</select>';
}else{
monthSelect += '</select><span class="next-btn">></span>';
}
return "<div class='calendar_header'>" + yearSelect + monthSelect + "</div>";
};
//渲染日歷數(shù)據(jù)
DatePicker.prototype.renderCalendarData = function() {
var self = this;
var _year = this.currentDate.getFullYear(); //當(dāng)前年
var _month = this.currentDate.getMonth() + 1; //當(dāng)前月
var _firstDay = new Date(_year, _month - 1, 1); //當(dāng)前月第一天
var tds = this.opts.container.find(".calendar_body td");
var header = self.renderHeader();
this.opts.container.find(".calendar_header").html(header);
tds.each(function(index, item) {
var _thisDate = new Date(_year, _month - 1, index + 1 - _firstDay.getDay());
var _thisDay = _thisDate.getDate();
var _thisMonth = _thisDate.getMonth() + 1;
var _thisDateTime=_thisDate.getTime();
$(item).html(_thisDay).attr("date", _thisDay).removeClass("active").removeClass("disabled").removeClass("today");
//當(dāng)前月并且當(dāng)前選中日期高亮
if (_thisDay == self.tempActiveDate.getDate().getDate() && _thisMonth == _month) {
$(item).addClass("active");
}
//今天日期樣式
if (_thisDay == self.todayDate) {
$(item).addClass("today");
}
//非當(dāng)前月或者大于今天的日期禁用
if (_thisMonth !== _month || _thisDateTime>self.today.getTime()) {
$(item).addClass("disabled").removeClass('active today');
}
//如果選擇的日期大于今天，則日期重置
if (_thisDateTime>self.today.getTime() && _thisDay == self.todayDate) {
$(item).addClass("active");
self.currentDate = _thisDate;
}
});
};
//設(shè)置當(dāng)前日期
DatePicker.prototype.setCurrentDate = function(date) {
this.tempActiveDate.setDate(date);
this.currentDate = this.tempActiveDate.getDate();
this.renderCalendarData();
if(this.opts.updateCallback){
this.opts.updateCallback.call(null,this.currentDate);
}
};
js完整代碼
function DatePicker() {
this.opts = null;
this.today = new Date(); //今天
this.todayDate=this.today.getDate();
this.currentDate = new Date(); //當(dāng)前選中日期
}
DatePicker.prototype.init = function(opts) {
var opts = $.extend({
'min_date':"1970-01-01",
"yearOffset": 20//默認(rèn)往前推20年
}, opts || {});
this.opts = opts;
this.renderCalendar();
this.bindEvent();
};
DatePicker.prototype.bindEvent = function() {
var self = this;
self.opts.container.on("change", ".year-select", function() {
self.renderSelectedDate();
});
//選中月份
self.opts.container.on("change", ".month-select", function() {
self.renderSelectedDate();
});
//下一月
self.opts.container.on("click", ".next-btn", function(e) {
e.stopPropagation();
var cur_date =self.currentDate.setMonth(self.currentDate.getMonth()+1);;
self.setCurrentDate(cur_date);
});
//上一月
self.opts.container.on("click", ".prev-btn", function(e) {
e.stopPropagation();
var cur_date = self.currentDate.setMonth(self.currentDate.getMonth()-1);
self.setCurrentDate(cur_date);
});
//選擇日歷中某一天
self.opts.container.on("click", ".date-item", function() {
if (!$(this).hasClass("disabled")) {
var _day = $(this).attr("date");
var cur_date = self.currentDate.setDate(_day);
self.setCurrentDate(cur_date);
}
});
};
//臨時(shí)被選中的日期
DatePicker.prototype.tempActiveDate=(function(){
var _date=new Date();
return {
getDate: function() {
return _date;
},
setDate:function(date){
_date=new Date(date);
}
};
})();
//設(shè)置下拉框選中的日期
DatePicker.prototype.renderSelectedDate = function() {
var _year = this.opts.container.find(".year-select").val();
var _month = this.opts.container.find(".month-select").val();
var _day = this.currentDate.getDate();
var cur_date = new Date(_year, _month, _day);
this.setCurrentDate(cur_date);
};
//渲染日歷框架
DatePicker.prototype.renderCalendar = function() {
var calendar_header = this.renderHeader();
var calendar_days = '<table class="calendar-table"><thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead>';
var calendar_body = '<tbody class="calendar_body">';
for (var i = 0; i < 6; i++) {
calendar_body += '<tr><td class="date-item"></td><td class="date-item"></td><td class="date-item"></td><td class="date-item"></td><td class="date-item"></td><td class="date-item"></td><td class="date-item"></td></tr>';
}
calendar_body + '</tbody></table>';
this.opts.container.html(calendar_header + calendar_days + calendar_body);
this.renderCalendarData();
};
//渲染日歷頭部
DatePicker.prototype.renderHeader = function() {
var _year = this.today.getFullYear();
var _month = this.today.getMonth() + 1;
var current_year = this.currentDate.getFullYear();
var current_month = this.currentDate.getMonth();
var monthArr = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
var min_year=(new Date(this.opts.min_date)).getFullYear();//最小年份
var start_year=current_year - this.opts.yearOffset>=min_year?current_year - this.opts.yearOffset:min_year;//下拉框起始年份
var yearSelect="";
//如果已經(jīng)是最小日期，不顯示上月按鈕
if (current_year <= min_year && current_month <= 0) {
yearSelect+='<select class="year-select">';
}else{
yearSelect = '<span class="prev-btn"><</span> <select class="year-select">';
}
for (var i =start_year; i <= _year; i++) {
if (i == current_year) {
yearSelect += '<option value="' + i + '" selected>' + i + '</option>';
} else {
yearSelect += '<option value="' + i + '">' + i + '</option>';
}
}
yearSelect += '</select>';
var monthSelect = '<select class="month-select">';
for (var i = 0; i < 12; i++) {
var state="";
if (current_year < _year) {
if (i == current_month) {
state="selected";
}
}else if (current_year == _year) {
if(i==current_month){
state="selected";
}else{
state="disabled";
}
}else{
state="disabled";
}
monthSelect += '<option value="' + i + '" '+state+'>' + monthArr[i] + '月</option>';
}
if (current_year >= _year && current_month+1 >= _month) {
monthSelect += '</select>';
}else{
monthSelect += '</select><span class="next-btn">></span>';
}
return "<div class='calendar_header'>" + yearSelect + monthSelect + "</div>";
};
//渲染日歷數(shù)據(jù)
DatePicker.prototype.renderCalendarData = function() {
var self = this;
var _year = this.currentDate.getFullYear(); //當(dāng)前年
var _month = this.currentDate.getMonth() + 1; //當(dāng)前月
var _firstDay = new Date(_year, _month - 1, 1); //當(dāng)前月第一天
var tds = this.opts.container.find(".calendar_body td");
var header = self.renderHeader();
this.opts.container.find(".calendar_header").html(header);
tds.each(function(index, item) {
var _thisDate = new Date(_year, _month - 1, index + 1 - _firstDay.getDay());
var _thisDay = _thisDate.getDate();
var _thisMonth = _thisDate.getMonth() + 1;
var _thisDateTime=_thisDate.getTime();
$(item).html(_thisDay).attr("date", _thisDay).removeClass("active").removeClass("disabled").removeClass("today");
//當(dāng)前月并且當(dāng)前選中日期高亮
if (_thisDay == self.tempActiveDate.getDate().getDate() && _thisMonth == _month) {
$(item).addClass("active");
}
//今天日期樣式
if (_thisDay == self.todayDate) {
$(item).addClass("today");
}
//非當(dāng)前月或者大于今天的日期禁用
if (_thisMonth !== _month || _thisDateTime>self.today.getTime()) {
$(item).addClass("disabled").removeClass('active today');
}
//如果選擇的日期大于今天，則日期重置
if (_thisDateTime>self.today.getTime() && _thisDay == self.todayDate) {
$(item).addClass("active");
self.currentDate = _thisDate;
}
});
};
//設(shè)置當(dāng)前日期
DatePicker.prototype.setCurrentDate = function(date) {
this.tempActiveDate.setDate(date);
this.currentDate = this.tempActiveDate.getDate();
this.renderCalendarData();
if(this.opts.updateCallback){
this.opts.updateCallback.call(null,this.currentDate);
}
};
//日期段由兩個(gè)單獨(dú)日期實(shí)例組成
function DateRangePicker() {
this.start_picker = null;
this.end_picker = null;
}
DateRangePicker.prototype.init = function(opts) {
var self = this;
this.opts = $.extend({
"pos":"left",//日歷位置，靠左或靠右
"min_date":"1970-01-01",//最小日期
"updateDateFn":function(){//日期更新回調(diào)
}
}, opts || {});
this.createCalendarWrap();
this.$wrap=this.opts.ele.parents(".ui-datepicker");
this.start_picker = new DatePicker();
this.end_picker = new DatePicker();
this.start_picker.init({
"container": this.$wrap.find(".calendar-container"),
"min_date":self.opts.min_date,
"yearOffset": 20,
"updateCallback": function(){
self.updateDate();
}
});
this.end_picker.init({
"container": this.$wrap.find(".calendar-container2"),
"yearOffset": 20,
"min_date":self.opts.min_date,
"updateCallback": function(){
self.updateDate();
}
});
this.bindEvent();
};
DateRangePicker.prototype.bindEvent = function() {
var self = this;
var start_picker = self.start_picker,
end_picker = self.end_picker;
this.opts.ele.on("focus",function(){
self.$wrap.find(".ui-daterangepicker-wrap").show();
});
$(".ui-daterangepicker-range").on("click", "[range-key]", function() {
var _year = start_picker.currentDate.getFullYear();
var _month = start_picker.currentDate.getMonth();
var range = $(this).attr("range-key");
var start_day = start_picker.todayDate,
end_day = end_picker.todayDate
switch (range) {
case "今日":
start_day = new Date(moment());
break;
case "昨日":
start_day = new Date(moment().subtract(1, 'days'));
break;
case "最近7日":
start_day = new Date(moment().subtract(6, 'days'));
break;
case "最近30日":
start_day = new Date(moment().subtract(30, 'days'));
break;
}
self.setDate(start_day,new Date())
$(this).addClass("active").siblings("[range-key]").removeClass("active");
});
$("html").on("click",function(e){
var $target=$(e.target);
if($target.closest(".ui-daterangepicker-wrap").length==0&&$target[0]!=self.opts.ele[0]){
self.$wrap.find(".ui-daterangepicker-wrap").hide();
}
});
};
DateRangePicker.prototype.updateDate = function() {
var self = this;
var start_date = moment(self.start_picker.currentDate).format(self.opts.format);
var end_date = moment(self.end_picker.currentDate).format(self.opts.format);
var start_date_time=new Date(self.start_picker.currentDate).getTime();
var end_date_time=new Date(self.end_picker.currentDate).getTime();
if(start_date_time>new Date().getTime()){
self.start_picker.setCurrentDate(new Date());
}
if(end_date_time>new Date().getTime()){
self.end_picker.setCurrentDate(new Date());
}
if(start_date_time>end_date_time){
self.opts.ele.val(end_date + "~" + start_date);
}else{
self.opts.ele.val(start_date + "~" + end_date);
}
$(".ui-daterangepicker-range li").removeClass("active");
self.opts.updateDateFn.call(null,this.getDate());
};
//獲取起始日期和結(jié)束日期段,起始日期若大于結(jié)束日期則互換
DateRangePicker.prototype.getDate = function() {
var start_date=Math.min(this.start_picker.currentDate.getTime(),this.end_picker.currentDate.getTime());
var end_date=Math.max(this.start_picker.currentDate.getTime(),this.end_picker.currentDate.getTime());
start_date=moment(start_date).format(this.opts.format);
end_date=moment(end_date).format(this.opts.format);
return {
"start_date":start_date,
"end_date": end_date
};
};
//設(shè)置起始日期和結(jié)束日期
DateRangePicker.prototype.setDate = function(start_date, end_date) {
this.start_picker.setCurrentDate(new Date(start_date));
this.end_picker.setCurrentDate(new Date(end_date));
this.updateDate();
};
//創(chuàng)建日期段容器
DateRangePicker.prototype.createCalendarWrap = function() {
var $parent=this.opts.ele.parents(".ui-datepicker");
var h=$parent.height(),w=$parent.width();
var wrap = '<div class="ui-daterangepicker-wrap" style="top:'+h+'px;'+this.opts.pos+':0"><div class="ui-calendar"><p class="calendar-title">開始日期</p><div class="calendar-container"></div></div>' +
'<div class="ui-calendar"><p class="calendar-title">結(jié)束日期</p><div class="calendar-container2"></div></div>' +
'<div class="ui-daterangepicker-range"><ul>' +
'<li range-key="今日">今日</li>' +
'<li range-key="昨日">昨日</li>' +
'<li range-key="最近7日">最近7日</li>' +
'<li range-key="最近30日">最近30日</li>' +
'</ul>' +
'</div></div>';
$parent.append(wrap);
};
var daterangepicker = new DateRangePicker();
daterangepicker.init({
"ele": $("#daterange"),
"pos":"left",
"min_date": "1990-01-01",
"format": "YYYY:MM:DD",
"updateDateFn":function(){
console.log(daterangepicker.getDate())
}
});
HTML：
<div class="ui-datepicker"> <input type="text" id="daterange" placeholder="請(qǐng)選擇日期"/> </div>
CSS
* {
margin: 0;
padding: 0;
}
body{font:14px "微軟雅黑";}
li {
list-style: none;
}
.ui-datepicker{
display: inline-block;
position: relative;
}
.ui-calendar {
margin: 10px;
width: 260px;
}
.single-calendar{
border:1px solid #ccc;
text-align: center;
box-shadow: 0 0 3px rgba(0,0,0,0.25);
}
.ui-calendar select {
padding: 3px 10px;
margin: 0 10px;
}
.calendar_header {
margin: 10px 0;
text-align: center;
}
.calendar-table {
border-collapse: collapse;
}
.calendar-table td {
padding: 5px 10px;
cursor: pointer;
text-align: center;
border-radius:3px;
}
.calendar-table td.today {
color: #337ab7;
}
.calendar-table td.active {
background: #337ab7;
color:#fff;
}
.calendar-table td.disabled {
color: #ccc;
cursor: default;
}
.ui-calendar .next-btn,
.ui-calendar .prev-btn {
padding:1px 4px;
border:1px solid transparent;
border-radius:3px;
font-weight: bold;
cursor: pointer;
}
.ui-calendar .next-btn:hover,.ui-calendar .prev-btn:hover{
border-color:#ccc;
box-shadow: 0 0 3px rgba(0,0,0,0.25);
}
.ui-daterangepicker-wrap {
position: absolute;
top:0;
width: 740px;
border: 1px solid #ccc;
border-radius:3px;
box-shadow: 0 0 3px rgba(0,0,0,0.25);
background: #fff;
overflow: hidden;
z-index:1000;
display: none;
}
.calendar-title{
text-align: center;
}
.ui-daterangepicker-wrap .ui-calendar {
float: left;
}
.ui-daterangepicker-range{
width: 150px;
float: right;
margin: 10px;
}
.ui-daterangepicker-range ul{
margin-bottom:20px;
}
.ui-daterangepicker-range li {
margin:5px 0;
padding: 5px 10px;
border-radius:3px;
background: #f5f5f5;
cursor: pointer;
}
.ui-daterangepicker-range li:hover,.ui-daterangepicker-range li.active {
background: #337ab7;
color:#fff;
}
.ui-daterangepicker-range .range-btn{
width:60px;
height: 30px;
margin-right: 10px;
border:1px solid #e5e5e5;
border-radius:3px;
background: none;
cursor: pointer;
}
.ui-daterangepicker-range .range-confirm{
background: #337ab7;
border-color:#337ab7;
color:#fff;
}
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
解決Jstree 選中父節(jié)點(diǎn)時(shí)被禁用的子節(jié)點(diǎn)也會(huì)選中的問題
下面小編就為大家分享一篇解決Jstree 選中父節(jié)點(diǎn)時(shí)被禁用的子節(jié)點(diǎn)也會(huì)選中的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)
這篇文章主要介紹了js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-04-04
JavaScript進(jìn)制數(shù)之間的互相轉(zhuǎn)換
這篇文章主要介紹了JavaScript進(jìn)制數(shù)之間的互相轉(zhuǎn)換，進(jìn)制轉(zhuǎn)換是人們利用符號(hào)來計(jì)數(shù)的方法，下文基于JavaScript實(shí)現(xiàn)進(jìn)制數(shù)之間的轉(zhuǎn)換，有一定的知識(shí)性參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
fetch函數(shù)是一個(gè)用于在JavaScript中執(zhí)行HTTP請(qǐng)求的現(xiàn)代API,它提供了一種更簡(jiǎn)潔、更強(qiáng)大的方式來處理網(wǎng)絡(luò)請(qǐng)求,這篇文章主要介紹了JavaScript中fetch方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
這篇文章主要介紹了js實(shí)現(xiàn)仿QQ秀換裝效果的方法,實(shí)例分析了javascript操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
在js中處理Date時(shí),發(fā)現(xiàn)Safari和其他瀏覽器的支持方式不一致。下面通過本文給大家分享js中Safari瀏覽器中的Date，感興趣的朋友一起學(xué)習(xí)吧2017-07-07
本文給大家分享Bootstrap簡(jiǎn)單表格、表單、登錄頁面的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
electron 無邊框窗口拖拽移動(dòng)問題及解決辦法
在做一款uTools的插件,懸浮文本,窗口是沒有標(biāo)題欄的,所以需要找一個(gè)地方可以拖動(dòng)移動(dòng)位置,本文給大家介紹electron 無邊框窗口拖拽移動(dòng)問題及解決辦法,感興趣的朋友一起看看吧2023-12-12
javascript表單處理具體實(shí)現(xiàn)代碼(表單、鏈接、按鈕)
這篇文章主要介紹了javascript表單處理具體實(shí)現(xiàn)代碼，包括各種表單、鏈接、按鈕控件介紹，感興趣的朋友可以參考一下2016-05-05
用js獲取本地電腦信息（但是只能在IE瀏覽器下才行，其他瀏覽器其獲取不到的）2013-01-01