angular-datepicker min-date max-date 用法

angularjs的datepicker

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

叨叨叙事开始

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

正事儿专用

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

首先html picker标签需要有个id

          

js文件广播体操

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

demo展示

  • Step1:


    angular-datepicker min-date max-date 用法_第1张图片
  • Step2:


    angular-datepicker min-date max-date 用法_第2张图片
  • Step3:


    angular-datepicker min-date max-date 用法_第3张图片

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

你可能感兴趣的:(angular-datepicker min-date max-date 用法)