js实现符合国情的日期插件详解

这次开始的项目是PC版的，貌似有2年没正儿八经的折腾PC端了。

言归正传，这次功能中有个选择日期段的功能，本来不麻烦的事情，但是PM非要参照另外一个网站的效果来做，把别人代码扒下来一看，我去，08年的插件，很多功能不能满足当前，PM非要那效果，时间又TM有限，就又找了个国外的插件daterangepicker，基于bootstrap，跟需求长得很像，功能非常强大，需求都能满足，但是...但是，PM和测试说不好用。。。折腾了半天源代码，优化了下，时间来不及只能凑合用着。

重新动手写了个。依赖jquery和moment.js(主要处理日期，如果自己处理也可以不需要)，

先看效果图

使用方法：

rush: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()) } });

基本思路是：

创建一个日期选择构造函数

rush:js;"> function DaterangePicker() { this.start_picker = null; this.end_picker = null; }

初始化日期构造函数，日期段由两个单独的日期选择组成，当起始日期和结束日期变化时要调用构造函数的updateDate方法，通知日期发生了变化。

rush:js;"> DaterangePicker.prototype.init = function(opts) { var self = this; this.opts = $.extend({ "pos":"left",//日历位置，靠左或靠右 "min_date":"1970-01-01",//最小日期 "updateDateFn":function(){//日期更新回调 } },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"),"updateCallback": function(){ self.updateDate(); } }); this.bindEvent(); };

处理日期发生变化的情况，比如起始日期大于结束日期，要进行互换。

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());//日期更新后重新获取当前的起始和结束日期 };

获取起始和结束日期

rush:js;"> //获取起始日期和结束日期段,起始日期若大于结束日期则互换 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 }; };

提供动态设置当前起始日期和结束日期的方法

rush:js;"> //设置起始日期和结束日期 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(); };

创建一个容器，因为日期选择要刚好在日期文本框下面，在日期文本框外面包一层方便定位。

rush:js;"> //创建日期段容器 DaterangePicker.prototype.createCalendarWrap = function() { var $parent=this.opts.ele.parents(".ui-datepicker"); var h=$parent.height(),w=$parent.width(); var wrap = '

terangepicker-wrap" style="top:'+h+'px;'+this.opts.pos+':0">

' + '

' + '

terangepicker-range">

' + '
• ' + '
• ' + '
• ' + '
• ' + '

' + '

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

接下来是单个日期选择的处理

定义构造函数和初始化

rush:js;"> function DatePicker() { this.opts = null; this.today = new Date(); //今天 this.todayDate=this.today.getDate(); this.currentDate = new Date(); //当前选中日期 } DatePicker.prototype.init = function(opts) { var opts = $.extend({ 'min_date':"1970-01-01","yearOffset": 20//默认往前推20年 },opts || {}); this.opts = opts; this.renderCalendar(); this.bindEvent(); };

事件处理

rush:js;"> 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); } }); };

定义临时存储的当前日期，默认日期是今天，但是选择的时候当前日期会变化。

rush:js;"> //临时被选中的日期 DatePicker.prototype.tempActiveDate=(function(){ var _date=new Date(); return { getDate: function() { return _date; },setDate:function(date){ _date=new Date(date); } }; })();

年月下拉框变化时更新日期

rush:js;"> //设置下拉框选中的日期 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行，星期从一到天

rush:js;"> //渲染日历框架 DatePicker.prototype.renderCalendar = function() { var calendar_header = this.renderHeader(); var calendar_days = '日'; var calendar_body = '

渲染日历的头部，包括上月、下月按钮，年月的下拉框

=min_year?current_year - this.opts.yearOffset:min_year;//下拉框起始年份 var yearSelect=""; //如果已经是最小日期，不显示上月按钮 if (current_year <= min_year && current_month <= 0) { yearSelect+='' + i + ''; } else { yearSelect += ''; } } yearSelect += ''; var monthSelect = 'disabled"; } }else{ state="disabled"; } monthSelect += '' + monthArr[i] + '月'; } if (current_year >= _year && current_month+1 >= _month) { monthSelect += ''; }else{ monthSelect += ''; } return "

" + yearSelect + monthSelect + "

"; };

self.today.getTime()) { $(item).addClass("disabled").removeClass('active today'); } //如果选择的日期大于今天，则日期重置 if (_thisDateTime>self.today.getTime() && _thisDay == self.todayDate) { $(item).addClass("active"); self.currentDate = _thisDate; } }); }; //设置当前日期 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完整代码

rush:js;"> function DatePicker() { this.opts = null; this.today = new Date(); //今天 this.todayDate=this.today.getDate(); this.currentDate = new Date(); //当前选中日期 } DatePicker.prototype.init = function(opts) { var opts = $.extend({ 'min_date':"1970-01-01",opts || {}); this.opts = opts; this.renderCalendar(); this.bindEvent(); }; DatePicker.prototype.bindEvent = function() { var self = this; self.opts.container.on("change",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); } }; })(); //设置下拉框选中的日期 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,_day); this.setCurrentDate(cur_date); }; //渲染日历框架 DatePicker.prototype.renderCalendar = function() { var calendar_header = this.renderHeader(); var calendar_days = '

一	二	三	四	五	六

日'; var calendar_body = '=min_year?current_year - this.opts.yearOffset:min_year;//下拉框起始年份 var yearSelect=""; //如果已经是最小日期，不显示上月按钮 if (current_year <= min_year && current_month <= 0) { yearSelect+='' + i + ''; } else { yearSelect += ''; } } yearSelect += ''; var monthSelect = 'disabled"; } }else{ state="disabled"; } monthSelect += '' + monthArr[i] + '月'; } if (current_year >= _year && current_month+1 >= _month) { monthSelect += ''; }else{ monthSelect += ''; } return "

" + yearSelect + monthSelect + "

"; }; //渲染日历数据 DatePicker.prototype.renderCalendarData = function() { var self = this; var _year = this.currentDate.getFullYear(); //当前年 var _month = this.currentDate.getMonth() + 1; //当前月 var _firstDay = new Date(_year,this.currentDate); } };

//日期段由两个单独日期实例组成
function DaterangePicker() {
this.start_picker = null;
this.end_picker = null;
}
DaterangePicker.prototype.init = function(opts) {
var self = this;
this.opts = $.extend({
"pos":"left",//最小日期
"updateDateFn":function(){//日期更新回调

}
},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"),"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());
};
//获取起始日期和结束日期段,"end_date": end_date
};
};
//设置起始日期和结束日期
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();
};
//创建日期段容器
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">开始日期

<div class="calendar-container">' +
'<div class="ui-calendar"><p class="calendar-title">结束日期

<div class="calendar-container2">' +
'<div class="ui-daterangepicker-range">

' +
'<li range-key="今日">今日' +
'<li range-key="昨日">昨日' +
'<li range-key="最近7日">最近7日' +
'<li range-key="最近30日">最近30日' +
'

' +
'';
$parent.append(wrap);
};
var daterangepicker = new DaterangePicker();
daterangepicker.init({
"ele": $("#daterange"),"updateDateFn":function(){
console.log(daterangepicker.getDate())
}
});

HTML：

rush:xhtml;">

terange" placeholder="请选择日期"/>

CSS

rush: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.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.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.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; }

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：原生js实现电商侧边导航效果下一篇：小程序开发实战：实现九宫格界面的

相关推荐

---

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗

前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从

作者：huanzi-qch 时间：2024-09-25

nice-validator表单验证插件的简单使用

前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在

作者：huanzi-qch 时间：2024-09-25

基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参

作者：huanzi-qch 时间：2024-09-25

踹掉后端，前端导出Excel！

前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E

作者：huanzi-qch 时间：2024-09-25

Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量

前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务

作者：huanzi-qch 时间：2024-09-25

select标签 禁止选择但又能通过序列化form表单传值到后台

前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled=&quot;disabled&quot;时发现，无法序列化form获取到select标签的值；当我们使用readonly=&quot;readonly&quo

作者：huanzi-qch 时间：2024-09-25

还在问跨域？本文记录js跨域的多种实现实例

前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、

作者：huanzi-qch 时间：2024-09-25

formData批量上传的多种实现

前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD

作者：huanzi-qch 时间：2024-09-25

laypage 物理分页与逻辑分页实例

前言 以下介绍摘自&#160;layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素

作者：huanzi-qch 时间：2024-09-25

乐观锁机制解决多层嵌套异步ajax问题

前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示

作者：huanzi-qch 时间：2024-09-25

小编推荐

苹果市值2025年有望达4万亿美元

• • 微信青少年模式全新升级：视频号内容分
• • 《地下城与勇士DNF》永久交通卡卡面上线
• • 优酷为方便长辈看视频，上线银发剧场！
• • 微信读书集成腾讯混元AI技术，可以一日
• • 京东快递上线11项会员权益
• • 高德地图功能升级，新增安全预警
• • 小爱同学多模态能力升级，引领智能生活

热门标签更多

• 友情链接:
• ai导航

• 编程之家
-
• 我要投稿
-
• 广告合作
-
• 联系我们
-
• 免责声明
-
• 网站地图

版权所有 © 2018编程之家闽ICP备13020303号-8

微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

一	二	三	四	五	六