1

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];
});
Improve this question
0

4 Answers 4

Reset to default
1

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;
};
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Ah I see - thanks. that works nicely now. However I still haven't worked out how to increment the start date. My second issue above - any ideas?
hi @fidev you can use min-date attribute
var d = date; d.setDate(d.getDate() + no_days); dt= d;
if answer helps please upvote i want to add comment that needs 50
I'm already using min-date="dt + 1" - how does var d = date; d.setDate(d.getDate() + no_days); dt= d; work. Where does no_days come from?
|
1

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>
Improve this answer

2 Comments

@fidev .,when you use Dynamic min-date attribute value be carefully . it may causing validation error when you submit form if you hot handled it correctly .
I ended up using $scope.dateChange = function(event){ var d = new Date(); $scope.minDate1 = d.setDate($scope.dt.getDate() + 1); }; as couldn't get the above code to work as you did. It's essentially the same as your code. Thanks :)
0

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>

Improve this answer

Comments

0

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;
};
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.