AngularJS - Date range picker issue - html

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();"/>

Answer 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