项目中经常会用到起止时间,如下图:

需要引用以下几个文件:

<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/bootstrap/dist/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="~/lib/bootstrap/dist/js/bootstrap-datetimepicker.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap-datetimepicker.zh-CN.js"></script>

然后,代码中需要初始化一下:

            $("#sDatePicker").datetimepicker(
{
language: 'zh-CN',
autoclose: true,//选中之后自动隐藏日期选择框
clearBtn: false,//清除按钮
todayBtn: true,//今日按钮
format: 'yyyy-mm-dd',
startView: 2,
minView: 2,
todayHighlight: false,
forceParse: true,
endDate: new Date()
}).on('changeDate', function (ev) {
if (ev.date) {
$("#eDatePicker").datetimepicker('setStartDate', new Date(ev.date.valueOf()))
} else {
$("#eDatePicker").datetimepicker('setStartDate', null);
}
}); $("#eDatePicker").datetimepicker(
{
language: 'zh-CN',
autoclose: true,//选中之后自动隐藏日期选择框
clearBtn: false,//清除按钮
todayBtn: true,//今日按钮
format: 'yyyy-mm-dd',
startView: 2,
minView: 2,
todayHighlight: false,
forceParse: true
}).on('changeDate', function (ev) {
if (ev.date) {
$("#sDatePicker").datetimepicker('setEndDate', new Date(ev.date.valueOf()))
} else {
$("#sDatePicker").datetimepicker('setEndDate', new Date());
} });

初始化代码-js

搞定,而且也限制了起始时间不大于今天,且不大于结束时间。结束时间不小于起始时间。

然而,在将选择的日期删除之后,总是回不到初始状态 ,比如,结束时间选择 3月5号,那么开始时间只能选3月5号以前,当删除了结束时间(或者点击清空/重置 按钮清除已选时间),发现,开始时间依然是只能选择3月5号之前的。解决 方法如下:
修改源码bootstrap-datetimepicker.js,如下片段:

    setStartDate: function (startDate) {
//this.startDate = startDate || this.startDate;
//传入空或null时,恢复默认(为解决清空日期后,时间限制恢复不到默认值,例如开始时间仍被限制小于上一次的结束时间)
this.startDate = startDate || new Date(-8639968443048000);
if (this.startDate.valueOf() !== 8639968443048000) {
this.startDate = DPGlobal.parseDate(this.startDate, this.format, this.language, this.formatType, this.timezone);
}
this.update();
this.updateNavArrows();
}, setEndDate: function (endDate) {
//this.endDate = endDate || this.endDate;
//传入空或null时,恢复默认(为解决清空日期后,时间限制恢复不到默认值,例如开始时间仍被限制小于上一次的结束时间)
this.endDate = endDate || new Date(8639968443048000);
if (this.endDate.valueOf() !== 8639968443048000) {
this.endDate = DPGlobal.parseDate(this.endDate, this.format, this.language, this.formatType, this.timezone);
}
this.update();
this.updateNavArrows();
},

源码修改

然后 ,在清空/重置 事件中,增加以下代码:

            $("#sDatePicker").datetimepicker('setEndDate', new Date());
$("#eDatePicker").datetimepicker('setStartDate', null);

ok,搞定了;

bootstrap-datetimepicker 日期控件起始时间和结束时间的更多相关文章

  1. My97DatePicker日期控件,开始时间不能大于结束时间,结束时间不能小于开始时间

    在只做项目的时候,需要用到一个日期控件,之前用到过my97,感觉挺好的,兼容性很强,配置也比较容易 当开始时间不能大于结束时间和结束时间不能小于开始时间,这个需要一个判定的,要不然不就乱套了 在my9 ...

  2. Bootstrap中datetimepicker日期控件1899年问题解决

    Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一个很尴尬的问题.我们项目一直采用的是angular+bootstrap,日期控件用的是boot ...

  3. laydate时间控件:开始时间,结束时间最大最小值

    时间控件地址及插件下载链接:https://www.layui.com/doc/modules/laydate.html 填充时间已两个功能为例: 1.添加功能 :时间 规则:选择开始时间后,点击结束 ...

  4. jQuery DateTimePicker 日期控件

    在线实例 实例演示 使用方法 <input id="datetimepicker" type="text" > 复制 $('#datetimepic ...

  5. bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法

    筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...

  6. jQuery Datepicker日期控件

    datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...

  7. JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

  8. 【前端控件】JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

  9. bootstrap 日期控件常用选项

    使用bootstrap作为UI基础之后,为了尽可能的保持系统风格的一致性,通常我们不太会考虑再引入My97DatePicker作为日期控件. 作为潜在实现的选择之一,http://www.bootcs ...

随机推荐

  1. Kubernetes集群部署(yum部署)

    环境准备 Kubernetes-Master:192.168.37.134    #yum install kubernetes-master etcd flannel -y Kubernetes-n ...

  2. 2019 SDN第四次上机作业

    作业博客链接:http://edu.cnblogs.com/campus/fzu/fzusdn2019/homework/10017 1. 解压安装OpenDayLight控制器(本次实验统一使用Be ...

  3. Linux 文件压缩、打包

    文件压缩 计算机使用byte单位来计量.实际上,计算机最小的计量单位是bit.1byte = 8 bit.如果记录1这个数字,00000001,1会在最右边占一个1个bit 其他7个bit会被填上0. ...

  4. 剑指offer:删除链表中重复的结点

    题目描述: 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理 ...

  5. c++ stl bind函数介绍

    /* stl::bind 使用 */ #include <iostream> #include <string> #include <functional> /* ...

  6. Qt开发经验小技巧1-10

    当编译发现大量错误的时候,从第一个看起,一个一个的解决,不要急着去看下一个错误,往往后面的错误都是由于前面的错误引起的,第一个解决后很可能都解决了. 定时器是个好东西,学会好使用它,有时候用QTime ...

  7. oracle的merge语法

    merge into trade.ttradeseat ausing trade.bs_zrt_tradeseat bon (a.L_FUND_ID = b.l_Fund_Id and a.l_bas ...

  8. [LeetCode] 117. Populating Next Right Pointers in Each Node II 每个节点的右向指针 II

    Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...

  9. SpringBoot+Mybatis+MySql 自动生成代码 自动分页

    一.配置文件 <!-- 通用mapper --> <dependency> <groupId>tk.mybatis</groupId> <arti ...

  10. Windows常用命令的使用

    3.Tracert Tracert命令用来显示数据包到达目标主机所经过的路径,并显示到达每个节点的时间.该诊断实用程序将包含不同生存时间 (TTL) 值的 Internet 控制消息协议 (ICMP) ...