I want maxDate
to be selectable as today at most, (old days should be clickable, but not tomorrow)
the day between i select as maxDay
and minDay
should be 365 days at most, it cant be selected more than 365 days, but can be selected less,
$scope.dateOptions = {
formatYear: "yy",
minDate: getMinDate(),
maxDate: new Date(),
startingDay: 1
};
function getMinDate() {
var oldDay = new Date();
oldDay.setDate(oldDay.getDate() - 365);
return oldDay;
};
This is not enough, i only can set days between today and 365 days back,
but i want it to be selectable if i choose maxDate
as 1/03/2021, then minDate
should be selectable by 365 days ago, like 1/04/2020 ..
And i want to do a validation like minDate
cant be later than maxDate
.
here is the related part of html,
<div class="row">
<div class="col-sm-3">
<label for="sel1">{{ 'LISTLOG_SEARCHSTARTDATE' | translate }}:
<!-- <a class="ion-information-circled" tooltip-animation="true" tooltip-placement="top" -->
<!-- uib-tooltip="{{'TOOLTIP_DEVICELOG_SEARCHDATE' | translate}}"></a> -->
</label>
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="logVariables.startDate"
ng-change="formatDateModal()" ng-model-options="{timezone: 'UTC'}" is-open="popup1.opened"
datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" />
<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-sm-3">
<label for="sel1">{{ 'LISTLOG_SEARCHENDDATE' | translate }}:
<!-- <a class="ion-information-circled" tooltip-animation="true" tooltip-placement="top" -->
<!-- uib-tooltip="{{'TOOLTIP_DEVICELOG_SEARCHDATE' | translate}}"></a> -->
</label>
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="logVariables.endDate"
ng-change="formatDateModal()" ng-model-options="{timezone: 'UTC'}" is-open="popup2.opened"
datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" />
<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>
You need to pass references in your object. I changed the name of the mindate function to make it more explicit
function getMinDateFromEndDate(date) { //pass in the relative end date reference
var oldDay = new Date(date);
oldDay.setDate(oldDay.getDate() - 365);
return getUTCDate(oldDay);
};
let endDate = getUTCDate(new Date('2021-01-03')); // set the arbitrary end date
let startDate = getMinDateFromEndDate(endDate)
$scope.logVariables = {
startDate: startDate,
endDate: endDate
}
$scope.dateOptions = {
formatYear: "yyyy",
minDate: startDate,
maxDate: endDate,
startingDay: 1
};
Since you're using UTC time, I worked up this snippet showing a way to convert to UTC, how to set up your min and max dates using UTC
function getUTCDate(date) {
var now_utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
return new Date(now_utc);
}
angular.module('dateExample', ['ngSanitize', 'ui.bootstrap'])
.controller('ExampleController', ['$scope', function($scope) {
function getUTCDate(date) {
var now_utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),
date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
return new Date(now_utc);
}
function getMinDateFromEndDate(date) {
var oldDay = new Date(date);
oldDay.setDate(oldDay.getDate() - 365);
return getUTCDate(oldDay);
};
$scope.popup1 = {
opened: false
};
$scope.popup2 = {
opened: false
};
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
let endDate = getUTCDate(new Date('2021-01-03'));
let startDate = getMinDateFromEndDate(endDate)
$scope.logVariables = {
startDate: startDate,
endDate: endDate
}
$scope.format = 'dd-MM-yyyy';
$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.dateOptions = {
formatYear: "yyyy",
minDate: startDate,
maxDate: endDate,
startingDay: 1
};
$scope.formatDateModal = function() {
console.log($scope.logVariables)
}
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="dateExample">
<div ng-controller="ExampleController">
<div class="row">
<div class="col-sm-3 col-md-3">
<label for="sel1">Label 1</label>
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="logVariables.startDate" ng-change="formatDateModal()" ng-model-options="{timezone: 'UTC'}" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close"
alt-input-formats="altInputFormats" />
<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-sm-3 col-md-3">
<label for="sel1">Label 2</label>
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="logVariables.endDate" ng-change="formatDateModal()" ng-model-options="{timezone: 'UTC'}" is-open="popup2.opened" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats"
/>
<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>
</div>