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 ...
随机推荐
- 【转】浏览器输入URL后发生了什么
转自:http://www.cnblogs.com/webdeve/p/7865520.html本文摘要: 输入网址 当我们在浏览器输入网址并回车后,一切从这里开始. 一.DNS域名解析 我们在浏览器 ...
- Xor Sum 01字典树 hdu4825
Xor Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Others)Total S ...
- SQL Server 2008更改数据库保存路径
本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=641 操作环境: WindowsXP 数据库: Microsoft SQL Server 2008 操作步骤: 选中 ...
- 优雅地实现CSS Animation delay
今天写一个css动画时遇到一个有意思的问题,记录如下: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画 ...
- border-radius 详解及示例
border-radius [ˈbɔrdə(r)] - [ˈrediəs] 英文示意: border:边界,国界,边疆 radius:半径,范围 定义: 复合写法: border-radius ...
- 手机端实现fullPage——全屏滚动效果
封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1. 纯js实现,小巧轻便. 2. 兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1. 仅封装了基础功能,H ...
- java没有firendly访问类型
java中只有public.private.protected.default这几种修饰符,没有friendly修饰符,没加修饰符就是friendly.friendly只是一种说法,把它认为是defa ...
- POJ_1269_Intersecting Lines_求直线交点
POJ_1269_Intersecting Lines_求直线交点 Description We all know that a pair of distinct points on a plane ...
- 阿里巴巴Java开发程序猿年薪40W是什么水平?
对于年薪40万的程序员,不只是技术过硬,还有一个原因是他们所在的公司福利高,或者会直接持股.在BAT中就是一个很好的案例,例如阿里巴巴P7,P8级别的员工不仅是年薪30到80万不等,还有更多股票持有. ...
- appium 【已解决】Android,每次启动手机中都会安装Appium settings和Unclock的方法
环境介绍: 1.appium版本:1.4.16.1 2.真机运行 实现结果: 运行appium第一次运行则安装Appium settings和Unclock的apk,再次之后的运行则无需手动卸载,再次 ...