disable the dates based on the date selected in the first datepicker field

Question

I am working on angularjs application. User can select date from the From Date picker and To Date picker fields. I want to disable the date selection in the To Date picker based on the date user selected in From Date picker field. eg) If user has selected 02/23/2017 in From Date picker field, all the dates before 02/23/2017 should be disabled in To Date picker.

Demo here

I tried assigning model1 to the min-date attribute of To Date as shown below but that was not working. And even tried to display To-Date field date picker calendar pop up as soon as the user has selected the date in the From-Date field but ended up with javascript errors. Any suggestions would be helpful.

 <input type="text" uib-datepicker-popup="{{dateformat}}" min-date={{model1}} ng-model="model2" is-open="showdp" />

Below is the code:

     <div style="float:left" ng-controller="fromDateCtrl">
        From Date:
        <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="model1" is-open="showdp" />
        <span>
        <button type="button" class="btn btn-default" ng-click="showcalendar($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
    </div>
    <div style="float:left" ng-controller="toDateCtrl">
        To Date:
        <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="model2" is-open="showdp" />
        <span>
        <button type="button" class="btn btn-default" ng-click="showcalendar($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
    </div>

js code:

   angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
        angular.module('plunker').controller('fromDateCtrl', function ($scope) {
            $scope.today = function () {
                $scope.model1 = new Date();
            };
            $scope.mindate = new Date();
            $scope.dateformat="MM/dd/yyyy";
            $scope.today();
            $scope.showcalendar = function ($event) {
                $scope.showdp = true;
            };
            $scope.showdp = false;
        });

        angular.module('plunker').controller('toDateCtrl', function ($scope) {
            $scope.today = function () {
                $scope.model2 = new Date();
            };
            $scope.mindate = new Date();
            $scope.dateformat="MM/dd/yyyy";
            $scope.today();
            $scope.showcalendar = function ($event) {
                $scope.showdp = true;
            };
            $scope.showdp = false;
        });

Yaser · Accepted Answer · 2017-02-07T21:40:04.323

First of all you are using two different controllers for each input, that means you won't have access to the model1 in the second controller.

Then comes the fact that the min date should be of type date.

So:

angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
        angular.module('plunker').controller('dateCtrl', function ($scope) {
            $scope.model1 = new Date();
            $scope.model2 = new Date(); 
            $scope.mindate = new Date();
            $scope.dateformat="MM/dd/yyyy";            
        });

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<div ng-app="plunker">
  <div ng-controller="dateCtrl">
    <div style="float:left" >
    From Date:
    <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="model1" is-open="showFrom" ng-change="showTo = !showTo" />
    <span>
            <button type="button" class="btn btn-default" ng-click="showFrom = !showFrom">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
  </div>
  <div style="float:left">
    To Date:
    <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="model1" ng-model="model2" is-open="showTo" />
    <span>
            <button type="button" class="btn btn-default" ng-click="showTo = !showTo">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
  </div>
  </div>
</div>

UPDATE:

Just use ng-change to open the second one.

it worked, thanks. I was even looking to open the To-Date calendar popup as soon as the user selects date from "From Date" field. I was facing javascript errors while doing that. — joan, Feb 07 '17 at 21:22
can u help if possible as asked in my original post to open a To-Date calendar popup as soon as the user selects date from "From Date" field. I was facing javascript errors while doing that. — joan, Feb 07 '17 at 21:32

disable the dates based on the date selected in the first datepicker field

1 Answers1