Material: Required dose not work with md-datepicker

[kevinlbatchelor]

You should be able add the required attribute to the md-datepicker and have it be a required field for a form. This means that:

1. If you click into the field, do not click a date, and click out you should get some styles indicting the fields is dirty, like a red line.
2. If the field has not been set, then the form should be $invalid and not be submit able

In the plunker example I should not be able to submit the form without setting a date.

http://plnkr.co/edit/Cz6yY56zVEFj621cndBz?p=preview

[Kjuib]

+1
md-datepicker should be completely interchangable with an input element.
Be able to be put into a md-input-container and have a label.

[Nextt1]

You can do that. It is already implemented. Just check the docs. here is an working example. http://plnkr.co/edit/uKb2aEz02MR8pNZmaA8B

[mckenzielong]

@Nextt1 Your working example shows the issue in question. Compare the behaviour of datepicker to md-input. It is inconsistent (integration with md-input-container would go a long way to resolve this)

[Nextt1]

I don't think md-input-container is needed. besides It's working for now. Developers may add that in later version but it's not really that important since validation works.

[mckenzielong]

@Nextt1 Just to reiterate:

It is inconsistent

The element should not look out of place in a form with other md form elements (inputs, selects, textareas.) Currently we have spacing inconsistencies, lack of ng-message styling , no floating label, and other misc styling issues (font size, background-color)

One of those inconsistencies is how an md-input reacts to touched and how the datepicker reacts to touched.

As @Kjuib mentioned, it would be nice to allow the datepicker element to be interchangeable with an input (say an input with the datepicker as an attribute.) That integration could result in fancy animations for datepicker messages (without having to roll your own css), floating labels, and an api consistent with all the other form elements.

[kevinlbatchelor]

You should not have to use ng-required as you did@Nextt1 either. Plane old required should be sufficient. But for now ng-required may be helpful.

http://plnkr.co/edit/qd1for9TjvyQCdDY1kJM?p=preview

[Nextt1]

I am totally agree with you guys. I was just giving a possible solution to work unless we get something proper from developers
.

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

[kevinlbatchelor]

Here is my work around for this issue for those looking for some css to fix this.
https://jsfiddle.net/kevinlbatchelor/jvL1pL1z/

[aaronbalthaser]

This does not make any sense to me. The date picker should have the ability to add "This is required" just like the other elements. This creates an inconsistent user experience.

[clshortfuse]

@aaronbalthaser

This feature has been implemented with md-input-container and ng-messages

See demo here: https://material.angularjs.org/HEAD/demo/datepicker