---
# System prepended metadata

title: Date picker
tags: [DS DONE]

---

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

![](https://i.imgur.com/qb6nQ6f.jpg)


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


![](https://i.imgur.com/G2PQ2g0.jpg)


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


![](https://i.imgur.com/ol3S7hW.jpg)


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





