js怎么實(shí)現(xiàn)符合國情的日期插件-創(chuàng)新互聯(lián)-四川平武建站

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

js怎么實(shí)現(xiàn)符合國情的日期插件-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“js怎么實(shí)現(xiàn)符合國情的日期插件”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js怎么實(shí)現(xiàn)符合國情的日期插件”這篇文章吧。

創(chuàng)新互聯(lián)公司專注于成都做網(wǎng)站、網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、網(wǎng)站制作、網(wǎng)站開發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對待客戶，用專業(yè)的服務(wù)創(chuàng)造價值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

這次開始的項(xiàng)目是PC版的，貌似有2年沒正兒八經(jīng)的折騰PC端了。

言歸正傳，這次功能中有個選擇日期段的功能，本來不麻煩的事情，但是PM非要參照另外一個網(wǎng)站的效果來做，把別人代碼扒下來一看，我去，08年的插件，很多功能不能滿足當(dāng)前，PM非要那效果，時間又TM有限，就又找了個國外的插件daterangepicker，基于bootstrap，跟需求長得很像，功能非常強(qiáng)大，需求都能滿足，但是...但是，PM和測試說不好用。。。折騰了半天源代碼，優(yōu)化了下，時間來不及只能湊合用著。

重新動手寫了個。依賴jquery和moment.js(主要處理日期，如果自己處理也可以不需要)，

先看效果圖

js怎么實(shí)現(xiàn)符合國情的日期插件

使用方法：

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òu)造函數(shù)

function DateRangePicker() {
this.start_picker = null;
this.end_picker = null;
}

初始化日期構(gòu)造函數(shù)，日期段由兩個單獨(dú)的日期選擇組成，當(dāng)起始日期和結(jié)束日期變化時要調(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
 };
};

提供動態(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)建一個容器，因?yàn)槿掌谶x擇要剛好在日期文本框下面，在日期文本框外面包一層方便定位。

//創(chuàng)建日期段容器
DateRangePicker.prototype.createCalendarWrap = function() {
 var $parent=this.opts.ele.parents(".ui-datepicker");
 var h=$parent.height(),w=$parent.width();
 var wrap = '開始日期

' + '

結(jié)束日期

' + '

今日' + '昨日' + '最近7日' + '最近30日' + '

' + '

'; $parent.append(wrap); };

接下來是單個日期選擇的處理

定義構(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);
 }
 });
};

定義臨時存儲的當(dāng)前日期，默認(rèn)日期是今天，但是選擇的時候當(dāng)前日期會變化。

//臨時被選中的日期
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);
};

渲染日歷框架，日歷固定為42格，7列6行，星期從一到天

//渲染日歷框架
DatePicker.prototype.renderCalendar = function() {
 var calendar_header = this.renderHeader();
 var calendar_days = '日一二三四五六';
 var calendar_body = '';
 for (var i = 0; i < 6; i++) {
 calendar_body += '';
 }
 calendar_body + '';
 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+='';
 }else{
 yearSelect = '< ';
 }
 for (var i =start_year; i <= _year; i++) {
 if (i == current_year) {
 yearSelect += '' + i + '';
 } else {
 yearSelect += '' + i + '';
 }
 }
 yearSelect += '';
 var monthSelect = '';
 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 += '' + monthArr[i] + '月';
 }
 if (current_year >= _year && current_month+1 >= _month) {
 monthSelect += '';
 }else{
 monthSelect += '>';
 }
 return "" + yearSelect + monthSelect + "

"; };

//渲染日歷數(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);
 }
 });
};
//臨時被選中的日期
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 = '日一二三四五六';
 var calendar_body = '';
 for (var i = 0; i < 6; i++) {
 calendar_body += '';
 }
 calendar_body + '';
 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+='';
 }else{
 yearSelect = '< ';
 }
 for (var i =start_year; i <= _year; i++) {
 if (i == current_year) {
 yearSelect += '' + i + '';
 } else {
 yearSelect += '' + i + '';
 }
 }
 yearSelect += '';
 var monthSelect = '';
 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 += '' + monthArr[i] + '月';
 }
 if (current_year >= _year && current_month+1 >= _month) {
 monthSelect += '';
 }else{
 monthSelect += '>';
 }
 return "" + yearSelect + monthSelect + "

"; }; //渲染日歷數(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); } }; //日期段由兩個單獨(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 = '

開始日期

99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

新聞中心

其他資訊