Is there a way to the calendar open up to a particular month WITHOUT actually setting the value for the datepicker.
As an example, I have two datepickers, one is a start date and one is an end date. As seen in the fiddle here: http://jsfiddle.net/leopardy/ao4nnd7d/
If the user selected a day for the Start calendar, like May 12, 2016 for example, then I would like the End calendar to open up to May when the user opens up the calendar. However, I do not want to force any particular date on them so I do not want the actual value of the calendar to be set. The user can choose to navigate to another month if they did not want May. It is just an initial starting point.
Is there a way to do this? Thanks.
HTML
<div ng-controller="DatepickerDemoCtrl">
<div class="row">
<label>Start</label>
<div class="col-md-6">
<div class="input-group">
<input
type="text"
id="popup"
class="form-control"
datepicker-popup=""
ng-model="date1"
is-open="opened"
min-date="minDate"
max-date="'2015-12-22'"
ng-click="open()"/>
<span class="input-group-btn">
<label for="popup" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></label>
</span>
</div>
</div>
</div>
<div class="row">
<label>End</label>
<div class="col-md-6">
<div class="input-group">
<input
type="text"
id="popup"
class="form-control"
datepicker-popup=""
ng-model="date2"
is-open="opened"
min-date="minDate"
max-date="'2015-12-22'"
ng-click="open()"/>
<span class="input-group-btn">
<label for="popup" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></label>
</span>
</div>
</div>
</div>
</div>
Javascript
angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DatepickerDemoCtrl', function ($scope, $filter) {
$scope.date1 = null;
$scope.date2 = null;
$scope.minDate = new Date();
$scope.open = function() {
$scope.opened = true;
};
})
.constant('datepickerPopupConfig', {
datepickerPopup: "MMM d, yyyy",
closeOnDateSelection: true,
appendToBody: false,
showButtonBar: false
})
.constant('datepickerConfig', {
formatDay: 'dd',
formatMonth: 'MMMM',
formatYear: 'yyyy',
formatDayHeader: 'EEE',
formatDayTitle: 'MMMM yyyy',
formatMonthTitle: 'yyyy',
datepickerMode: 'day',
minMode: 'day',
maxMode: 'year',
showWeeks: false,
startingDay: 0,
yearRange: 20,
minDate: null,
maxDate: null
})
