CODEWITHSUNDEEP
javascriptangular-ui-bootstrap
fidev
fidev

Reputation: 1252

Multiple Datepickers / Min Date Bootstrap Angular Datepicker

I'm using Bootstrap Angular Datepicker

I have two issues going one here. I have two date-pickers. A Start date-picker and an End date-picker.

My first issue is that when clicking on the Start Date picker both date-picker calendars appear.

I've tried creating a separate function for each ng-clickon the date-picker, open() for the start date and open2() for the end date so each one will show it's own calendar, however both keep popping up when clicking on the start date picker.

I have disabled the end date-picker until the first date is chosen via ng-disabled="!dt".

My second issue which I've tried to tackle is, on selecting the start date, it then automatically sets the minimum date available on the end date date-picker to the start date + 1 day. So you can't select a date on the end date-picker lower than the start date or the same day as the start date.

I've tried min-date="dt + 1" but this does not increment the day - it just sets it to the same day as the start date....

Any help much appreciated. Thanks

I have an edited Plunker but the code is also below.

HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="DatepickerDemoCtrl">


<h4>Start Date</h4>
<div class="row">
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>
<h4>End Date</h4>
<div class="row">
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" ng-disabled="!dt" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened" min-date="dt + 1" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" ng-disabled="!dt" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>

<pre>Start date is: <em>{{dt | date:'fullDate' }}</em></pre>
<pre>End date is: <em>{{dt2 | date:'fullDate' }}</em></pre>

<hr />
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
<button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
</body>
</html>

JS

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {

$scope.clear = function () {
    $scope.dt = null;
    $scope.dt2 = null;
};

$scope.toggleMin = function() {
   $scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();

$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
};

$scope.open2 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
};

$scope.dateOptions = {
   formatYear: 'yy',
   startingDay: 1
};

$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
   $scope.format = $scope.formats[0];
});

Upvotes: 1

Views: 5036

Answers (4)

PriscillaZ
PriscillaZ

Reputation: 49

I made it into a dynamic datepicker so you do not have to create multiple $scope.open() for each date-picker element.

Here is what I changed in the HTML

for dt : is-open="dtOpened" ng-click="open($event,'dtOpened')"

for dt2 : is-open="dt2Opened" ng-click="open($event,'dt2Opened')"

Then add a parameter to the $scope.Open($event) function and it becomes $scope.Open($event,which)

here is the whole code

<h4>Start Date</h4>
<div class="row">
<div class="col-md-6">
    <p class="input-group">
      <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="**dtOpened**" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event,**'dtOpened'**)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </p>
</div>
</div>
<h4>End Date</h4>
<div class="row">
<div class="col-md-6">
    <p class="input-group">
      <input type="text" ng-disabled="!dt" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="**dt2Opened**" min-date="dt + 1" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button type="button" ng-disabled="!dt" class="btn btn-default" ng-click="open($event**,'dt2Opened'**)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </p>
</div>


$scope.open = function($event,which) {
$event.preventDefault();
$event.stopPropagation();
$scope[which]= true;
};

Upvotes: 0

MeTe-30
MeTe-30

Reputation: 2542

For your range picking issue (set min date for second datePicker):
I represent ADMdtp module. It's pure AngularJs dateTimePicker with lots of greate options:

  • completely synced with ngModel, so no need to destroy or manulay update dateTimePicker.
  • advance range picker; make as many dateTimePicker as you want related together, and again no need to destroy or manualy update each dateTimePicker.
  • disabing pattern; so easily you can disable any day(s) in week or month, like all weekends.
  • transition on changing days. (of curse you can disable it in options)
  • get full date details like date in UNIX format, Date format and year, month, day, hour and minute separately and ... by full-data attribute.
  • ...

<adm-dtp ng-model="date1" full-data="date1_full"></adm-dtp>
<adm-dtp ng-model="date2" mindate="{{date1_full.unix}}"></adm-dtp>

Upvotes: 0

P.JAYASRI
P.JAYASRI

Reputation: 358

Two date pickers Open at a time in angularjs

in your code you have user same method to open date picker popup live code is here:http://jsfiddle.net/RLQhh/974/

$scope.open1 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened1 = true;
    $scope.opened2 = false;
};

$scope.open2 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.opened1 = false;
    $scope.opened2 = true;
};

Upvotes: 1

P.JAYASRI
P.JAYASRI

Reputation: 358

hi this change i made for min date

live code http://jsfiddle.net/RLQhh/1003/

 /****new min date code */
     $scope.dateChange = function(event){          
       var d= $scope.minDate1.setDate( $scope.dt.getDate() + 1);
       $scope.minDate1=new Date(d);
    }
     /****new min date code end */

  $scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
       $scope.minDate1 = new Date();
  };

html code 

<h4>Start Date</h4>
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened1" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" ng-change="dateChange($event)"close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open1($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>
    <h4>End Date</h4>
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" ng-disabled="!dt" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened2" min-date="minDate1" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
              <span class="input-group-btn">
                <button type="button" ng-disabled="!dt" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>

Upvotes: 1

Related Questions