uib-datepicker dynamic min-date angularjs

11,263

Solution 1

<html ng-app="ui.bootstrap.demo">
    <head>
    <link rel="stylesheet" href="bootstrap.css">
    <script src="angular.js"></script>
    <script src="angular-animate.js"></script>
    <script src="ui-bootstrap-tpls-1.1.1.js"></script>  
    <script>


    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
        angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
            $scope.minDate = new Date();

      $scope.open1 = function() {
         $scope.popup1.opened = true;
      };
      $scope.open2 = function() {
        $scope.minDate = $scope.dt;
        $scope.popup2.opened = true;
      };
      $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
      };

      $scope.format = 'dd-MMMM-yyyy';
      $scope.popup1 = {
        opened: false
      };
      $scope.popup2 = {
        opened: false
      };
    });
    </script>

    </head>
    <body>
    <div ng-controller="DatepickerDemoCtrl">
        <div class="row">
            <div class="col-md-6">
                <p class="input-group">
                  <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" show-button-bar="false" />
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
                  </span>
                </p>
            </div>

            <div class="col-md-6">
                <p class="input-group">
                  <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened"  show-button-bar="false" min-date="minDate" />
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
                  </span>
                </p>
            </div>
        </div>


        </div>
    </body>
    </html>

check this. the minDate var in $scope is set when open2() fn is called(i.e when the end date popup is popped. Use ng-Click()

Solution 2

This is an old question but some people might still find this useful for the newer versions. I am currently using angular-ui-bootstrap, version 2.2.0.

Arrive Date

<p class="input-group">
  <input type="text" class="form-control" uib-datepicker-popup="{{formatDate}}" datepicker-options="arriveDateOptions"
  ng-model="arriveDatePicked"
  is-open="arriveDateCalendarOpened"
  close-text="Close"/>
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="openArriveDateCalendar()">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
  </span>
</p>

Departure Date

<p class="input-group">
  <input type="text" class="form-control" uib-datepicker-popup="{{formatDate}}" datepicker-options="departureDateOptions"
  ng-model="departureDatePicked"
  is-open="departureDateCalendarOpened"
  close-text="Close"/>
    <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="openDepartureDateCalendar()">
        <i class="glyphicon glyphicon-calendar"></i>
      </button>
    </span>
</p>

My controller looks like this:

$scope.formatDate = 'dd-MMMM-yyyy';

$scope.arriveDateCalendarOpened = false;
$scope.departureDateCalendarOpened = false;

var today = new Date();
var minDepartureDate = new Date();
minDepartureDate.setDate(today.getDate() + 7);

$scope.arriveDatePicked = today;
$scope.departureDatePicked = minDepartureDate;


$scope.arriveDateOptions = {
  maxDate: new Date(2020, 5, 22),
  minDate: today
};


$scope.departureDateOptions = {
  maxDate: new Date(2020, 5, 22),
  minDate: today
};

I am not sure about the old versions of ui-boostrap and how they used to work, but in this version we can set the minimum and the maximum date in the datepicker-options attribute. In order to update the departureDate on the fly when the arriveDate changes, we need to force that when we open the departureDate calendar. (in my case, when the openDepartureDateCalendar() function is called)

$scope.openArriveDateCalendar = function () {
  $scope.arriveDateCalendarOpened = true;
};

$scope.openDepartureDateCalendar = function () {
  $scope.departureDateOptions.minDate = $scope.arriveDatePicked;
  $scope.departureDateCalendarOpened = true;
};
Share:
11,263
vict
Author by

vict

Updated on June 21, 2022

Comments

  • vict
    vict over 1 year

    I have a simple code, 2 dates with uib-datepicker-popup:

              <div>
               <p class="input-group">
                <input type="date" class="form-control" uib-datepicker-popup ng-model="adSearch.initDate" is-open="status1.opened" close-text="Close" />
                <span class="input-group-btn">
                 <button type="button" class="btn btn-default" ng-click="open($event, 'initDate')"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
               </p>
              </div>
              <div>
               <p class="input-group">
                <input type="date" class="form-control" uib-datepicker-popup ng-model="adSearch.endDate" is-open="status2.opened" close-text="Close" min-date="{{minEndDate}}" />
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="open($event, 'endDate')"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
               </p>
              </div>
    

    I need to dynamically set a minimum date in the second date from the first date. I have tried different ways and no one of them work

    $scope.open = function($event, date) {
      if(date === 'initDate'){
        $scope.status1.opened = true;
      }else if(date === 'endDate'){
        $scope.status2.opened = true;
      }
    }; 
    
    $scope.status1 = {
      opened: false
    }; 
    
    $scope.status2 = {
      opened: false
    };
    
    $scope.adSearch.initDate = null;
    $scope.minEndDate = $scope.adSearch.initDate;
    $scope.$watch('adSearch.initDate', function(v){
      console.log(v); 
      $scope.minEndDate = v;
    });
    

    This is what i have in my controller at this moment, it is something I have found that works for datepicker from ui-bootstrap, but does not work for uib-datepicker.

  • vict
    vict almost 8 years
    I have the version 0.14.3 of bootstrap-ui and the migration is done with uib-datepicker-popup i think
  • vict
    vict almost 8 years
    I will try it in a few days, I will let you know. Thanks you!
  • vict
    vict over 7 years
    Yeah! it works perfectly I think, I will use it for my next project, thx you!
  • H Varma
    H Varma almost 7 years
    @jon what is the use of having formatYear: 'yy', in dateoptions?
  • jonscyriac
    jonscyriac almost 7 years
    @HVarma docs.angularjs.org/api/ng/filter/date 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)