Date picker

Date pickers let people select a single date. They display a date input field by default, and allow users to enter a date either through text input, or by clicking on the calendar icon and choosing a date from the dropdown calendar, that shows the days of the current month view by default.

To select a date from in the date picker using the manual entry:

When the date picker is empty, only the label will appear in the center of the field.
When the container is clicked, the label shrinks to the top left side, and the field allows the manual entry of dates using the numbers on a keyboard..An optional placeholder can be shown in the container to guide the user.
When the user presses enter or clicks outside the field, the date text shows the entered date.
The date can be deleted or changed using the same procedure or using the calendar.

To select a date from in the date picker using the calendar dropdown:

When the date picker is empty, only the label will appear in the center of the field.
When the calendar icon is clicked, the label shrinks to the top left side and a calendar dropdown appears. An optional placeholder can be shown in the container to guide the user.
The usera can then navigate between views to choose the date.
When the user selects one date, the dropdown closes and the date text shows the selected date.
Once selected, the date can’t be unselected, only changed. To delete the date the manual entry should be used.

The calendar dropdown has three views:

Type	Resource	Status
Design	Figma: Atmosphere Foundations and Components Library	Available
Design	Figma: Atmosphere Icons Library	Available
Implementation	GitLab: Angular web component	Available

Storybook

Resources