JS Bootstrap-DateRangePicker 如何设置默认值为空
DateRangePicker是一款时间范围选择器,界面良好,非常适合短时间范围选择的插件,具体源码可以在http://www.daterangepicker.com/找到
,但是目前使用中,感觉功能不甚齐全,所以将遇到的问题和解决方法记录下来。
1无法默认值为空
DateRangePicker可以通过在初始化时设置startDate和endDate属性,来实现设置初始默认值。其中可以引用moment这一款专门针对date的时间管理插件,例如使用options.startDate=moment() 设置初始默认值为当前时间
但是当想设置初始默认值为空时,即使设置startDate和endDate为 ' '也不行,会提示日期格式不对,无法实现。
所以,在此我们可以使用autoUpdateInput属性,autoUpdateInput是用来打开和关闭daterangepicker选择时,是否自动传值到input[text] 这个DOM的属性,通过设置初始autoUpdateInput为false,可以实现初始值为空,这是在input中设置的placeholder才能正常显现出来。
但是设置该属性之后,不管怎么选择daterangePikcer的日期,都不会有传值到input中,也就是没有办法正常显示选择的日期了,所以要在恰当的时刻,调用$(id).data('daterangepicker').autoUpdateInput=true,就可以了。
作者最初设置为,最初默认值为空,当daterangepicker 的input发生点击时,autoUpadateInput=true,但是这时出现input不管是否选中日期,都会自动有值,所以为了修改这个问题,我在daterangepicker的源码中进行了修改,当然也可以重新更改需要的onclick事件。
在源码中,当autoUpdateInput设置为false之后,我们想要在点击确定,选中日期和点击range三个地方,将autoUpdateInput改变回来,所以,在三处设置了this.autoUpdateInput=true属性,
在
在1207行左右,clickrange函数中,当点击选择了range时,改变autoUpdateInput属性,在else中加入,是因为当选择自定义标签时,如果没有选择日期,依旧不改变默认值。选择日期的改变,在后文所示。
} else if (!this.endDate && date.isBefore(this.startDate)) {
this.autoUpdateInput=true;
//special case: clicking the same date for start/end,
//but the time of the end date is before the start date
this.setEndDate(this.startDate.clone());
} else { // picking end
this.autoUpdateInput=true;
if (this.timePicker) {
在1335行左右,clickdate函数中,当点击选择了enddate也就是完整的选择了日期时
} else if (!this.endDate && date.isBefore(this.startDate)) {
this.autoUpdateInput=true;
//special case: clicking the same date for start/end,
//but the time of the end date is before the start date
this.setEndDate(this.startDate.clone());
} else { // picking end
this.autoUpdateInput=true;
if (this.timePicker) {
在1400行左右,还有一种情况,就是当有时分秒的时间显示时,有可能用户会直接点击确认,或更改时分秒,来选择日期,所以在clickapply函数中,也改变autoUpdateInput值
clickApply: function(e) {
this.autoUpdateInput=true;
JS Bootstrap-DateRangePicker 如何设置默认值为空的更多相关文章
- winform中的dateTimePicker控件设置默认值为空
winform中的dateTimePicker控件设置默认值为空 第一步:设置Format的属性值为“Custom” 第二步:设置CustomFormat的属性值为空,需要按一个空格键
- 给js function的参数设置默认值
C# 中 function func(a,b=1){//具体方法} js 中 function func(a,b){ a= arguments[0] || 10; b= arguments[1] || ...
- (转)js函数参数设置默认值
原文:http://www.cnblogs.com/RightDear/archive/2013/06/26/3156652.html js函数参数设置默认值 php有个很方便的用法是在定义函数时 ...
- Js得到radiobuttonlist选中值,设置默认值
JS 代码 var vRbtid=document.getElementById("rbtid"); //得到所有radio var vRbtidList= v ...
- miniUI input设置默认值,js获取年月注意事项,数据库nvl函数使用
2017-6-5周一,今天碰到的一个需求是:两税附征模块进入页面筛选时间默认值为当前月的上一个月,并根据筛选结果显示数据,我们用的框架为miniUI. 坑1: 默认值设置,刚刚接触miniUI,对里面 ...
- MVC4中给TextBoxFor设置默认值和属性(同时设置js事件)
例如:(特别注意在设置初始值的时候 Value 中的V要大写) @Html.TextBoxFor(model => model.CustomerCode, new { Value=" ...
- select2 取值 遍历 设置默认值
select2 取值 遍历 设置默认值 本章内容主要介绍Select2 的初始化,获取选中值,设置默认值,三个方法.Select2 美化了单选框,复选框和下拉框,特别是下拉框多选的问题.但同时,Sel ...
- ng-option指令使用记录,设置默认值需要注意
ng-options一般有以下用法: 数组作为数据源: label for value in array select as label for value in array label group ...
- AngularJS的select设置默认值
AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...
随机推荐
- linux ulimit 调优
概要:linux系统默认open files数目为1024, 有时应用程序会报Too many open files的错误,是因为open files 数目不够.这就需要修改ulimit和file-m ...
- 解决VMware虚拟机报错“无法连接MKS:套接字连接尝试次数太多,正在放弃”
1.错误描述 在VMware中打开虚拟机时报错: "无法连接MKS:套接字连接尝试次数太多,正在放弃" 物理机操作系统: Windows 7 虚拟机操作系统: Kali Linux ...
- python实现邮件的发送
一.163邮箱设置 进入163邮箱,点击设置中的pop3/smtp/imap 开启smtp服务,如果没有开启,点击设置,手机号验证后勾选开启即可,开启后图如下: 主要用到的就是smtp服务器:smtp ...
- web优化(二)
上次说到js的阻塞dom渲染可能出现的白屏现象,所以对于js我们需要一些优化.首先我们可以模仿通信中的时分的概念,使用 setTime()来执行一段js代码然后渲染页面然后再执行一段js代码,这样可以 ...
- Selenium 三种等待
问题 : 强制等待和隐式等待的区别怎么理解? 和pause有什么区别?什么时候适用pause? 第二篇文章更清楚一点. 以下内容引自: https://www.cnblogs.com/xu-jia-l ...
- BITE
<Google软件测试之道> 读后感言: p147 提到的BITE实在是太让人心动了, 一个简单的动作即可提交一个信息齐全的bug,连非专业测试人员也能轻松做到.身边很多人也都碰到过提交b ...
- 【Unity游戏开发】浅谈Lua和C#中的闭包
一.前言 目前在Unity游戏开发中,比较流行的两种语言就是Lua和C#.通常的做法是:C#做些核心的功能和接口供Lua调用,Lua主要做些UI模块和一些业务逻辑.这样既能在保持一定的游戏运行效率的同 ...
- 关于CocoaPods的ruby镜像文件问题
项目遇到第三方库更新问题 时 用到cocoaPods更换淘宝ruby镜像问题的时候 报错 后来 又在别处找了下 发现 用的是 https 如下: 后来细想 可能跟Xcode7 要求HTTPs ...
- centos7系统服务管理
systemd是RH7系列操作系统开始启用新的系统和服务管理器.它被设计为与sysv init脚本向后兼容,并提供了一些功能,例如在引导时并行启动系统服务,按需激活守护程序或基于依赖关系的服务控制逻辑 ...
- Spring Framework学习要点摘抄
以下摘自Spring Framework官方文档,版本Spring 4.3. <context:annotation-config/> implicitly registered post ...