js实现日期插件符合国情

该项目的开始是PC版本，它有2年不会扔PC端。

嗯，在时间段中有一个选择功能，没有问题，但是PM必须参考另一个网站的效果，把其他人放下来。一看代码，我去08年，插件，很多功能不能满足当前点的影响时间和TM有限公司，有一个外国daterangepicker插件，基于Bootstrap，需求的样子，非常强大，能够满足需求，但…但是这对PM和测试是不好的……扔掉一半的源代码，优化，时间太晚了，不适合使用。

再做一次。根据jQuery和moment.js（主要加工日期，如果你不需要它），

先看看效果吧。
使用方法uff1a
无功daterangepicker =新DateRangePicker（）；
Daterangepicker.init（{
元：$（#日期范围），
：左
min_date 1990-01-01
格式：yyyy：MM：DD
updatedatefn ：函数（）{
console.log（daterangepicker.getdate（））
}
}）；
基本思想是：

创建日期选择构造函数
函数的DateRangePicker（）{
this.start_picker = null；
this.end_picker = null；
}
初始化日期构造函数，日期段由两个独立的日期组成。当开始日期和结束日期的变化，构造函数的updatedate方法被调用的通知的日期，日期已经改变。
daterangepicker.prototype.init =功能（选择）{
var =；
this.opts =美元。延长（{
：左
min_date 1970-01-01 / /最小日期
updatedatefn ：（功能）{ / /日期更新回调
}
选择| |）{ } }；
This.createCalendarWrap（）；
这个包this.opts.ele.parents美元=（。UI datepicker ）；
this.start_picker =新（Datepicker）； / /日历的开始日期
this.end_picker =新（Datepicker）； / /日历的结束日期
this.start_picker.init（{
集装箱：这wrap.find美元（。日历容器），
min_date ：self.opts.min_date，
yearoffset ：20，
updatecallback ：函数（）{
Self.updateDate（）；
}
}）；
this.end_picker.init（{
集装箱：这wrap.find美元（。calendar-container2 ），
yearoffset ：20，
min_date ：self.opts.min_date，
updatecallback ：函数（）{
Self.updateDate（）；
}
}）；
This.bindEvent（）；
}；
处理日期的更改，如开始日期大于结束日期，应进行交换。
daterangepicker.prototype.updatedate =函数（）{
var =；
无功start_date =矩（自我。start_picker。currentdate）。格式（自我选择。格式）；
无功end_date =矩（自我。end_picker。currentdate）。格式（自我选择。格式）；
无功start_date_time =新的日期（自我。start_picker。currentdate）GetTime（）；
无功end_date_time =新的日期（自我。end_picker。currentdate）GetTime（）；
如果（start_date_time >新日期（）GetTime（））{
self.start_picker.setcurrentdate（新的日期（））；
}
如果（end_date_time >新日期（）GetTime（））{
self.end_picker.setcurrentdate（新的日期（））；
}
如果（start_date_time > end_date_time）{
Self.opts.ele.val（end_date +~ + start_date）；
其他{ }
Self.opts.ele.val（start_date +~ + end_date）；
}
$（。UI daterangepicker范围里），RemoveClass（主动）；
Self.opts.updateDateFn.call（null，这个getdate）（）； / /获取当前日期更新后再开始和结束日期
}；
获取开始和结束日期
获取起始日期和结束日期，开始日期结束日期大于交换时间。
daterangepicker.prototype.getdate =函数（）{
无功start_date = Math.min（this.start_picker.currentdate.gettime（）（）（），this.end_picker.currentdate.gettime）；
无功end_date = math.max（this.start_picker.currentdate.gettime（）（）（），this.end_picker.currentdate.gettime）；
start_date =时刻（start_date）。格式（这个选项的格式）；
end_date =时刻（end_date）。格式（这个选项的格式）；
返回{
start_date ：start_date，
end_date ：end_date
}；
}；
提供动态设置当前开始日期和结束日期的方法。
设置开始日期和结束日期
daterangepicker.prototype.setdate =功能（start_date，end_date）{
this.start_picker.setcurrentdate（新的日期（start_date））；
this.end_picker.setcurrentdate（新的日期（end_date））；
this.updatedate（）；
}；
创建一个容器，因为日期选择只在日期文本框下，面包很方便地位于日期文本框之外。
创建容器的日期段
daterangepicker.prototype.createcalendarwrap =函数（）{
VaR（母= this.opts.ele.parents美元。UI datepicker ）；
var = parent.height美元（），W = $（）parent.width；
var开始日期+
结束日期+
+
今天+
昨天+
最后7天+
最后30天+
+
'；
parent.append美元（包装）；
}；
接下来是对单个日期选择的处理。

定义构造函数和初始化
Function DatePicker () {
this.opts = null；
this.today =新（日期）； / /今天
这todaydate = this.today.getdate（）；
this.currentdate =新（日期）； / /当前选定的日期
}
datepicker.prototype.init =功能（选择）{
VaR选择=美元。延长（{
min_date：1970-01-01
yearoffset 20 / /默认值：20年
选择| |）{ } }；
this.opts =选择；
This.renderCalendar（）；
This.bindEvent（）；
}；
事件处理
datepicker.prototype.bindevent =函数（）{
var =；
Self.opts.container.on（变化
Self.renderSelectedDate（）；
}）；
选择月份
Self.opts.container.on（变化
Self.renderSelectedDate（）；
}）；
根据一月
Self.opts.container.on（单击
e.stoppropagation（）；
无功cur_date = self.currentdate.setmonth（self.currentdate.getmonth（）+ 1）；
Self.setCurrentDate（cur_date）；
}）；
一月
Self.opts.container.on（单击
e.stoppropagation（）；
无功cur_date = self.currentdate.setmonth（self.currentdate.getmonth）-（1）；
Self.setCurrentDate（cur_date）；
}）；
日历上的一天/选择
Self.opts.container.on（单击
如果（！$（这）。HasClass（禁用））{
无功_day =美元（这）。Attr（日期）；
无功cur_date = self.currentdate.setdate（_day）；
Self.setCurrentDate（cur_date）；
}
}）；
}；
临时存储的当前日期已定义，默认日期为今天，但当前日期将在您选择时更改。
选定的日期/临时
DatePicker。原型。tempactivedate =（函数（）{（）
无功_date =新的日期（）；
返回{
主调：函数（）{
返回_date；
}，
设置日期：功能（日期）{
_date =新的日期（日期）；
}
}；
}）；
更改绘图框时的更新日期
设置所选日期的下拉框
datepicker.prototype.renderselecteddate =函数（）{
无功_year = this.opts.container.find（年选）的瓦迩（）；
无功_month = this.opts.container.find（。月选择）瓦迩（）；
无功_day = this.currentdate.getdate（）；
无功cur_date =新的日期（_year，_month，_day）；
this.setcurrentdate（cur_date）；
}；
日历框被渲染，日历被固定到42，7列和6行，从一周到一天。
日历/呈现框架
datepicker.prototype.rendercalendar =函数（）{
无功calendar_header = this.renderheader（）；
无功calendar_days =节123456；
无功calendar_body =；
对于（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 =函数（）{
无功_year = this.today.getfullyear（）；
无功_month = this.today.getmonth（）+ 1；
无功current_year = this.currentdate.getfullyear（）；
无功current_month = this.currentdate.getmonth（）；
无功montharr = { 1 }，两
无功min_year =（新的日期（这个选择。min_date））（。返回完整年份）； / /最小年
无功start_year = current_year -这个选择。yearoffset > = min_yearcurrent_year -这个选择。yearoffset：min_year； / /下拉框的起始年
无功yearselect = ；
如果你有一个日期/最小值，上个月不显示按钮。
如果（current_year <= min_year current_month <= 0）{
yearselect + =；
其他{ }
yearselect =；
}
对于（var i = start_year；i < _year；i++）{
如果（我= = current_year）{
yearselect + = +我+；
{人}
yearselect + = +我+；
}
}
yearselect + =；
无功monthselect =；
对于（var i = 0；i < 12；i + +）{
var；
如果（current_year < _year）{
如果（我= = current_month）{
状态；
}
} else if（current_year = = _year）{
如果（我= = current_month）{
状态；
其他{ }
状态；
}
其他{ }
状态；
}
monthselect + = + montharr {我} +月；
}
如果（current_year > = _year current_month + 1 > = _month）{
monthselect + =；
其他{ }
monthselect = >；
}
返回+ yearselect + monthselect + ；
}；
渲染日历数据
datepicker.prototype.rendercalendardata =函数（）{
var =；
var = this.currentdate.getfullyear（_year）； / /当年
Var _month = this.currentDate.getMonth (1 +); / / the current month
无功_firstday =新的日期（_year，_month - 1, 1）； / /当月的第一天
VaR TDS = this.opts.container.find（。calendar_body TD）；
VaR头= self.renderheader（）；
This.opts.container.find（。calendar_header ）Html（头）；
tds.each（功能（指标项）{
无功_thisdate =新的日期（_year，_month - 1指数+ 1 _firstday.getday（）））；
无功_thisday = _thisdate.getdate（）；
无功_thismonth = _thisdate.getmonth（）+ 1；
无功_thisdatetime = _thisdate.gettime（）；
$（项），Html（_thisday）。Attr（日期
当前月份和当前选择日期突出显示
如果（_thisday）（。getdate）（self.tempactivedate.getdate = _thismonth = = _month）{
$（项），AddClass（主动）；
}
今天/日期样式
如果（_thisday = =自我。todaydate）{
$（项），AddClass（今天）；
}
当前的月份或大于今天的日期禁用
如果（_thismonth）_thisdatetime > self.today.gettime（| |！= = _month）{
$（项），AddClass（禁用）。RemoveClass（主动的）；
}
如果选择的日期大于今天，则重置日期。
如果（_thisdatetime >自我。今天。时间）（_thisday = =自我。todaydate）{
$（项），AddClass（主动）；
self.currentdate = _thisdate；
}
}）；
}；
/ /设置当前日期
datepicker.prototype.setcurrentdate =功能（日期）{
this.tempactivedate.setdate（日期）；
this.currentdate = this.tempactivedate.getdate（）；
this.rendercalendardata（）；
如果（这个选择。updatecallback）{
this.opts.updatecallback.call（null，这。currentdate）；
}
}；
完整的js代码
功能DatePicker（）{
this.opts = null；
this.today =新（日期）； / /今天
这todaydate = this.today.getdate（）；
this.currentdate =新（日期）； / /当前选定的日期
}
datepicker.prototype.init =功能（选择）{
VaR选择=美元。延长（{
min_date：1970-01-01
yearoffset 20 / /默认值：20年
选择| |）{ } }；
this.opts =选择；
This.renderCalendar（）；
This.bindEvent（）；
}；
datepicker.prototype.bindevent =函数（）{
var =；
Self.opts.container.on（变化
Self.renderSelectedDate（）；
}）；
选择月份
Self.opts.container.on（变化
Self.renderSelectedDate（）；
}）；
根据一月
Self.opts.container.on（单击
e.stoppropagation（）；
无功cur_date = self.currentdate.setmonth（self.currentdate.getmonth（）+ 1）；
Self.setCurrentDate（cur_date）；
}）；
一月
Self.opts.container.on（单击
e.stoppropagation（）；
Var cur_date = self.currentDate.setMonth (self.currentDate.getMonth () -1);
Self.setCurrentDate（cur_date）；
}）；
日历上的一天/选择
Self.opts.container.on（单击
如果（！$（这）。HasClass（禁用））{
无功_day =美元（这）。Attr（日期）；
无功cur_date = self.currentdate.setdate（_day）；
Self.setCurrentDate（cur_date）；
}
}）；
}；
选定的日期/临时
DatePicker。原型。tempactivedate =（函数（）{（）
无功_date =新的日期（）；
返回{
主调：函数（）{
返回_date；
}，
设置日期：功能（日期）{
_date =新的日期（日期）；
}
}；
}）；
设置所选日期的下拉框
datepicker.prototype.renderselecteddate =函数（）{
无功_year = this.opts.container.find（年选）的瓦迩（）；
无功_month = this.opts.container.find（。月选择）瓦迩（）；
无功_day = this.currentdate.getdate（）；
无功cur_date =新的日期（_year，_month，_day）；
this.setcurrentdate（cur_date）；
}；
日历/呈现框架
datepicker.prototype.rendercalendar =函数（）{
无功calendar_header = this.renderheader（）；
无功calendar_days =节123456；
无功calendar_body =；
对于（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 =函数（）{
无功_year = this.today.getfullyear（）；
无功_month = this.today.getmonth（）+ 1；
无功current_year = this.currentdate.getfullyear（）；
无功current_month = this.currentdate.getmonth（）；
无功montharr = { 1 }，两
无功min_year =（新的日期（这个选择。min_date））（。返回完整年份）； / /最小年
无功start_year = current_year -这个选择。yearoffset > = min_yearcurrent_year -这个选择。yearoffset：min_year； / /下拉框的起始年
无功yearselect = ；
如果你有一个日期/最小值，上个月不显示按钮。
如果（current_year <= min_year current_month <= 0）{
yearselect + =；
其他{ }
yearselect =；
}
对于（var i = start_year；i < _year；i++）{
如果（我= = current_year）{
yearselect + = +我+；
{人}
yearselect + = +我+；
}
}
yearselect + =；
无功monthselect =；
对于（var i = 0；i < 12；i + +）{
var；
如果（current_year < _year）{
如果（我= = current_month）{
状态；
}
} else if（current_year = = _year）{
如果（我= = current_month）{
状态；
其他{ }
状态；
}
其他{ }
状态；
}
monthselect + = + montharr {我} +月；
}
如果（current_year > = _year current_month + 1 > = _month）{
monthselect + =；
其他{ }
monthselect = >；
}
返回+ yearselect + monthselect + ；
}；
渲染日历数据
datepicker.prototype.rendercalendardata =函数（）{
var =；
var = this.currentdate.getfullyear（_year）； / /当年
无功_month = this.currentdate.getmonth（1 +）； / /当月
无功_firstday =新的日期（_year，_month - 1, 1）； / /当月的第一天
VaR TDS = this.opts.container.find（。calendar_body TD）；
VaR头= self.renderheader（）；
This.opts.container.find（。calendar_header ）Html（头）；
tds.each（功能（指标项）{
无功_thisdate =新的日期（_year，_month - 1指数+ 1 _firstday.getday（）））；
无功_thisday = _thisdate.getdate（）；
无功_thismonth = _thisdate.getmonth（）+ 1；
无功_thisdatetime = _thisdate.gettime（）；
$（项），Html（_thisday）。Attr（日期
当前月份和当前选择日期突出显示
如果（_thisday）（。getdate）（self.tempactivedate.getdate = _thismonth = = _month）{
$（项），AddClass（主动）；
}
今天/日期样式
如果（_thisday = =自我。todaydate）{
$（项），AddClass（今天）；
}
当前的月份或大于今天的日期禁用
如果（_thismonth）_thisdatetime > self.today.gettime（| |！= = _month）{
$（项），AddClass（禁用）。RemoveClass（主动的）；
}
如果选择的日期大于今天，则重置日期。
如果（_thisdatetime >自我。今天。时间）（_thisday = =自我。todaydate）{
$（项），AddClass（主动）；
self.currentdate = _thisdate；
}
}）；
}；
/ /设置当前日期
datepicker.prototype.setcurrentdate =功能（日期）{
this.tempactivedate.setdate（日期）；
this.currentdate = this.tempactivedate.getdate（）；
this.rendercalendardata（）；
如果（这个选择。updatecallback）{
this.opts.updatecallback.call（null，这。currentdate）；
}
}；

日期/日期段由两个单独的实例组成
函数的DateRangePicker（）{
this.start_picker = null；
this.end_picker = null；
}
daterangepicker.prototype.init =功能（选择）{
var =；
this.opts =美元。延长（{
：左
min_date 1970-01-01 / /最小日期
updatedatefn ：（功能）{ / /日期更新回调

}
选择| |）{ } }；
This.createCalendarWrap（）；
This.$wrap=this.opts.ele.parents (.Ui-datepicker);
This.start_picker = new DatePicker ();
this.end_picker =新的DatePicker（）；
this.start_picker.init（{
集装箱：这wrap.find美元（。日历容器），
min_date ：self.opts.min_date，
yearoffset ：20，
updatecallback ：函数（）{
Self.updateDate（）；
}
}）；
this.end_picker.init（{
集装箱：这wrap.find美元（。calendar-container2 ），
yearoffset ：20，
min_date ：self.opts.min_date，
updatecallback ：函数（）{
Self.updateDate（）；
}
}）；
This.bindEvent（）；
}；
daterangepicker.prototype.bindevent =函数（）{
var =；
无功start_picker = self.start_picker，
end_picker = self.end_picker；
This.opts.ele.on（焦点
自美元。wrap.find（。UI daterangepicker包），表明（）；
}）；
$（。UI daterangepicker范围），（单击
无功_year = start_picker.currentdate.getfullyear（）；
无功_month = start_picker.currentdate.getmonth（）；
变量范围= $（this）。Attr（范围关键词）；
无功start_day = start_picker.todaydate，
end_day = end_picker.todaydate
开关（范围）{
案例今天：
start_day =新的日期（时刻（））；
打破；
案例昨天：
start_day =新的日期（时刻（），减去（1，'天））；
打破；
案例最后7天：
start_day =新的日期（时刻（），减去（6，'天））；
打破；
案例最后30天：
start_day =新的日期（时刻（），减去（30，'天））；
打破；
}
Self.setDate（start_day，新的日期（））
$（这）。AddClass（主动）。兄弟姐妹（{范围关键词}）。RemoveClass（主动）；
}）；
$（html）。
目标= $（var $ e.target）；
如果（$ target.closest（。UI daterangepicker包）。长度= = 0美元目标{ 0 }！=自我。选择。元{ 0 }）{
自美元。wrap.find（。UI daterangepicker包）隐藏（）；
}
}）；
}；
daterangepicker.prototype.updatedate =函数（）{
var =；
无功start_date =矩（自我。start_picker。currentdate）。格式（自我选择。格式）；
无功end_date =矩（自我。end_picker。currentdate）。格式（自我选择。格式）；
无功start_date_time =新的日期（自我。start_picker。currentdate）GetTime（）；
无功end_date_time =新的日期（自我。end_picker。currentdate）GetTime（）；
如果（start_date_time >新日期（）GetTime（））{
self.start_picker.setcurrentdate（新的日期（））；
}
如果（end_date_time >新日期（）GetTime（））{
self.end_picker.setcurrentdate（新的日期（））；
}
如果（start_date_time > end_date_time）{
Self.opts.ele.val（end_date +~ + start_date）；
其他{ }
Self.opts.ele.val（start_date +~ + end_date）；
}
$（。UI daterangepicker范围里），RemoveClass（主动）；
Self.opts.updateDateFn.call（null，this.getdate（））；
}；
获取起始日期和结束日期，开始日期结束日期大于交换时间。
daterangepicker.prototype.getdate =函数（）{
无功start_date = Math.min（this.start_picker.currentdate.gettime（）（）（），this.end_picker.currentdate.gettime）；
无功end_date = math.max（this.start_picker.currentdate.gettime（）（）（），this.end_picker.currentdate.gettime）；
start_date =时刻（start_date）。格式（这个选项的格式）；
end_date =时刻（end_date）。格式（这个选项的格式）；
返回{
start_date ：start_date，
end_date ：end_date
}；
}；
设置开始日期和结束日期
daterangepicker.prototype.setdate =功能（start_date，end_date）{
this.start_picker.setcurrentdate（新的日期（start_date））；
this.end_picker.setcurrentdate（新的日期（end_date））；
this.updatedate（）；
}；
创建容器的日期段
daterangepicker.prototype.createcalendarwrap =函数（）{
VaR（母= this.opts.ele.parents美元。UI datepicker ）；
var = parent.height美元（），W = $（）parent.width；
var开始日期+
结束日期+
+
今天+
昨天+
最后7天+
最后30天+
+
'；
parent.append美元（包装）；
}；
无功daterangepicker =新DateRangePicker（）；
Daterangepicker.init（{
元：$（#日期范围），
：左
min_date 1990-01-01
格式：yyyy：MM：DD
updatedatefn ：函数（）{
console.log（daterangepicker.getdate（））
}
}）；
HTML：

CSS
{ *
保证金：0；
填充：0；
}
身体：14px {字体微软雅黑；}
{李
列表样式：无；
}
UI datepicker {。
显示：内联块；
职位：相对；
}
{用户界面日历
保证金：10px；
宽度：260px；
}
单一日历{
边境：1px solid # CCC；
文本对齐：中心；
Box-shadow: 00 3px RGBA (0,0,0,0.25);
}
UI日历{选择
填料：3px 10px；
保证金：0 10px；
}
{。calendar_header
10px保证金：0；
文本对齐：中心；
}
{日历表
边界塌陷：塌陷；
}
日历表
填料：5px 10px；
光标：指针；
文本对齐：中心；
边界半径：3px；
}
{ td.today日历表。
颜色：# 337ab7；
}
{ td.active日历表。
背景：# 337ab7；
颜色：# FFF；
}
{ td.disabled日历表。
颜色：# CCC；
游标：默认值；
}
ui-calendar.next-btn，
ui-calendar.prev-btn {。
填料：1px 4px；
border: 1px solid透明；
边界半径：3px；
字体粗细：粗体；
光标：指针；
}
。UI日历。下一个按钮：盘旋。UI按钮：沪指徘徊{日历。
边框颜色：# CCC；
盒子的影子：00 3px RGBA（0,0,0,0.25）；
}
{ UI daterangepicker包。
位置：绝对；
顶部：0；
宽度：740px；
边境：1px solid # CCC；
边界半径：3px；
盒子的影子：00 3px RGBA（0,0,0,0.25）；
背景：# FFF；
溢出：隐藏；
Z指数：1000；
显示：无；
}
日历标题{
文本对齐：中心；
}
ui-daterangepicker-wrap.ui-calendar {。
浮点数：左；
}
UI daterangepicker范围{。
宽度：150px；
浮子：右边；
保证金：10px；
}
UI daterangepicker UL {范围。
边距：20px；
}
UI daterangepicker李{范围。
5px保证金：0；
填料：5px 10px；
边界半径：3px；
背景：# f5f5f5；
光标：指针；
}
。UI daterangepicker范围李：悬停，UI daterangepicker li.active {范围。
背景：# 337ab7；
颜色：# FFF；
}
。UI daterangepicker范围。范围BTN {
宽度：60px；
身高：30px；
右边距：10px；
边境：1px solid # e5e5e5；
边界半径：3px；
背景：无；
光标：指针；
}
。UI daterangepicker范围。范围确认{
背景：# 337ab7；
边框颜色：# 337ab7；
颜色：# FFF；
}
以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！