Forms > Date Picker

[ffoodd]

Date Picker

Requirement

As a developer I want to insert Date Picker So That I will get this ready to use component compatible with Orange design specifications and a11y requirements

DSM Reference: Components > Forms

• Date picker — WEB-FOR-DAP-001
• Time picker — WEB-FOR-TIP-001

General description

xxx

UI specifications

Anatomy

1. xx
2. xx

Variants

variant 1

xxx

variant 2

xxx

States

• xx
• xx
• xx
• xx

Internationalisation

xxx

Appearance

xxx

Placement

xxx

UX specifications

Interaction

• All:

  • xxx
  • xxx

• Mouse:

  • xxx
  • xxx

• Keyboard:

  • xxx
  • xxx

• Touch (mobile): same as the mouse interaction

• Screen Reader

Animations

• xxx

Accessibility

Visual Accessibility

• (?) Color Management
• xxx

Usage Accessibility

• (?) Focus order
• (?) Focus loss expected behavior

Technical specifications

This will probably need new JavaScript components.

HTML Structure

xxx

JavaScript

xxx

Documentation in Boosted

xxx

Implementation tasks

• [

[ffoodd]

Have a look at SNCF's Bootstrap fork, using FlatPickr.

[ffoodd]

Duet Design System date-picker probably worth a try.

[julien-deramond]

Don't know if it can help us at some point but https://codepen.io/eliseodannunzio/details/mdpMGgm could be interesting.

[Dorian-Grim]

datepicker when? Looking forward to this pls

[julien-deramond]

@Dorian-Grim Unfortunately, this is not yet prioritized due to its complexity. We will probably have to rely on a customizable external library and launch a big study around it to find one. Right now, we are focusing on releasing the dark mode. We will keep in mind your request to make it count in our prioritization process.