How to set datepicker minDate?

Question

I have a directive date-picker.js and view as selectDate.html. I want to set minDate for the date picker when the value of another datepicker changes. How to achieve that?

.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>

I am using it like below:

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

I want to set minDate of toDate to fromDate value.

ngCoder ngCoder · Accepted Answer · 2016-09-12T11:41:38

Well you can user ui-bootstrap directive which is lot easier,below is the code

 $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;

Your HTML will look like this

<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" />

To answer OP's question you can have following code changes.

    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>

Below are changes in your directive.

.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
                    }
                }
            });
        }
    };

How to set datepicker minDate?

1 Answers