What's the "am-date-format" code/value for mm/dd/yyyy (e.g., 01/24/2016)?

[FlipOneDev]

I see only "L" and "LL" being used (for Long date). What's the code to use for "01/24/2016"?

[unmade]

To set up format for displayed date in the input you should use am-input-date-format attr, so in your case it will be:

<am-date-picker am-input-date-format="MM/DD/YYYY"></am-date-picker>

For available formats see moment.js

[FlipOneDev]

Found the reason why: The CodePen.io example (the 3rd at the bottom) uses am-date-format="L" (which I used earlier), not am-input-date-format (which is the current key used).

[FlipOneDev]

@unmade - Quick question: I was using the official Angular Material "md-datepicker" previously, but my client doesn't like it and wants something close to the Material Design spec, like what you created.

"md-datepicker" allows me to use "ng-change", to which I can attach a change handler function to intercept the new date value when the user selects a new date.

What is the best, most efficient way to handle date selection that's close to what *ng-change" offers?

Thanks for your reply, and I hope you won't get tired responding to our questions.

[unmade]

Sorry, my bad. I guess, I forgot to update the codepen after the attr's name was changed.

As for the ng-change, I will make some refactor in the next few days and it will be available for you. The ng-change will be fired when the user clicks 'OK' or clicks outside the dialog, otherwise it won't. Is it ok for you?

For now, you could handle date selection by adding a watcher in your controller (but it is not recommended).

[FlipOneDev]

@unmade - That would be really nice! And yes, I think attaching 'ng-change' to the 'OK' button (for confirming date selection by the user) is the way to go.

As for attaching 'ng-change' to clicks outside the dialog: I believe a click outside the dialog is equivalent to clicking 'Cancel', which 'cancels' any date selection and retains the old value in the date field.

(By the way, the current implementation when the user presses a date in the calendar is to immediately update the value in the date field. Wouldn't it be better if the field-value update is done only when the user presses the 'OK' button, and that any other action (e.g., pressing 'Cancel' or clicking outside the dialog) cancels any date selection and retains the old value in the field? What do you think?)

Appreciate it!

[unmade]

I update the master branch. Check out the demo and the API documentation.
Thanks to you and mr.SirDarquan, you have convinced me about confirmation behavior, so I disable 'click outside to close' option and the only way to confirm selected date is to press 'OK' button.
The locale could also be set locally now.

Any feedback highly appreciated.

[FlipOneDev]

@unmade, that was fast! Thank you also for listening to our ideas and for being responsive.

Also, if you don't mind, I have another suggestion for improvement:

The official Angular Material datepicker component can be displayed ON TOP of a dialog component. This is an important feature when we use a dialog with form inputs that include a date input (setting/selecting a date from the datepicker).

Is this something you can implement soon? I actually need it now for an application I'm working on, but I can wait for 2-3 days if you can't do it in a day or immediately.

Thanks again, appreciate it!

[unmade]

Thank you!

I'm sorry, but for now I'm not planning to implement it. As long as I'm using $mdDialog to show the picker, the 'ON TOP' feature couldn't be implemented.

[FlipOneDev]

@unmade - Oh, okay, I understand it's not a simple thing to do. I hope, though, that you'll find time to implement it like the standard Angular Material datepicker (i.e., use it on a form in an $mdDialog).