AngularJS - Date range picker issue

Question

I'm trying to get my date range feature to be working correctly. Currently, when I try to select a date it is able to pick the date however when I click apply, it becomes an invalid date.

My code is the following:

AngularJS:

     $scope.SimplePickerChange = function () {
        $scope.date = {
            startDate: $filter("date")(new Date(), 'yyyy-MM-dd'),
            endDate: $filter("date")(new Date(), 'yyyy-MM-dd'),
        };
    };

HTML:

<input date-range-picker
                                   id="date"
                                   name="date"
                                   class="form-control date-picker"
                                   type="text"
                                   ng-model="date"
                                   ng-change="SimplePickerChange();"/>

Shantanu · Accepted Answer · 2018-08-17 17:44:11Z

1

Why are you changing model value by using filter? If you want to show start & end date in input field in yyyy-MM-dd format then just pass it to configuration options. If you're using angular-daterangepicker then you can have code like below:

<input date-range-picker class="form-control date-picker" type="text" ng-model="date"
 options="options" />

Where options is:

$scope.options = {
      applyClass: 'btn-green',
      locale: {
        applyLabel: "Apply",
        fromLabel: "From",
        format: "YYYY-MM-DD", //will give you 2017-01-06
        //format: "D-MMM-YY", //will give you 6-Jan-17
        //format: "D-MMMM-YY", //will give you 6-January-17
        toLabel: "To",
        cancelLabel: 'Cancel',
        customRangeLabel: 'Custom range'
      }
    }

So, just don't use ng-change function to update model value of the daterangepicker input field. If you really want to do that to post value to some web api then do it separately on some other variable, & not on model var of daterangepicker.

If you really want to set date variable value on load (initially) then start date & end date keep as date/moment objects & not the string (which date filter returns). So, it can be:

$scope.date = {
    startDate: new Date(),
    endDate: new Date()
  };

Official Docs

Update: Plunker Example

edited Aug 17, 2018 at 17:44

answered Aug 17, 2018 at 16:40

Shantanu

3,5332 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

User0110101 Over a year ago

Thanks, but I tried it however my output was set as invalid data.

Shantanu Over a year ago

@FriedSodaWarrior have you removed ng-change from that input field? And also check the plunker example I've created

User0110101 Over a year ago

I have, which is what I don't understand. I have followed your code to the letter but it keeps referring to invalid data.

Collectives™ on Stack Overflow

AngularJS - Date range picker issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related