美文网首页
angular-datepicker min-date max-

angular-datepicker min-date max-

作者: sxqiong | 来源:发表于2017-12-23 10:38 被阅读27次

angularjs的datepicker

最近在学angular(not angularjs)有什么好一点的开源项目求推荐。

叨叨叙事开始

一同事问我怎么动态限制angular-datepicker选择时间范围,因为在忙一些事情,所以就告诉他用min-date max-date 属性来控制,这个时候脑子里闪过一个念头,那是我多年累计的杂乱的知识使然,这个念头告诉我没这么简单,管他呢,我先忙我的事情。果然,他又来问我,没有生效,顶着百年大佬的光环与尊严,决定去官网瞧瞧,果然很简单。

正事儿专用

angular-datepicker的属性虽然不能动态限定(估计这样限定起来也很消耗性能的),但是支持事件广播的形式来通知控件进行属性重置。
千言不如一码:

首先html picker标签需要有个id

          <input id="middlePicker" name="middleTime" class="form-control" placeholder="中间日期"
                                       ng-model="model.middleTime"
                                       format="YYYY-MM-DD"
                                       date-time max-view="year" min-view="date" view="month"
                                       required
                                       auto-close="true"
                                       ng-disabled="disableSetMiddle"
                                />

js文件广播体操

            //pickerUpdate 为事件key,middlePicker为控件id,$3 配置属性
            $scope.$broadcast('pickerUpdate','middlePicker',{
              minDate:new Date()-100000,
              maxDate:new Date()+100000
            });

demo展示

  • Step1:


  • Step2:


  • Step3:



    (校验部分就不展示啦,我依旧这么唠叨)

相关文章

网友评论

      本文标题:angular-datepicker min-date max-

      本文链接:https://www.haomeiwen.com/subject/tcrawxtx.html