search

ampproject / amphtml

The AMP web component framework.
https://amp.dev
Apache License 2.0
14.89k stars 3.89k forks source link

Custom date picker for date fields in AMP forms #6469

Closed rudygalfi closed 5 years ago

rudygalfi commented 7 years ago

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 commented 7 years ago

/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 commented 7 years ago

Can't wait for autocomplete and this. 👍

dandv commented 7 years ago

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

aghassemi commented 7 years ago

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...

aghassemi commented 6 years ago

UX Design Review

spacedino commented 6 years ago

Final designs and spex. The final design we decided on was not actually a11y color compliant so I had to change. Open to discuss if there are issues but this should work for now. We might want to make it more obvious which are the start and end dates by changing the shape since the color is pretty dark now. Or we could decide that having the start and end dates as a dark color, but the middle dates with a lighter bg and black text is ok too (19).

FINAL

date_picker_final_empty_16 date_picker_final_full_17 OR date_picker_final_full_19 date_picker_single_18 final_spex_date_picker

/cc +aghassemi +cvializ +lswang1618

spacedino commented 6 years ago

from @cvializ demos :

Next steps:

lswang1618 commented 6 years ago

This component is ready for experimenting. In lieu of full documentation, here are some details for experimentation. The component is called amp-date-picker with type=range or type=single for selecting a single date or a range of dates.

A placeholder is required for the component - for a single date, this can take the form:
<input amp-date-placeholder placeholder="Pick a date" id="date"/>

For a date range:

<input amp-date-placeholder-start placeholder="Start date" id="start" />
<input amp-date-placeholder-end placeholder="End date" id="end" />

The properties available for both include:

Properties that are inherited from the Airbnb library (https://github.com/airbnb/react-dates) include:

For both range and single

For single

For range

You can also use amp-mustache to create templates for custom date markup and an info-panel below the calendar. Other features include tooltips, setDate(s) and clear actions, and change event listeners. Examples of these implementations can be found here:

eric30 commented 6 years ago

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

image

Is this a bug or did I do something wrong?

aghassemi commented 6 years ago

/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 commented 6 years ago

Update that this is now working in the Dev Channel.

adnanyousafch commented 6 years ago

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

aghassemi commented 6 years ago

@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 commented 6 years ago

Sure, sgtm.

vonkow commented 6 years ago

Any update on this timeline?

mdiblasio commented 6 years ago

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 commented 6 years ago

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

mdiblasio commented 6 years ago

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

Demo 1: demo 1

Demo 2: 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 commented 6 years ago

It's an attribute - use mode:overlay

ampprojectbot commented 6 years ago

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

88kbbq commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

Pachara commented 4 years ago

I am looking for Time Picker. Any Ideas?