Menu
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.
810
<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()
108
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;
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
