angularjs插件之angular-moment-picker设定可选最小时间和最大时间，以及设置可选时间段

￡神魔★判官ぃ 2022-03-12 03:14 128阅读 0赞

**效果：**初次选择（另外一个时间未选）

-开始时间：最小值没做限制，最大值为当日

-结束时间：最小值没做限制，最大值为当日

再次次选择（另外一个时间已选）

-开始时间：最小值没做限制，最大值为结束时间最大值

-结束时间：最小值开始时间最小值，最大值为当日

**ps:**不用多说了，暴力粘贴代码你懂的，代码最后有帮助文档链接

<!DOCTYPE html>
    <html ng-app="Demo" style="height:100%;">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Angular Moment Picker</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/angular-moment-picker/0.10.0/angular-moment-picker.min.css" rel="stylesheet">
    
    </head>
    
    <body ng-cloak style="padding:20px;" ng-controller="DemoController as ctrl">
    
    
        <div class="form-group">
          <label>Start date as string <code></code></label>
          <input class="form-control"
                 placeholder="开始日期"
                 moment-picker="stringDate"
                 locale="en"
                 format="YYYY-MM-DD"
                 min-date="ctrl.minDate"
                 max-date="ctrl.maxDate"
                 start-view="month"
                 change="ctrl.onChange(newValue, oldValue)"
                 ng-model="ctrl.first.momentDate"
                 ng-model-options="{ updateOn: 'blur' }">
        </div>
        
        <hr>
        
        <div class="form-group">
          <label>Start date as Moment.js object</label>
          <input class="form-control"
                 placeholder="结束日期"
                 moment-picker="ctrl.second.stringDate"
                 locale="en"
                 format="YYYY-MM-DD"
                 min-date="ctrl.minDate1"
                 max-date="ctrl.maxDate1"
                 start-view="month"
                 change="ctrl.onChange1(newValue, oldValue)"
                 start-date="ctrl.startDateMoment"
                 ng-model="ctrl.second.momentDate"
                 ng-model-options="{ updateOn: 'blur' }">
        </div>
        
           <script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.js"></script>
        <script src="https://cdn.bootcss.com/angular-moment-picker/0.10.0/angular-moment-picker.js"></script>
        <script >
            angular
          .module('Demo', ['moment-picker'])
    
    
            .controller('DemoController', ['$scope', function () {
            var ctrl = this;
                // init
            ctrl.minDate = "";
            ctrl.maxDate = moment();
    
    
            ctrl.minDate1 = "";   
            ctrl.maxDate1 = moment();
    
            ctrl.onChange = function (newValue, oldValue) {
              ctrl.minDate1 = newValue && newValue.format('YYYY-MM-DD');
            };
    
          ctrl.onChange1 = function (newValue, oldValue) {
              ctrl.maxDate = newValue && newValue.format('YYYY-MM-DD');
            };
          }])
          
        </script> 
    </body>
    </html>

**插件作者github:**[https://github.com/indrimuska/angular-moment-picker][https_github.com_indrimuska_angular-moment-picker]

**在线编辑：**[https://embed.plnkr.co/][https_embed.plnkr.co]

**关键属性/方法：min-date，max-date，change**

[https_github.com_indrimuska_angular-moment-picker]: https://github.com/indrimuska/angular-moment-picker
[https_embed.plnkr.co]: https://embed.plnkr.co/