如何使用Dojo的DatePicker控件制作联动日期选择器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用Dojo的DatePicker控件制作联动日期选择器相关的知识,希望对你有一定的参考价值。

在开发系统的调查功能时,需要设计一个可以联动的开始日期/结束日期选择器用来设定用户的调查的起始/结束日期。对于这个联动的日期选择器,我们的设计要求是这样的:

  在新增调查时,该调查的开始日期默认为今天,而结束日期则不能选择成今天之前的日期;
  当用户修改开始日期时,将判断当前用户设定的结束日期,如果结束日期在修改后的开始日期之后,则不修改结束日期,而如果结束日期变成了在修改后的开始日期之前时,则修改结束日期,和开始日期为同一天,并且设定用户不能选择开始日期之前的日期为结束日期;
  修改结束日期时,不能选择开始日期之前的日期。

  针对这样的要求,决定使用dojo的日期选择控件 DatePicker / DropDownDatePicker 来实现。

  P_1167283844_0.JPG
  最终的效果,联动的DatePicker,注意20日之前的日期都是不能选择的

  针 对第1和第3点要求,dojo的 DatePicker / DropDownDatePicker 可以轻易的实现,可以通过设置 DatePicker / DropDownDatePicker 的 value 和startDate这两个属性实现。而要这个需求的难点在于两个DatePicker之间的联动,也就是说,要动态的根据第一个DatePicker的 值来设定第二个DatePicker的startDate属性。但是不幸的是,dojo没有提供直接的动态修改 DatePicker 的 startDate / endDate 的方法。虽然我们可以随时修改DatePicker的startDate属性,但是,在UI(日期选择界面)却不会发生变化,达不到我们想要的效果。

  dojo提供了一个onValueChanged的事件,我们可以为第一个DatePicker添加这个事件的触发器,触发后调用我们自己写的 javascript函数。而在这个函数里我们要解决的问题就只有修改第二个DatePicker的startDate属性(这个很简单),并让UI即时 生效(问题就在这里)了。

  在仔细研究了dojo的DatePicker的源代码后发现,startDate仅仅是这个 DatePicker控件的一个单纯的属性,修改它并不会在内部触发任何改动UI的事件。所以,我们要做的就变得很简单了——想办法重绘UI就可以。不幸 中的万幸是,我们找到了_preInitUI()这个内部的方法,它可以绘制DatePicker的UI。

  一切明朗后,就变得很简单了。看看代码片断吧,很轻松的实现了两个DatePicker / DropDownDatePicker控件的联动。

  html4STRICT代码:

  开始时间:<input dojoType="dropdowndatepicker" id="startdate" name="start" value="today" displayFormat="yyyy-MM-dd" onValueChanged="checkEndDate" />
  结束时间:<input dojoType="dropdowndatepicker" id="enddate" name="end" displayFormat="yyyy-MM-dd" />

  注意看上面HTML代码中的第一个DropDownDatePicker控件的属性:

  value设置为today则会默认带出今天的日期
  displayFormat设置时间显示格式(便于后台程序转换成timestamp导入DB)
  onValueChanged则设置了触发名为checkEndDate的自定义Javascript函数
  再看看Javascript代码片断:

  JAVASCRIPT代码:

  function g(id)
  return document.getElementById(id);
  
  function w(id)
  return dojo.widget.getWidgetById(id);
  
  function checkEndDate()
  var func=function()
  //得到新的修改后的开始日期和当前的结束日期
  starttime=w('startdate').getDate();
  endtime=w('enddate').getDate();
  //开始日期是否在结束日期之后?
  if (starttime>endtime)
  //开始日期在结束日期之后,修改结束日期等于开始日期
  w('enddate').setDate(starttime); //时间戳
  w('enddate').value=w('startdate').inputNode.value; //字符串值
  
  //设定结束日期的startDate属性,限制用户选择开始日期之前的日期
  var startDate=dojo.date.fromRfc3339(w('startdate').inputNode.value).setHours(0,0,0,0);
  w('enddate').startDate=w('startdate').inputNode.value;
  w('enddate').datePicker.startDate=startDate;
  //得到结束日期的当前月份
  var d = new Date(w('enddate').datePicker.curMonth);
  //利用_preInitUI()重绘结束日期的UI(当前月)
  w('enddate').datePicker._preInitUI(d,false,true);
  
  //延时500毫秒执行
  window.setTimeout(func,500);
  

  怎 么样,很简单吧?不过你也许要问,为什么要延时500毫秒执行呢?原因是这样的,一开始浏览器在绘制页面的时候,设定开始日期为今天,这一动作同样会触发 onValueChanged事件。但这时候,因为结束日期的DatePicker控件还未被浏览器绘制完成,所以导致触发onValueChanged 事件后,Javascript无法执行成功,根本get不到enddate这个element。所以,我采取了onValueChanged事件触发后 500毫秒后执行Javascript程序,这时候,再慢的电脑都已经render完这个element了,执行Javascript就不会出错了,而且 对于用户,也没什么感觉。当然,你也可以写一个onLoad事件的Javascript函数在页面加载完成后再给startdate这个element赋 值。这都是问题的解决办法,怎么使用完全取决于你。
参考技术A 在开发系统的调查功能时,需要设计一个可以联动的开始日期/结束日期选择器用来设定用户的调查的起始/结束日期。对于这个联动的日期选择器,我们的设计要求是这样的: 在新增调查时,该调查的开始日期默认为今天,而结束日期则不能选择成今天之前...

如何制作不需要的 Angular UI Datepicker

【中文标题】如何制作不需要的 Angular UI Datepicker【英文标题】:How do I make an Angular UI Datepicker NOT Required 【发布时间】:2015-09-13 14:31:20 【问题描述】:

我有一个包含许多字段的表单,包括几个日期选择器(Angular UI Bootstrap)。

<div name="mainForm" ng-form>
    <div class="form-group">
        <p class="input-group">
            <input type="text" name="dt" 
                   class="form-control"
                   ng-model="dt"
                   is-open="opened" 
                   datepicker-popup="MM/dd/yyyy" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
    </div>
    <p class="text-danger" ng-show="mainForm.$invalid">Invalid!</p>
</div>

我正在使用带有表单的 Angular 验证。我们有一些必填字段,但日期不是。如果您输入日期并将其删除,则会将表单标记为无效。我创建了一个Plunkr 来演示这一点。

有没有办法解决这个问题?

注意:当您清除日期时,它还会在控制台中记录此错误。

Datepicker 指令:“ng-model”值必须是 Date 对象、自 01.01.1970 以来的毫秒数或表示 RFC2822 或 ISO 8601 日期的字符串。

【问题讨论】:

这是一个错误:github.com/angular-ui/bootstrap/issues/3835 【参考方案1】:

在当前版本的代码中,有一个 $datepickerSuppressError 值,您可以将其设置为 true,这将隐藏控制台错误。 You can see in the code 检查日期是否为 NaN,如果 $datepickerSuppressError 仍然为 false,则显示控制台错误。

不过,话虽如此,仍有办法解决表单无效的问题。您只需要添加额外的检查以查看是否设置了 mainForm.$error.date 或类似的设置。

例如,您可以将按钮更改为具有此功能:

ng-disabled="mainForm.$invalid && !mainForm.$error.date" 

即使指令在日期上设置了错误,这将使您的按钮保持启用状态,并且如果任何其他字段无效,它应该禁用。

【讨论】:

我可以在日期为空时以某种方式删除 $error.date 吗?因为在我的表单上,日期也是可选的,当你删除它时,会出现错误。 @adiii4 我不相信当前版本(0.14.3)有这个问题。这个问题是用 0.13.0 提出的。我会确保您的版本是最新的,然后如果您仍有问题,请打开一个新问题。 我修好了!我编写的验证指令有问题。但是感谢您的帮助!

以上是关于如何使用Dojo的DatePicker控件制作联动日期选择器的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Datepicker日期控件

Dojo/Dijit - 如何在布局控件上允许垂直滚动

vue中van-picker的多列联动数据格式如何设置以及调用

my97datepicker日期控件的宽度高度如何设置呢?

如何调整 jQuery DatePicker 控件的大小

如何本地化 WPF 4.0 DatePicker 控件