如何设置日期选择器 minDate？

Question

我有一个指令 date-picker.js 并查看为 selectDate.html。当另一个日期选择器的值发生变化时，我想为日期选择器设置 minDate 。如何实现？

.directive('selectDate', ['moment', function(moment) {
    return {
        restrict: 'E',
        require:'^ngModel',
        templateUrl: 'views/selectDate.html',
        replace: true,
        scope: {
            ngModel: '='
        },
        link: function($scope, element, attrs) {
            $scope.date = $scope.ngModel;
            $scope.dateOptions = {
                startingDay: 1,
                showWeeks: false
            };
            $scope.dateStatus = {
                opened: false
            };
            $scope.openDatePopup = function() {
                $scope.dateStatus.opened = true;
            };
            $scope.$watch('date', function (newValue, oldValue) {
                if (newValue !== oldValue) {
                    var date = moment(newValue);
                    $scope.ngModel = date.format('YYYY-MM-DD');
                }
            });
        }
    };

selectDate.html

<span class="select-date">
  <input type="text" readonly="readonly" datepicker-popup="dd.MM.yyyy"     datepicker-options="{startingDay: 1, showWeeks: true}" ng-model="date"   show-button-bar="false" current-text="Heute" close-text="Schließen" is-  open="dateStatus.opened" min-date="'2014-01-01'" class="form-control" required="required" ng-click="openDatePopup()">
</span>

我正在使用它，如下所示：

   From <select-date ng-model="fromDate"></select-date>
   To <select-date ng-model="toDate"></select-date>

我想将 toDate 的 minDate 设置为 fromDate 值。

Answer 1

你可以使用 ui-bootstrap 指令，这更容易，下面是代码

 $scope.dateOptions = {
            formatYear: 'yyyy',
            startingDay: 1
    };
 $scope.opened = true;
 $scope.minDate=  new Date();
  var maxDate = new Date();
  maxDate.setFullYear (maxDate.getFullYear() + 2);//enable for 2 future years.. 
 $scope.maxDate= maxDate;

您的 HTML 将如下所示

<input type="text" class="form-control selection-box"
                                id="datepicker" 
                                datepicker-popup="{{dateFormat}}"
                                ng-model="selectedDate" is-open="opened"
                                ng-class="{'date-changed':colorChange[$parent.$parent.$index +'-'+ $parent.$index]}"
                                min-date="minDate" max-date="maxDate"
                                datepicker-options="dateOptions" readonly="readonly"
                                ng-change="changeDate()"
                                close-text="Close" ng-required="true" /> 

要回答 OP 的问题，您可以进行以下代码更改。

    From <select-date ng-model="fromDate" min-date="fromMinDate"></select-date>
       To <select-date ng-model="toDate" min-date="toMinDate"></select-date>

<span class="select-date">
  <input type="text" readonly="readonly" datepicker-popup="dd.MM.yyyy"     datepicker-options="{startingDay: 1, showWeeks: true}" ng-model="date"   show-button-bar="false" current-text="Heute" close-text="Schließen" is-  open="dateStatus.opened" min-date="setMinDate" class="form-control" required="required" ng-click="openDatePopup()">
</span>

以下是您的指令中的更改。

.directive('selectDate', ['moment', function(moment) {
    return {
        restrict: 'E',
        require:'^ngModel',
        templateUrl: 'views/selectDate.html',
        replace: true,
        scope: {
            ngModel: '='
            minDate: '@'//which date input we are changing...
        },
        link: function($scope, element, attrs) {
            $scope.date = $scope.ngModel;
            $scope.selectedDateType = $scope.minDate=='fromMinDate'?'From':'To';
            $scope.dateOptions = {
                startingDay: 1,
                showWeeks: false
            };
            $scope.dateStatus = {
                opened: false
            };
            $scope.openDatePopup = function() {
                $scope.dateStatus.opened = true;
                $scope.setMinDate = new Date();//for From date..
            };
            $scope.$watch('date', function (newValue, oldValue) {
                if (newValue !== oldValue) {
                    var date = moment(newValue);
                    $scope.ngModel = date.format('YYYY-MM-DD');
                   if($scope.selectedDateType=='From'){
                    $scope.setMinDate = $scope.fromDate;//for To date
                    }
                }
            });
        }
    };