I have a problem here. I want to use Angular Material datepicker in my modal form. I simply added it to my form like this

<md-datepicker ng-model="new.warranty" md-placeholder="Enter date"></md-datepicker>

And if I submitting form I got this:

Sun Apr 03 2016 00:00:00 GMT+0300 (EEST)

But I want to convert data in yyyy-MM-dd format before send, so I tried to convert date format in this way

data.warranty = $filter('date')(Date.parse(data.warranty), 'yyyy-MM-dd');

So my form rly send a required yyyy-MM-dd format, but I get an error every time, when I sumbitting form.

`The ng-model for md-datepicker must be a Date instance. Currently the model is a: string`

so, how can I prevent this error, without using moment.js, if it possible, please.

I have a problem here. I want to use Angular Material datepicker in my modal form. I simply added it to my form like this

<md-datepicker ng-model="new.warranty" md-placeholder="Enter date"></md-datepicker>

And if I submitting form I got this:

Sun Apr 03 2016 00:00:00 GMT+0300 (EEST)

But I want to convert data in yyyy-MM-dd format before send, so I tried to convert date format in this way

data.warranty = $filter('date')(Date.parse(data.warranty), 'yyyy-MM-dd');

So my form rly send a required yyyy-MM-dd format, but I get an error every time, when I sumbitting form.

`The ng-model for md-datepicker must be a Date instance. Currently the model is a: string`

so, how can I prevent this error, without using moment.js, if it possible, please.

• javascript
• angularjs
• date
• angular-material

• Isn't it better to keep your model as a Date, and then parsing it wherever you want to actually display it? – Haroen Viaene Commented Apr 6, 2016 at 8:46
• Actually, I am just learning, so I have no idea what you speaking about. Can you show an example? And I don`t need to display it, I should send it to server, and a server expecting for a yyyy-MM-dd format – Majesty Commented Apr 6, 2016 at 8:48
• I'm speculating here, but you can try setting ng-model to the old date that returned Sun Apr 03 2016 00:00:00 GMT+0300 (EEST) (to keep the date picker working), and then add a ng-value attribute with a parsed in yyyy-MM-dd value of that Date. – Haroen Viaene Commented Apr 6, 2016 at 8:59
• That's all good in theory, by doesn't work for me in practice. – Majesty Commented Apr 6, 2016 at 9:25

2 Answers 2

When you use $filter('date') on your data.warranty, you transform it from a Date object to a String, hence the error.

Option 1

The fastest way to solve this is to have a duplicate of your date value as a string:

<md-datepicker ng-model="new.warrantyDate" md-placeholder="Enter date"></md-datepicker>

Whenever you submit the form, before making a request, transform the date in the format you need, but don't overwrite the existing date:

data.warranty = $filter('date')(Date.parse(data.warrantyDate), 'yyyy-MM-dd');

Thus your warrantyDate value will remain a Date object and will continue working. In case you modify the date in your response, do not forget to synchronize the warrantyDate with the modified date.

Option 2

Another option you could try is create a directive that will have different $modelValue and $viewValue for your data.warranty variable. For more information on how you can achieve this, consult the documentation on ngModelController.

The second option requires a deeper understanding of how angular works, so if you're at the very beginning of your angularjs path, you might go well with the first option.

i've solved this issue by overriding md-datepicke ,Here is code

 .directive('mdDatepicker', function ($parse) {

    return {
        require: 'ngModel',
        link: function (scope, elem, attr, ngModel) {
            $parse(attr.ngModel).assign(scope, new Date(_.get(scope, attr.ngModel)));
        }
    }
})