AngularJS UI-Bootstrap, How to set minDate to 90 days ago and maxDate to today?
I have an app using AngularJS and UI-Bootstrap. I have a datePicker that requires date constraints. I am very new to angular and am wondering if anyone knows how I can do this. I'm looking for a way to set minDate to 90 days ago and maxDate to today.
var DatepickerDemoCtrl = function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.initDate = new Date('2016-15-20');
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
};
source to share
He had almost everything. You need to change the variable minDate
:
var date = new Date();
$scope.minDate = date.setDate((new Date()).getDate() - 90);
Then change the directive input
min
to min-date
and add max-date
for your variable dt
:
<input type="text" datepicker-popup="dd-MMMM-yyyy"
ng-model="dt1" is-open="opened1" min-date="minDate" max-date="dt"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
ng-required="true"/>
Here the forked plunker
source to share
min-date and max-date disable dates that are out of range in the date picker popup! but it doesn't check if the user has access to the input date directly in the input field! To check a given date if the user enters the date manually, I used ui.validate as one noob to another:
include dependency => ['ui.validate']
add "ui-validate" attribute to html
<input type="text" name="dob" show-button-bar="false"
class="tw-formControl" uib-datepicker-popup="MM/dd/yyyy"
ng-model="vm.profile.attributes.dob" ui-validate="{outOfBounds : 'vm.checkDateLimits($value)' }" is-open="vm.calanderToggle" placeholder="mm/dd/yyyy"
datepicker-options="dateOptions"/>
validations:
<div class="tw-customValidation" ng-messages="profileForm.dob.$error"
ng-if="profileForm.dob.$dirty || profileForm.$submitted">
<div ng-message="date">Please enter a valid date</div>
<div ng-message="outOfBounds"> Date selected is out of range. </div>
</div>
In the controller:
vm.checkDateLimits = function(selectedDate){
var currentDate = new Date(selectedDate);
var upperBounds = new Date();
var lowerBounds = new Date('01/01/1900'); //replace lower bound with your 90 days logic
return currentDate < upperBounds && currentDate > lowerBounds;
}
documentation for ui.validate can be found here here
source to share