How can I set endDate not to be earlier than startDate in calendar?

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>

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.

Advertisement

Answer