uib-datepicker dynamic min-date angularjs

Question

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.

jonscyriac · Accepted Answer · 2016-01-26 07:35:07Z

4

<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()

answered Jan 26, 2016 at 7:35

jonscyriac

746 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vict Over a year ago

I will try it in a few days, I will let you know. Thanks you!

vict Over a year ago

Yeah! it works perfectly I think, I will use it for my next project, thx you!

H Varma Over a year ago

@jon what is the use of having formatYear: 'yy', in dateoptions?

jonscyriac Over a year ago

@HVarma docs.angularjs.org/api/ng/filter/date 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)

Tiberiu Oprea · Accepted Answer · 2017-03-07 20:49:10Z

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

Lealem Admassu · Accepted Answer · 2015-12-17 12:35:24Z

0

you need to update your ui bootstrap version to atleast release 0.14.0 here

is the migration info from old version to new.

answered Dec 17, 2015 at 12:35

Lealem Admassu

4584 silver badges10 bronze badges

1 Comment

vict Over a year ago

I have the version 0.14.3 of bootstrap-ui and the migration is done with uib-datepicker-popup i think

vict · Accepted Answer · 2016-01-13 11:31:49Z

uib-datepicker has a big problem when you want to update the model from another date, I changed my mind and tried something different that works for angular too (using jquery-ui datepicker).

this are the 2 directives that i used and worked well:

.directive('startDateCalendar', [
function() {
   return function(scope, element) {

scope.$watch('filterDate.endDate', (function(newValue) {
  element.datepicker('option', 'maxDate', newValue);
}), true);

  return element.datepicker({
    dateFormat: 'dd-mm-yy',
    numberOfMonths: 1,
    maxDate: scope.filterDate.endDate,
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    onSelect: function(date) {
      scope.filterDate.initDate = date;
      var dateHelper = date.split('-');
      scope.adSearch.initDate = new Date(dateHelper[2]+'-'+dateHelper[1]+'-'+dateHelper[0]);
      scope.dateSearch();
      scope.$apply();
    }
  });
};

}])

.directive('endDateCalendar', [
function() {
return function(scope, element) {
scope.$watch('filterDate.initDate', (function(newValue) {
  element.datepicker('option', 'minDate', newValue);
}), true);

  return element.datepicker({
    dateFormat: 'dd-mm-yy',
    numberOfMonths: 1,
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    minDate: scope.filterDate.initDate,
    onSelect: function(date) {
      scope.filterDate.endDate = date;
      var dateHelper = date.split('-');
      scope.adSearch.endDate = new Date(dateHelper[2]+'-'+dateHelper[1]+'-'+dateHelper[0]);
      scope.dateSearch();
      return scope.$apply();
    }
  });
};

}])

this is the html:

<input type="text" start-date-calendar="" ng-model="filterDate.initDate" placeholder="Start Date" class="form-control" readonly="readonly" />

<input type="text" end-date-calendar="" ng-model="filterDate.endDate" placeholder="End Date" class="form-control" readonly="readonly"/>

Gir32 · Accepted Answer · 2017-10-10 06:01:39Z

I was having a similar issues setting the minDate in version 2.5.0.

I tried all the answers here and none of them worked for me, I was able to get the minDate to update dynamically just by casting it to a new Date().

HTML:

<div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label id="lbl"></label>
                <p class="input-group" style="max-width:280px;">
                    <input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="DepartureDate" is-open="departureDate" datepicker-options="departureDateOptions" close-text="Close" alt-input-formats="altInputFormats" readonly/>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="departureDate = !departureDate"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label id="lbl"></label>
                <p class="input-group" style="max-width:280px;">
                    <input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="ArrivalDate" is-open="arrivalDate" datepicker-options="arrivalDateOptions" close-text="Close" alt-input-formats="altInputFormats" readonly/>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="ArrivalDateClick()"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>
        </div>
    </div>

Code:

 $scope.departureDateOptions = {
        minDate: new Date()
    };

    $scope.arrivalDateOptions = {
        minDate: null
    };

    $scope.ArrivalDateClick = function () {
        $scope.ArrivalDate = $scope.DepartureDate;
        $scope.arrivalDateOptions.minDate = new Date($scope.DepartureDate);
        $scope.arrivalDate = !$scope.arrivalDate;
    };

    $scope.ArrivalDateClick();

Collectives™ on Stack Overflow

uib-datepicker dynamic min-date angularjs

5 Answers 5

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related