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,
JavaScript
x
46
46
1
$scope.startDateOptions = {
2
formatYear: "yy",
3
minDate: getMinDate(),
4
maxDate: $scope.logVariables.endDate || new Date(),
5
startingDay: 1
6
};
7
function getMinDate(){
8
var newMinDate = new Date();
9
if ($scope.logVariables.endDate !== undefined){
10
newMinDate = new Date($scope.logVariables.endDate.getTime());
11
}
12
newMinDate.setDate(newMinDate.getDate() - 365);
13
14
return newMinDate;
15
}
16
17
$scope.endDateOptions = {
18
formatYear: "yy",
19
maxDate: new Date(),
20
startingDay: 1
21
};
22
$scope.checkEndDateModal = function(){
23
if ($scope.logVariables.endDate != undefined && $scope.logVariables.startDate != undefined ){
24
var diffTime = $scope.logVariables.endDate.getTime() - $scope.logVariables.startDate.getTime();
25
if (diffTime / (1000 * 60 * 60 * 24) > 365){
26
$scope.logVariables.startDate = getMinDate();
27
}
28
29
//TODO: Check for start date ıs mınımum end dat?e
30
// set start date to end date
31
}
32
}
33
$scope.open1 = function () {
34
$scope.startDateOptions = {
35
formatYear: "yy",
36
minDate: getMinDate(),
37
maxDate: $scope.logVariables.endDate || new Date(),
38
startingDay: 1
39
};
40
$scope.popup1.opened = true;
41
};
42
43
$scope.open2 = function () {
44
$scope.popup2.opened = true;
45
};
46
here is the html part,
JavaScript
1
34
34
1
<div class="row">
2
<div class="col-sm-3">
3
<label for="sel1">{{ 'LISTLOG_SEARCHSTARTDATE' | translate }}:
4
<!-- <a class="ion-information-circled" tooltip-animation="true" tooltip-placement="top" -->
5
<!-- uib-tooltip="{{'TOOLTIP_DEVICELOG_SEARCHDATE' | translate}}"></a> -->
6
</label>
7
<p class="input-group">
8
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="logVariables.startDate"
9
ng-change="formatDateModal()" ng-model-options="{timezone: 'UTC'}" is-open="popup1.opened"
10
datepicker-options="startDateOptions" close-text="Close" alt-input-formats="altInputFormats" />
11
<span class="input-group-btn">
12
<button type="button" class="btn btn-default" ng-click="open1()"><i
13
class="glyphicon glyphicon-calendar"></i></button>
14
</span>
15
</p>
16
</div>
17
<div class="col-sm-3">
18
<label for="sel1">{{ 'LISTLOG_SEARCHENDDATE' | translate }}:
19
<!-- <a class="ion-information-circled" tooltip-animation="true" tooltip-placement="top" -->
20
<!-- uib-tooltip="{{'TOOLTIP_DEVICELOG_SEARCHDATE' | translate}}"></a> -->
21
</label>
22
<p class="input-group">
23
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="logVariables.endDate"
24
ng-change="checkEndDateModal()" ng-model-options="{timezone: 'UTC'}" is-open="popup2.opened"
25
datepicker-options="endDateOptions" close-text="Close" alt-input-formats="altInputFormats" />
26
<span class="input-group-btn">
27
<button type="button" class="btn btn-default" ng-click="open2()"><i
28
class="glyphicon glyphicon-calendar"></i></button>
29
</span>
30
</p>
31
</div>
32
33
</div>
34
Advertisement
Answer
Okay, finally I solved it, I needed to set minDate for popup2 calendar
JavaScript
1
11
11
1
$scope.open2 = function () {
2
$scope.endDateOptions = {
3
formatYear: "yy",
4
startingDay: 1,
5
minDate: ($scope.logVariables.startDate>$scope.logVariables.endDate) ? $scope.logVariables.endDate:$scope.logVariables.startDate,
6
maxDate: new Date()
7
};
8
9
$scope.popup2.opened = true;
10
};
11
this works.