New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom date picker for date fields in AMP forms #6469

Open
rudygalfi opened this Issue Dec 2, 2016 · 19 comments

Comments

@rudygalfi
Contributor

rudygalfi commented Dec 2, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g May 25, 2017

Collaborator

/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

Collaborator

ericlindley-g commented May 25, 2017

/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

@ericlindley-g ericlindley-g moved this from Backlog to Backlog (shortlist) in UI May 25, 2017

@vsiv

This comment has been minimized.

Show comment
Hide comment
@vsiv

vsiv May 31, 2017

Can't wait for autocomplete and this. 👍

vsiv commented May 31, 2017

Can't wait for autocomplete and this. 👍

@dandv

This comment has been minimized.

Show comment
Hide comment
@dandv

dandv Jun 1, 2017

Contributor

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

Contributor

dandv commented Jun 1, 2017

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

@aghassemi

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Jun 1, 2017

Member

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

Member

aghassemi commented Jun 1, 2017

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

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Nov 16, 2017

Member

UX Design Review

  • Allow typing (new version of ReactDate does).
  • @spacedino to come up with a base style for calendar (Decision is to have a "good" (instead of a "reset" that picks up browser default) base style)
  • @cvializ to "reset" the input styles back to browser defaults.
  • Modal for modal overlay for desktop.
  • @cvializ publish Demo link for @spacedino to use for styling.
Member

aghassemi commented Nov 16, 2017

UX Design Review

  • Allow typing (new version of ReactDate does).
  • @spacedino to come up with a base style for calendar (Decision is to have a "good" (instead of a "reset" that picks up browser default) base style)
  • @cvializ to "reset" the input styles back to browser defaults.
  • Modal for modal overlay for desktop.
  • @cvializ publish Demo link for @spacedino to use for styling.
@spacedino

This comment has been minimized.

Show comment
Hide comment
@spacedino

spacedino Dec 15, 2017

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 Dec 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@spacedino

spacedino Dec 15, 2017

from @cvializ demos :

Next steps:

  • launch in experimental mode
  • update visual designs
  • final UX review

spacedino commented Dec 15, 2017

from @cvializ demos :

Next steps:

  • launch in experimental mode
  • update visual designs
  • final UX review
@lswang1618

This comment has been minimized.

Show comment
Hide comment
@lswang1618

lswang1618 Dec 18, 2017

Collaborator

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:

  • max: the latest date that the calendar will allow. The default is unlimited.
  • min: the earliest date that the calendar will allow. The default is the current date.
  • src: a link to a JSON file to configure the date picker.
  • locale: a locale string, e.g. "en", "fa", "zh".
  • format: a standard date string e.g. YYYY-MM-DD to use as the output for AMP Events. This will be formatted in the output locale, unless the output locale is Unix seconds or millis i.e. "X" or "x"
  • blocked: a space separated list of ISO 8601 dates and RFC 5545 RRULEs specifying disallowed dates. Does not require amp-mustache.
  • highlighted: a space separated list of ISO 8601 dates and RFC 5545 RRULEs specifying dates displayed with a highlight style. Does not require amp-mustache.

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

For both range and single

  • anchor-direction
  • auto-focus
  • disabled
  • enable-outside-days
  • first-day-of-week
  • horizontal-margin
  • initial-visible-month
  • keep-open-on-date-select
  • minimum-nights
  • month-format
  • number-of-months
  • orientation
  • reopen-picker-on-clear-date
  • required
  • screen-reader-input-message
  • show-default-input-icon
  • with-full-screen-portal
  • with-portal

For single

  • initial-date
  • show-clear-date

For range

  • auto-focus-end-date
  • initial-end-date
  • initial-start-date
  • show-clear-dates

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:

Collaborator

lswang1618 commented Dec 18, 2017

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:

  • max: the latest date that the calendar will allow. The default is unlimited.
  • min: the earliest date that the calendar will allow. The default is the current date.
  • src: a link to a JSON file to configure the date picker.
  • locale: a locale string, e.g. "en", "fa", "zh".
  • format: a standard date string e.g. YYYY-MM-DD to use as the output for AMP Events. This will be formatted in the output locale, unless the output locale is Unix seconds or millis i.e. "X" or "x"
  • blocked: a space separated list of ISO 8601 dates and RFC 5545 RRULEs specifying disallowed dates. Does not require amp-mustache.
  • highlighted: a space separated list of ISO 8601 dates and RFC 5545 RRULEs specifying dates displayed with a highlight style. Does not require amp-mustache.

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

For both range and single

  • anchor-direction
  • auto-focus
  • disabled
  • enable-outside-days
  • first-day-of-week
  • horizontal-margin
  • initial-visible-month
  • keep-open-on-date-select
  • minimum-nights
  • month-format
  • number-of-months
  • orientation
  • reopen-picker-on-clear-date
  • required
  • screen-reader-input-message
  • show-default-input-icon
  • with-full-screen-portal
  • with-portal

For single

  • initial-date
  • show-clear-date

For range

  • auto-focus-end-date
  • initial-end-date
  • initial-start-date
  • show-clear-dates

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

This comment has been minimized.

Show comment
Hide comment
@eric30

eric30 Dec 27, 2017

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?

eric30 commented Dec 27, 2017

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

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Dec 28, 2017

Member

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

Member

aghassemi commented Dec 28, 2017

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

@ericlindley-g ericlindley-g moved this from Backlog (shortlist) to E-comm in UI Jan 5, 2018

@lswang1618

This comment has been minimized.

Show comment
Hide comment
@lswang1618

lswang1618 Jan 8, 2018

Collaborator

Update that this is now working in the Dev Channel.

Collaborator

lswang1618 commented Jan 8, 2018

Update that this is now working in the Dev Channel.

@adnanyousafch

This comment has been minimized.

Show comment
Hide comment
@adnanyousafch

adnanyousafch Jan 31, 2018

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

adnanyousafch commented Jan 31, 2018

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

@aghassemi

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Jan 31, 2018

Member

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

Member

aghassemi commented Jan 31, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@lswang1618

lswang1618 Feb 1, 2018

Collaborator

Sure, sgtm.

Collaborator

lswang1618 commented Feb 1, 2018

Sure, sgtm.

@cvializ cvializ modified the milestones: New FRs, Sprint H2 February Feb 26, 2018

@vonkow

This comment has been minimized.

Show comment
Hide comment
@vonkow

vonkow Mar 24, 2018

Any update on this timeline?

vonkow commented Mar 24, 2018

Any update on this timeline?

@mdiblasio

This comment has been minimized.

Show comment
Hide comment
@mdiblasio

mdiblasio Mar 27, 2018

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?

mdiblasio commented Mar 27, 2018

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

This comment has been minimized.

Show comment
Hide comment
@rudygalfi

rudygalfi Mar 27, 2018

Contributor

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

Contributor

rudygalfi commented Mar 27, 2018

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

@mdiblasio

This comment has been minimized.

Show comment
Hide comment
@mdiblasio

mdiblasio Mar 27, 2018

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?

mdiblasio commented Mar 27, 2018

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

This comment has been minimized.

Show comment
Hide comment
@lswang1618

lswang1618 Mar 27, 2018

Collaborator

It's an attribute - use mode:overlay

Collaborator

lswang1618 commented Mar 27, 2018

It's an attribute - use mode:overlay

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment