Custom date picker for date fields in AMP forms

[rudygalfi]

This issue is opened to collect requirements and track development of being able to use a custom date picker in conjunction with the date field support in AMP forms.

[ericlindley-g]

/cc @dandv @choumx @aghassemi

FYI
This has been coming up more recently, now that a lot of the needs for e-commerce have been addressed. Chatted w/ Malte about the feature, and current thinking is that we may be able to take an approach similar to autocomplete, where we both

a) expose the events in bind to make this work and create an ABE that demos how folks could compose an advanced case, and
b) create a simple, good-UX solution encapsulated as a higher-level component, as well

[vsiv]

Can't wait for autocomplete and this. 👍

[dandv]

+1. Date range picking has been requested by travel partners - searching for hotel availability for example.

[aghassemi]

I highly recommend we try to find an existing good open-source implementation and integrate it. A high quality, mobile friendly date picker with a11y and i18n support is a lot of work. Supporting non-Gregorian calendars adds a lot to it as well.

Looking at Airbnb's version (https://github.com/airbnb/react-dates): 500 commits, 57 contributors, thousands lines of code...

[eric30]

I tried to follow all the steps and gave it a try, however it didn't work out. There's a 404 error occurred:

Is this a bug or did I do something wrong?

[aghassemi]

/cc @erwinmombay regarding last comment, looks like unversioned Canary is pointing to prod. Enabling Dev Channel seems to only impact cached resources and not origins.

[lswang1618]

Update that this is now working in the Dev Channel.

[adnanyousafch]

Any timeline for when it will be out of experimental stage?

[aghassemi]

@lswang1618 @cvializ Given default styles are now in, I personally feel comfortable moving this to at least a doc-level optin so folks can start shipping in 3-4 weeks, thoughts? (@cvializ I guess we still need the validation rules).

[lswang1618]

Sure, sgtm.

[vonkow]

Any update on this timeline?

[mdiblasio]

Should the calendars be hidden by default or do they need to be implemented inside of a lightbox?

This demo has the calendars hidden, but AMPByExample Demo displays them by default.

Which is expected?

[rudygalfi]

@mdiblasio Isn't it a user experience choice for the publisher? cc @lswang1618

[mdiblasio]

I'm more referring to the inconsistency between the 2 demos, which have nearly the same implementations.

Demo 1:

Demo 2:

Neither use a lightbox but the first demo doesn't display the calendar until the field is clicked. If the publisher doesn't want to show the calendar until clicked, is there an attribute or must they use a lightbox?

[lswang1618]

It's an attribute - use mode:overlay

[ampprojectbot]

This issue hasn't been updated in awhile. @lswang1618 Do you have any updates?

[88kbbq]

What about validation? How do you make this date picker a mandatory field like e-mail or name? Documentation for validation seems not to apply to this component.

[88kbbq]

What about validation? How do you make this date picker a mandatory field like e-mail or name? Documentation for validation seems not to apply to this component.

Ah, the required attribute needs to appear in the input field within the date picker, not the amp-date-picker component itself. Tricky!

[aghassemi]

has been implemented and launched. If you have any FR or bugs, please fine a new ticket.

[Pachara]

I am looking for Time Picker.
Any Ideas?