Components: md-datepicker min max error in reactive forms

Created on 22 Jul 2017 · 10Comments · Source: angular/components

Bug, feature request, or proposal:

When using min/max with md-datepicker in reactive forms, it throws below error in console:

errors.ts:42 ERROR TypeError: date.getFullYear is not a function
    at NativeDateAdapter.getYear (http://localhost:49547/node_modules/@angular/material/bundles/material.umd.js:4276:21)
    at NativeDateAdapter.DateAdapter.compareDate (http://localhost:49547/node_modules/@angular/material/bundles/material.umd.js:4189:46)
    at MdDatepickerInput._minValidator (http://localhost:49547/node_modules/@angular/material/bundles/material.umd.js:19994:36)
    at eval (http://localhost:49547/node_modules/@angular/forms/bundles/forms.umd.js:474:49)
    at Array.map (native)
    at _executeValidators (http://localhost:49547/node_modules/@angular/forms/bundles/forms.umd.js:474:23)
    at MdDatepickerInput.eval [as _validator] (http://localhost:49547/node_modules/@angular/forms/bundles/forms.umd.js:430:33)
    at MdDatepickerInput.validate (http://localhost:49547/node_modules/@angular/material/bundles/material.umd.js:20160:39)
    at eval (http://localhost:49547/node_modules/@angular/forms/bundles/forms.umd.js:722:52)
    at eval (http://localhost:49547/node_modules/@angular/forms/bundles/forms.umd.js:474:49)

Source

naveedahmed1

Most helpful comment

I believe to resolve the error, you must use a Date for lastDate too

EDIT: or empty string for no initial value

willshowell on 22 Jul 2017

👍2

All 10 comments

Dupe of https://github.com/angular/material2/issues/5417?

willshowell on 22 Jul 2017

Thanks @willshowell for pointing out, my situation is similar to https://github.com/angular/material2/issues/5417#issuecomment-315518257 and I am using latest beta of Material and latest version of Angular.

naveedahmed1 on 22 Jul 2017

Are you initializing the value to a string or Date? IIRC the error occurs sometimes when using string

willshowell on 22 Jul 2017

Yes, below is my code:

<div>
                        <md-input-container>
                            <input mdInput
                                   formControlName="lastDate"
                                   [min]="minDate"
                                   [mdDatepicker]="mdDatepicker"
                                   placeholder="Last Date"
                                   (focus)="mdDatepicker.open()" style="pointer-events:none;" />

                            <button mdSuffix [mdDatepickerToggle]="mdDatepicker" md-tooltip="Select Date"></button>

                        </md-input-container>

                        <md-datepicker #mdDatepicker></md-datepicker>
                    </div>

public minDate: any = new Date();

Its working with template driven form but throws error in case of reactive forms.

naveedahmed1 on 22 Jul 2017

I believe to resolve the error, you must use a Date for lastDate too

EDIT: or empty string for no initial value

willshowell on 22 Jul 2017

👍2

I would actually use null for no initial value, I'm not sure if empty string will work in the future

mmalerba on 24 Jul 2017

👍1

duplicate of #5417

mmalerba on 24 Jul 2017

I have the same problem, how can I use [min] and [max] options on md2-datepicker with reactive forms?

iosifpetre18 on 29 Jan 2018

@iosifpetre18 this issue should be fixed now, so just update to the latest version of Angular Material. If you still see the error feel free to open a new issue with a stackblitz reproduction

mmalerba on 29 Jan 2018

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}