Datepicker

The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar.

When to use

The Datepicker component is commonly used in forms where users need to input a specific date or range of dates, such as for booking flights or hotels. It is also used in date-based filtering on websites and applications.

When not to use

Avoid using the Datepicker component when there are only a limited set of date options available. In such cases, consider using a radio button group for better usability and clarity.

Behaviour

The Datepicker component behaves as an input field accompanied by a calendar icon. Clicking the icon displays a calendar interface for date selection. Users can either type a date directly or use the calendar. The Datepicker component has the entire field clickable and triggers the calendar for input. Only the Single Month Datepicker with Date Range (Angular) allows text input in the field or icon click to show the calendar view.