bootstrap-datetimepicker 日期控件起始时间和结束时间
项目中经常会用到起止时间,如下图:
需要引用以下几个文件:
<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 日期控件起始时间和结束时间的更多相关文章
- My97DatePicker日期控件,开始时间不能大于结束时间,结束时间不能小于开始时间
在只做项目的时候,需要用到一个日期控件,之前用到过my97,感觉挺好的,兼容性很强,配置也比较容易 当开始时间不能大于结束时间和结束时间不能小于开始时间,这个需要一个判定的,要不然不就乱套了 在my9 ...
- Bootstrap中datetimepicker日期控件1899年问题解决
Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一个很尴尬的问题.我们项目一直采用的是angular+bootstrap,日期控件用的是boot ...
- laydate时间控件:开始时间,结束时间最大最小值
时间控件地址及插件下载链接:https://www.layui.com/doc/modules/laydate.html 填充时间已两个功能为例: 1.添加功能 :时间 规则:选择开始时间后,点击结束 ...
- jQuery DateTimePicker 日期控件
在线实例 实例演示 使用方法 <input id="datetimepicker" type="text" > 复制 $('#datetimepic ...
- bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法
筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...
- jQuery Datepicker日期控件
datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...
- JQuery datepicker 日期控件设置
datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...
- 【前端控件】JQuery datepicker 日期控件设置
datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...
- bootstrap 日期控件常用选项
使用bootstrap作为UI基础之后,为了尽可能的保持系统风格的一致性,通常我们不太会考虑再引入My97DatePicker作为日期控件. 作为潜在实现的选择之一,http://www.bootcs ...
随机推荐
- 【POJ2632】Crashing Robots
题目传送门 本题知识点:模拟 模拟机器人的运作过程,分别有三种功能,L 则是左转90°,R 则是右转90°,L 则是前进1格.让我们去模拟并判断它们的状态. 输入: 第一行是测试样例 第二行分别是矩形 ...
- 【Excel】多条件查找
例如下图:要求在单元格从C10中根据分类与名称找出相应的数量 1.VLOOKUP函数(数组公式) {=VLOOKUP(A10&B10,IF({1,0},A2:A6&B2:B6,C2:C ...
- D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...
- if, if/else, if /elif/else,case
一.if语句用法 if expression then command fi 例子:使用整数比较运算符 read -p "please input a integer:" a if ...
- SDN-based Network Management Solution
SDN-based Network Management Solution 摘要: 在此项目中,我们开发了一种网络管理应用程序,以监视和控制由支持OpenFlow的交换机和支持SNMP的设备组成的企业 ...
- Nacos学习
Nacos是阿里开源的一个新框架,在分布式的架构中,Nacos同时扮演着服务注册中心和配置中心的角色.今天主要讲的是Nacos作为服务注册中心. 分布式中著名的CAP理论,任何一种服务注册中心都只能实 ...
- SQLServer数据库之SQL Server 获取本周,本月,本年等时间内记录
本文主要向大家介绍了SQLServer数据库之SQL Server 获取本周,本月,本年等时间内记录,通过具体的内容向大家展现,希望对大家学习SQLServer数据库有所帮助. datediff(we ...
- np.stack
- window系统修改时区IIS需要重启
window系统修改时区IIS需要重启,才能获取到修改后的时区,如果不重启IIS,IIS中发布程序获取不到已经修改时区的时间.
- mongoDB杂项
密码更改:db.changeUserPassword('tank2','test'); 在这里我遇到了一个问题: mongod: error while loading shared librarie ...