Frontend Timeline Date Picker

Problem

We want to offer an alternative date selection method to the timeline to improve mobile usability. The HTML date input is already used in several components, and we need to decide if we should continue using it or switch to a different component.

Constraints

  1. supports our styles (ok/cancel button etc.)
  2. mobile usability
  3. German/English support
  4. React 19 support, well maintained etc.
  5. FLOSS
  6. obviously validation, only valid dates can be chosen

Assumptions

  1. Future use cases might require a date range selection

Solutions

Alternative A: Date Picker as overlay

Pros:

  • Immediate date selection
  • Enables entering date via keyboard

Cons:

  • Requires parsing and validation of user input
  • Requires a relatively unique design

Alternative A1: HTML date input

Pros:

  • Solution well known
  • Comes with strong input validation out of the box
  • Universal support across browsers and react versions

Cons:

  • Supports localization only based on the browser language, not based on the selected language of PermaplanT (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date)
  • Does not seem to support date range selection (but could be implemented with a second HTML date input)

Alternative A2: MUI X Date Pickers Date Picker

Pros:

  • Comes with strong input validation out of the box
  • Comes with support for Mobile out of the box
  • A more modern look and feel
  • Good customization
  • Good localization
  • Explicit React 19 support
  • Strong support through Material UI

Cons:

  • Date range selection is only available as a separate component and is a premium feature (i.e. 7$ per front-end developer while components are used)
  • Month view needs to be specifically enabled
  • No direct navigation between day and month view

Alternative B: Date Picker in pop-up

Pros:

  • Enables entering date via keyboard

Cons:

  • Requires an extra click/tab to get to the date selection/input
  • Requires parsing and validation of user input
  • A pop-up with a lone date input will look a little odd stylistically

Alternative B1: HTML date input

Pros:

  • Solution well known
  • Comes with strong input validation out of the box
  • Universal support across browsers and react versions

Cons:

  • Supports localization only based on the browser language, not based on the selected language of PermaplanT (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date)
  • Does not seem to support date range selection (but could be implemented with a second HTML date input)

Alternative B2: React Calendar with custom input field

Pros:

  • Comes with date range selection out of the box
  • Good customization
  • Good localization
  • Implicit React 19 support

Cons:

  • Requires custom implementation for input handling and validation
  • Relatively small community supporting the library

Alternative B3: MUI X Date Pickers Date Picker

Pros:

  • Comes with strong input validation out of the box
  • Comes with support for Mobile out of the box
  • A more modern look and feel
  • Good customization
  • Good localization
  • Explicit React 19 support
  • Strong support through Material UI

Cons:

  • Date range selection is only available as a separate component and is a premium feature (i.e. 7$ per front-end developer while components are used)
  • Month view needs to be specifically enabled
  • No direct navigation between day and month view

Alternative C: Date Calendar in pop-up

Pros:

  • Immediate date selection
  • Only valid dates can be selected
  • Stylistically a better choice for a pop-up

Cons:

  • Keyboard input is not supported

Alternative C1: React Calendar

Pros:

  • Comes with date range selection out of the box
  • Good customization
  • Good localization
  • Implicit React 19 support

Cons:

  • Relatively small community supporting the library

Alternative C2: MUI X Date Pickers Date Calendar

Pros:

  • A more modern look and feel
  • Good customization
  • Good localization
  • Explicit React 19 support
  • Strong support through Material UI

Cons:

  • Date range selection is only available as a separate component and is a premium feature
  • Month view needs to be specifically enabled
  • No direct navigation between day and month view

Decision

We will use alternative A1 as an alternative date selection method to the timeline.

Rationale

  • Allows for quick access to the date selector
  • Enables date copying and keyboard input
  • Uses a well-known component

Implications

Notes