Range Date Picker

Allows users to select a start and end date from a calendar or by entering dates manually.

Anatomy

Date Anatomy

Item

Name

Description

Component

Optional

1

Date Picker Input left

Form field to select the Date in the calendar

Text Input

 

2

Date Picker Input right

 

Text Input

 

3

Previous and next controls

Enables the user to browse through past and future time periods

Icon

 

4

Month and year controls

Enables the user to browse through past and future months and years

 

 

5

Week Day

Days of the week

 

 

6

Day

Days in the month

 

 

7

Calendar

 

 

 


Specification & Properties

Spacing

Date Spacing

Property

Value

Token

Padding

16px

.200

Item spacing

8px

.100

Component spacing

4px

.50

 

States

Closed

Default

Default

Hover left

Hover left

Hover right

Hover right

Error

Error

Read Only

Read Only

Disabled

Disabled

 

Open

Active left

Active left

Active right

Active right