Datepicker

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

Introduction

The Datepicker component allows users to select a date from a calendar interface, often used in forms and for date-based filtering. The Datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made up of several components, directives and the date implementation that work together.

Overview / Hero - KL

Anatomy

Anatomy of Single Month Datepicker

Anatomy of Single Month Datepicker

  • Month/Year button: Toggles between month and year view.
  • Navigation buttons: Allow transition to previous or next month.
  • Days row: Static row displaying days of the week.
  • Date row: Represents a week with each cell depicting a day.
Anatomy of Double Month Datepicker

Anatomy of Double Month Datepicker

#

Element name

Element type

1

Header title

Text

2

Month label

Text

3

Day of the week label

Text

4

Previous month button

Button

5

Next month button

Button

6

Day

Selectable element

7

Clear dates button

Button

8

Confirm dates button

Button


States

The Datepicker itself has two primary states:

  1. Unselected State: When no date has been chosen.
  2. Selected State: When a date has been chosen.
States of individual days of Datepicker

States of individual days of Datepicker

The individual days within the calendar have a variety of states to represent different interactions and statuses.

State

Description

Default

The standard state for a day that is available for selection.

Hover

The state when a user hovers over a day.

Pressed

The state when a day is being clicked or tapped.

Selected

The state for a day that has been selected.

Disabled

The state for a day that is not selectable.

Start Range

The state for the first day in a selected range.

In Range

The state for days that fall within a selected range.

End Range

The state for the last day in a selected range.

In Range Hover

The state when a user hovers over a day that is within a selected range.

Today Indicator

A special indicator to highlight the current day.


Types

The Datepicker component offers two types to suit various user needs.

Single Month Datepicker

Date Range: Allows users to select a range of dates within a single month.

Single Date: Allows users to select a single date within a single month.

Single Month Datepicker

Single Month Datepicker

Double Month Datepicker

Date Range Selection: Allows users to select a range of dates across two months. On mobile devices, it transforms into an infinite scroll Datepicker within a full-screen dialog for an enhanced user experience.

Single Date: Allows users to select a single date within a single month.

Double Month Datepicker

Double Month Datepicker

The Single Month Datepicker uses the Angular component, while the Double Month Datepicker is a custom Aero component designed for selecting date ranges across two months.