Date Picker

Allows users to select a single date or a range of dates depending on the use case.

General

View it on Github

Examples

Default date picker

            
                        HTML
                    
                        React
                    
                        <head>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@1.1.0/components/Datepicker/index.umd.js">
    </script>
</head>
<body>
<sgds-datepicker></sgds-datepicker>
</body>
                    
                            View on React storybook

Anatomy

Month: Allows the user to select the month.
Year: Allows the user to select the year.
Forward/backward chevrons: Allows the user to move forward or backwards by month within the selected year.

Spacing

Within the calendar
Ensure that there is a minimum of 24px vertical and horizontal spacing.

Usage guidelines

Date Picker should be used:

When you want users to select a single date or a range of dates.

Date Picker should not be used:

where the context of the calendar is not important.

Usability guidelines

Be relevant and clear
Date pickers can display past, present or future dates, display as relevant to the task as possible. Clearly indicate important dates as well; current and selected dates.

Target touch size
Ensure that the target touch size is big enough, at least 32 x 32dp, This will reduce the chance of users hitting the wrong target that potentially cause they to complete the action wrongly without realising.

Last updated 28 November 2023