CODEWITHSUNDEEP
angularjsangularjs-directiveuidatepicker
Jaffer Sathick
Jaffer Sathick

Reputation: 546

ui-date update options dynamically

I am using Angularjs ui-date to bind Jquery datepicker. I have two date pickers in my page named as start and end.

I would like to change the end date's starting value based on the start date. Is there anyway to change options of datepicker dynamically.

For EX:

StartDate: 7th Sep,2013 End Date should have the min date as 8th Sep,2013.

Upvotes: 0

Views: 1699

Answers (1)

othierry42
othierry42

Reputation: 146

I've just faced the same issue, this is what I have done:

Let's say you have the following html

<div ng-controller="MyDateCtrl">
    <input ui-date="fromDatePickerOptions" type="text" ng-model="date.from" />
    <input ui-date="toDatePickerOptions" type="text" ng-model="date.to" />
</div>

Then in your JS you would have something like:

function MyDateCtrl($scope) {
    $scope.date = {
        from: new Date(),
        to:   new Date()
    };

    $scope.fromDatePickerOptions = {
      dateFormat: 'M dd, yy'
    };

    $scope.toDatePickerOptions = {
      dateFormat: 'M dd, yy'
    };

    $scope.$watch('date', function() {
      // You could offset dates however you like according to your needs.
      // Here, start cannot be after end and of course end cannot be before start.
      $scope.fromDatePickerOptions.maxDate = $scope.date.to,
      $scope.toDatePickerOptions.minDate   = $scope.date.from;
    }, true);
}

The true second argument of $watch() just compares object for equality rather than for reference according to the documentation.)

The changes on $scope.fromDatePickerOptions and $scope.toDatePickerOptions will make ui-date directives to reload their options.

That's it! This worked fine for me.

Upvotes: 3

Related Questions