---
tags: DS DONE
---

> [name=Laureen Delhaye]DS OK

# Date picker
Date picker allow the user to select a date or a range of dates.

# Usage

This calendar is showing when the costumer must choose a date for a appointement or complet a date in a form.

### Desktop & mobile behaviour
Those explanation and illustration concerns the desktop version of the date picker. On mobile, we decides to use the native date picker from the browser.

## Types
Date picker exists only in one color, used for both light and dark themes:


Date picker showing to 5 to 6 lines of dates depending of the 1st day of the month.

Mainly used when building a form, there is not several types of date picker.

## States and anatomy


**1. Month and year dropdown**
Month and year dropdowns allow the user to select the month and the year in a list. State visible when user clicking on the month or year dropdown. A list of month/year is showing and the current month/year is displayed in anoher color. Both dropdown have the same behaviour.

**2. Current date**
State visible by default with the current date highlighted

**3. Selected date**
Selected day indicates to the user the pick up date. State visible when a date is selected, the date picked is displayed in another color.

**4. Hover on date picker**
State visible when the cursor hovers the calendar when a date is already picked. Elements are displayed in another color.

**5. Focused state**
State visible when users select the date picker via tab key. Focus on a day, month dropdown or year dropdown.

Weekdays and weekend days are differents by their background and font colors to help the user to understand the calendar.

---

# Style

## Sizes and colors


| | Attribute |Desktop |
| -------- | -------- | -------- |
|1. Month and year labels | Font weight <br> Font size <br> Font color | Bold <br>Size 3 <br>Black 9 |
|2. Day label | Font weight <br> Font size <br> Font color | Bold <br>Size 3 <br>Black 9 |
|3. Weekday |Font weight <br> Font size <br> Font color <br> Background color | Regular <br> Small <br> Black 9<br> Purple1 |
|4. Weekend day |Font weight <br> Font size <br> Font color <br> Background color | Regular <br> Small <br> Black 9<br> Grey2 |
|5. Current day | Font weight <br> Font size <br> Font color <br> backgournd color| Regular <br> Small <br> Black9 <br> Purple3 |
|56. Selected day | Font weight <br> Font size <br> Font color <br> backgournd color| Regular <br> Small <br> White <br> Purple8 |