angularjs ui-bootstrap 2 datepickers is error - angularjs

Question

With uibootstrap's datepicker,I have a single page with two controls, one is starttime and one is endtime.
I want the following; when I set starttime ,the endtime's min-date is start time. But when I click the endtime I would like the fielded set to "" the.first time.
<p class="input-group">
<input class="form-control" datepicker-popup ng-model="view.starttime" is-open="dateSet.opened.startTime" min-date="'2015-05-02'" max-date="'2015-06-22'" datepicker-options="dateSet.dateOptions" date-disabled="dateSet.disabled(date, mode)" ng-required="true" show-weeks="flase" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="dateSet.openFn($event,'startTime')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group">
<input class="form-control" datepicker-popup ng-model="view.endtime" is-open="dateSet.opened.endTime" min-date="view.starttime" max-date="'2015-06-22'" datepicker-options="dateSet.dateOptions" date-disabled="dateSet.dateSet.disabled(date, mode)" ng-required="true" show-weeks="flase"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="dateSet.openFn($event,'endTime')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>

Answer 1

This works for me (forked from the bootstrap demo)
$scope.updateEndDate = true;
$scope.$watch('startDate', function(val) {
if($scope.updateEndDate) $scope.endDate = val;
});
$scope.click = function() {
if ($scope.updateEndDate)
{
$scope.updateEndDate = false;
$scope.endDate = "";
}
};
HTML
{{updateEndDate}}
<div class="col-md-6">
<p class="input-group">
<input name="startDate" type="text" class="form-control"
ng-model="startDate"
is-open="opened"
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 class="col-md-6">
<p class="input-group">
<input
ng-focus="click()"
name="endDate" type="text" class="form-control"
ng-model="endDate"
is-open="opened"
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>
Plunk http://plnkr.co/edit/HfihvKanQsERr4wFq9VE?p=preview

Answer 2

If I understood correctly, you want to set the min-date on the 'end date' picker to be the value of the 'start date' picker, BUT you want to initialize the end date picker to be null.
To do this, you need to initialize the end date to a null value. In your case, that would be $scope.view = {endtime: ''};. Since you didn't provide your controller code or a demo, I just created a simple demo below that matches what I think you want to accomplish.
var app = angular.module('daterange.demo', ['ui.bootstrap'])
.config(function(datepickerConfig, datepickerPopupConfig) {
datepickerConfig.formatYear = 'yy';
datepickerConfig.startingDay = 1;
datepickerConfig.showWeeks = false;
datepickerPopupConfig.datepickerPopup = "shortDate";
datepickerPopupConfig.closeText = "Close";
});
app.controller('DatepickerPopupDemoCtrl', function($scope) {
$scope.startdt = new Date();
$scope.enddt = '';
$scope.opened = {
startdt: false,
enddt: false
};
$scope.open = function($event, picker) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened[picker] = true;
};
$scope.$watch('startdt', function(newval) {
if ($scope.enddt !== '' && newval > $scope.enddt) {
$scope.enddt = newval;
}
});
$scope.setRangeClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(12, 0, 0, 0);
var startDay = new Date($scope.startdt).setHours(12, 0, 0, 0);
var endDay = new Date($scope.enddt).setHours(12, 0, 0, 0);
if (dayToCheck >= startDay && dayToCheck < endDay) {
return 'range';
}
}
return '';
};
});
#import "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css";
.btn-default[disabled], .btn-default.disabled {
background-color: #999;
}
.range>.btn-default {
background-color: #5bb75b;
}
.range button span {
color: #fff;
font-weight: bold;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<div ng-app="daterange.demo">
<div class="container" ng-controller="DatepickerPopupDemoCtrl">
<div class="row">
<div class="col-xs-12">
<h2>Popup Date Range Picker Demo</h2>
<pre>Date Range: {{startdt | date:'fullDate' }} - {{enddt | date:'fullDate' }}</pre>
</div>
<div class="col-xs-6">
<label for="startdate">Start Date</label>
<p class="input-group">
<input type="text" class="form-control" id="startdate" datepicker-popup ng-model="startdt" is-open="opened.startdt" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'startdt')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-xs-6">
<label for="enddate">End Date</label>
<p class="input-group">
<input type="text" class="form-control" id="enddate" datepicker-popup ng-model="enddt" is-open="opened.enddt" min-date="startdt" custom-class="setRangeClass(date, mode)" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'enddt')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</div>
In my demo above, I also added a $watch function that updates the end date picker when the start date picker changes. If the start date is greater than the end date, the end date is reset. Since you don't want the end date to change when the initial digest cycles are run on the page, you have to check for an empty value for the end date.
Additionally, I'm using the new custom-class attribute to show the date range on the end calendar. If you'd like to use this feature, make sure that you're using UI Bootstrap 0.13.0+.