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

發(fā)布時(shí)間：2021-06-18 14:34:27 來源：億速云閱讀：84 作者：小新欄目：web開發(fā)

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

這次開始的項(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(主要處理日期，如果自己處理也可以不需要)，

先看效果圖

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

使用方法：

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" ><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" ><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;
}

以上是“js怎么實(shí)現(xiàn)符合國(guó)情的日期插件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

推薦閱讀：

js實(shí)現(xiàn)刪除功能的插件

jquery如何實(shí)現(xiàn)時(shí)間日期插件

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js

上一篇新聞：
Nodejs怎么實(shí)現(xiàn)短信驗(yàn)證碼功能

下一篇新聞：
python清洗文件中數(shù)據(jù)的方法

猜你喜歡

shell捕獲sqlplus異常怎么處理

怎么用shell執(zhí)行sql并判斷返回狀態(tài)

linux服務(wù)器異常關(guān)機(jī)日志怎么看

Linux如何輸出結(jié)果賦值給變量

怎么用shell獲取sqlplus執(zhí)行的結(jié)果

linux中setsockopt函數(shù)的作用是什么

mysql存儲(chǔ)過程怎么給變量賦值

sql怎么給某一列賦值

?win11此站點(diǎn)不安全問題怎么解決

win7桌面圖標(biāo)沒有了怎么恢復(fù)

最新資訊

Android Studio中控件的陰影效果如何實(shí)現(xiàn)

控件事件監(jiān)聽器編寫規(guī)范

控件單元測(cè)試編寫與執(zhí)行

Android Studio控件API變更追蹤

控件狀態(tài)保存與恢復(fù)機(jī)制

控件觸摸反饋?zhàn)远x

控件動(dòng)態(tài)添加與移除技巧

控件無障礙設(shè)計(jì)在Android Studio中

控件權(quán)限與隱私保護(hù)考量

控件樣式繼承與覆蓋策略

相關(guān)推薦

JqueryUI 日期插件的基本用法

JqueryUI 日期插件的基本用法

日期選擇插件

js實(shí)現(xiàn)滑動(dòng)插件的方法介紹

原生js如何實(shí)現(xiàn)日期選擇插件

JS實(shí)現(xiàn)滑動(dòng)插件

JS怎么獲取日期

js如何實(shí)現(xiàn)輪播插件

利用JS實(shí)現(xiàn)簡(jiǎn)單的日期選擇插件

react.js如何實(shí)現(xiàn)翻頁(yè)插件

相關(guān)標(biāo)簽

json jsp jscript extjs jsapi json.stringify json解析 geojson jsch jso js開發(fā) next.js require.js app.json jstree jsplitpane jsonresult @JSONField app.js respond.min.js