I have a calendar. It works perfectly.
Between endDate and startDate can be 365 days maximum, that works.
But if i choose startDate before endDate, I am able to select earlier date, but i shouldnt be able to do that… I just couldnt do it, can you help?
Here is the related code of it,
$scope.startDateOptions = {
formatYear: "yy",
minDate: getMinDate(),
maxDate: $scope.logVariables.endDate || new Date(),
startingDay: 1
};
function getMinDate(){
var newMinDate = new Date();
if ($scope.logVariables.endDate !== undefined){
newMinDate = new Date($scope.logVariables.endDate.getTime());
}
newMinDate.setDate(newMinDate.getDate() - 365);
return newMinDate;
}
$scope.endDateOptions = {
formatYear: "yy",
maxDate: new Date(),
startingDay: 1
};
$scope.checkEndDateModal = function(){
if ($scope.logVariables.endDate != undefined && $scope.logVariables.startDate != undefined ){
var diffTime = $scope.logVariables.endDate.getTime() - $scope.logVariables.startDate.getTime();
if (diffTime / (1000 * 60 * 60 * 24) > 365){
$scope.logVariables.startDate = getMinDate();
}
//TODO: Check for start date ıs mınımum end dat?e
// set start date to end date
}
}
$scope.open1 = function () {
$scope.startDateOptions = {
formatYear: "yy",
minDate: getMinDate(),
maxDate: $scope.logVariables.endDate || new Date(),
startingDay: 1
};
$scope.popup1.opened = true;
};
$scope.open2 = function () {
$scope.popup2.opened = true;
};
here is the html part,
<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="startDateOptions" 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="checkEndDateModal()" ng-model-options="{timezone: 'UTC'}" is-open="popup2.opened"
datepicker-options="endDateOptions" 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>
Advertisement
Answer
Okay, finally I solved it, I needed to set minDate for popup2 calendar
$scope.open2 = function () {
$scope.endDateOptions = {
formatYear: "yy",
startingDay: 1,
minDate: ($scope.logVariables.startDate>$scope.logVariables.endDate) ? $scope.logVariables.endDate:$scope.logVariables.startDate,
maxDate: new Date()
};
$scope.popup2.opened = true;
};
this works.