ampproject / ampproject/amphtml

Datepicker: Hide DayPickerNavigation_buttons for months outside of min/max range

Open
#33,778 1 comment 0 reactions 0 assignees View on GitHub
Component: amp-date-picker P2: Soon Stale Type: Feature Request WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## Describe the new feature or change to an existing feature you'd like to see

Currently, when a "min" and "max" date range is specified a user can use the DayPickerNavigation_buttons to select months in the amp-date-picker that have no valid dates. For example, if you have a date picker with a min of 2021-04-20 and a max of 2021-07-09 (a range of April to July) the user can navigate outside of that range to months with no selectable dates.

In our use case, we want users to only be able to navigate between months within our specified range. If the month is outside the specified range then we do not need users to see those months.

## Describe alternatives you've considered

We have considered trying to solve this outside of AMP by selectively showing/hiding the DayPickerNavigation_buttons, but would rather have this available in native AMP.

## Additional context

This was found to be an issue with users navigating away from the range of selectable dates and not having a good way to get back.

Contributor guide

Open the contributing guide

Research direction

Start by tracing the amp-date-picker implementation and its DayPickerNavigation_buttons, focusing on how the specified min and max dates affect month navigation. Reproduce the April 20–July 9 example and verify that navigation cannot reach months outside the range while all months containing selectable dates remain reachable.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.