Range Picker Input Issue: Start date month changing when we change month for selecting End Date

[tvaruntej]

When i use sm-range-picker-input, in the custom range option, when i select a date for start date then it gets populated in the top left side of the popup and navigates to end date popup, then for end date when I go ahead and change to next month or any month different from the month selected in start date for selecting end date, the start date month value is automatically changing to the month navigated to for selecting end date. Is this a known issue? This is not how a date range picker is supposed to work. This can be replicated in the library's plunker link but i don't see this issue in demo link of library.

[elgreatly]

i have the same issue

[mominsamir]

I think in custom date range you must have used same moment object. this will create problem like this. please check code, if issue still there then post ur code on how u use it.

[tvaruntej]

Below is my code Samir:

///////HTML DATE INPUT/////////

{{item.Id}} {{$chip.Id}}

Search

////////Controller js file//////////// $scope.loadRangeStartDate = new Date(); $scope.loadRangeEndDate = new Date(); $scope.searchInput = ""; $scope.loadDate = "";

function populateSearchCritOpts(){ LoadingService.showLoadingScreen("Fetching Loads"); correlationIDService.refresh("Fetching loads"); console.log($scope.loadDate); vm.selectedLoadList = []; _.each(vm.selectedLoadIds,function(load){ var loadId = load.Id; vm.selectedLoadList.push(loadId); }); vm.startDate = moment($scope.loadRangeStartDate).format("YYYY-MM-DD"); vm.endDate = moment($scope.loadRangeEndDate).format("YYYY-MM-DD");

        if(vm.startDate === "Invalid date"){
            if(vm.endDate === "Invalid date"){
                if(vm.selectedLoadList.length === 0){
                    vm.startDate = moment(new Date()).format("YYYY-MM-DD");
                    vm.endDate =moment(new Date()).format("YYYY-MM-DD");
                }
                else{
                    vm.startDate = "";
                    vm.endDate = "";
                }
            }
            else{
                vm.startDate = vm.endDate;
            }
        }
        else if (vm.endDate === "Invalid date"){
            vm.endDate = vm.startDate;
        }

        var loadSearchObject = {
            "startDate" : vm.startDate,
            "endDate" : vm.endDate,
            "loads" : vm.selectedLoadList
        };

        loadService.getFilteredLoadList(loadSearchObject).then(

function success(loadSearchObject) {}, function failure(loadSearchObject) {});

[tvaruntej]

Below is my code Samir:

///////HTML DATE INPUT/////////

{{item.Id}} {{$chip.Id}}

Search

////////Controller js file//////////// $scope.loadRangeStartDate = new Date(); $scope.loadRangeEndDate = new Date(); $scope.searchInput = ""; $scope.loadDate = "";

function populateSearchCritOpts(){ LoadingService.showLoadingScreen("Fetching Loads"); correlationIDService.refresh("Fetching loads"); console.log($scope.loadDate); vm.selectedLoadList = []; _.each(vm.selectedLoadIds,function(load){ var loadId = load.Id; vm.selectedLoadList.push(loadId); }); vm.startDate = moment($scope.loadRangeStartDate).format("YYYY-MM-DD"); vm.endDate = moment($scope.loadRangeEndDate).format("YYYY-MM-DD");

        if(vm.startDate === "Invalid date"){
            if(vm.endDate === "Invalid date"){
                if(vm.selectedLoadList.length === 0){
                    vm.startDate = moment(new Date()).format("YYYY-MM-DD");
                    vm.endDate =moment(new Date()).format("YYYY-MM-DD");
                }
                else{
                    vm.startDate = "";
                    vm.endDate = "";
                }
            }
            else{
                vm.startDate = vm.endDate;
            }
        }
        else if (vm.endDate === "Invalid date"){
            vm.endDate = vm.startDate;
        }

        var loadSearchObject = {
            "startDate" : vm.startDate,
            "endDate" : vm.endDate,
            "loads" : vm.selectedLoadList
        };

        loadService.getFilteredLoadList(loadSearchObject).then(

function success(loadSearchObject) {}, function failure(loadSearchObject) {});

[tvaruntej]

PFA HTML and Controller files. htmlFile.txt controllerFile.txt

[tvaruntej]

Samir, did you have any chance to take a look at this issue, its happening in one of the demo pages of this library as well.