Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

md-datepicker min max error in reactive forms

See original GitHub issue

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)

Issue Analytics

State:
Created 6 years ago
Comments:10 (6 by maintainers)

Top GitHub Comments

2reactions

willshowellcommented, Jul 22, 2017

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

EDIT: or empty string for no initial value

1reaction

mmalerbacommented, Jul 24, 2017

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

Top Results From Across the Web

Angular material date-picker min and max date validation ...

Mine one is Reactive form! So I used {{ formgroup.get(field.key).errors | json }} instead! And I can handle now! Thanks! – ...

Angular Datepicker Min Max Error - StackBlitz

Datepicker with min & max validation.

Datepicker - Angular Material

A value that violates the min property will have a matDatepickerMin error. A value that violates the max property will have a matDatepickerMax...

Angular min date today

Angular min date validator. In reactive form we can use Validators.min and Validators.max for min and max validation respectively while creating FormGroup.

date picker material angular

We can also provide validation like min, max, and required. ... gives support for Angular form integration using reactive forms and template-driven forms....