CODEWITHSUNDEEP
angularjsdatepickerangular-ui-bootstrap
vict
vict

Reputation: 212

uib-datepicker dynamic min-date angularjs

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.

Upvotes: 6

Views: 11793

Answers (5)

Gir32
Gir32

Reputation: 51

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

Upvotes: 0

Tiberiu Oprea
Tiberiu Oprea

Reputation: 153

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

Upvotes: 1

jonscyriac
jonscyriac

Reputation: 74

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

Upvotes: 4

vict
vict

Reputation: 212

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

Upvotes: 0

Lealem Admassu
Lealem Admassu

Reputation: 458

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

is the migration info from old version to new.

Upvotes: 0

Related Questions