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

需要引用以下几个文件:

<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. React_02_ECMAScript6

    1.let与const ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const. let 声明的变量只在 let 命令所在的代码块内有效,const 声明一 ...

  2. elasticsearch: can not run elasticsearch as root

    进入bin目录启动elasticsearch: lunadeMacBook-Air:elasticsearch-6.1.0 luna$ cd bin/ lunadeMacBook-Air:bin lu ...

  3. span 不使用float 靠右对齐且垂直居中

    一般让div 里的span 靠右对齐用的方法比较多的是float:right. 这次由于各种原因我不想用float 先看效果: HTML 部分 <div class="customer ...

  4. 软件工程第二次作业——Java学习路线

    我的第二次软工作业 过去我对自己所学和想学都很迷茫,以至于学得总是一知半解,但现在我想主攻Java方向,并坚定不移地走下去(之后拓展其他方面就是以后的事情了).之所以想主攻Java方向是因为Java本 ...

  5. 文档流&浮动&定位

    文档流指元素在文档中的位置由元素在html里的位置决定,块级元素独占一行,自上而下排列:内联元素从左到右排列脱离文档流的方式: 浮动,通过设置float属性 绝对定位,通过设置position:abs ...

  6. TOMCAT到底能 承受多少并发,并发量计算你方法

        TOMCAT 可以稳定支持的最大并发用户数 https://www.jianshu.com/p/d306826aef7a tomcat并发数优化maxThreads.acceptCount(最 ...

  7. mysql-connector-java(6.0以上)的时差问题

    一.背景 通过mybatis日志观察插入数据库的时间为当前时间,但是打开数据库表发现时间滞后了8个小时. 二.推论及解决 很容易猜到这是时区的问题. 三.最后找到的问题点如下: jdbc:mysql: ...

  8. Linux_CentOS中Mongodb4.x 安装调试、远程管理、配置 mongodb 管理员密码

    Mongodb4.x 安装 官方文档:https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/ 1.配置 yum 源 1 ...

  9. 泡泡一分钟:Tightly-Coupled Aided Inertial Navigation with Point and Plane Features

    Tightly-Coupled Aided Inertial Navigation with Point and Plane Features 具有点和平面特征的紧密耦合辅助惯性导航 Yulin Ya ...

  10. [LeetCode] 624. Maximum Distance in Arrays 数组中的最大距离

    Given m arrays, and each array is sorted in ascending order. Now you can pick up two integers from t ...