Date/time picker
Date/time pickers allows users to select a date and/or time, or a range of dates and/or times.
Guidelines
Date pickers are tied to input fields, and are accessed through focusing on the input field by clicking or using the tab key. The date picker opens as an overlaying interactive calendar that allows the user to select a date or a range of dates. If a date is chosen, this is reflected in the input field.
Time pickers are tied to input fields, and are accessed through focusing on the input field by clicking or using the tab key. The time picker opens as an overlaying list of time that allows the user to select a specific time. If a time is chosen, this is reflected in the input field.
Implementation in Figma
- In Figma go to the Assets Panel and search for date picker.
- Drag and drop the component in your frame.
- Rename and resize the component if needed.
- Choose the variant from the Design Panel.