Solaris Design System

Date/time

Date and time pickers allow the user to pick their dates. There are emotive and productive date pickers, emotives are slightly larger whereas productive are smaller.

We also have variaties such as the date picker, a calendar option date picker and a start to end date picker.

To view these examples in light or dark theme switch the toggle on the top right.

Types

The table below shows you the various types of date picker.

Type Emotive
Type: body-emotive 		Productive
Type: body-productive
:date
Always display helper text		 Date picker emotive theme light Date picker emotive theme dark Date picker productive theme light Date picker productive theme dark
:calendar
Min-width: cal width		 Calendar date picker emotive theme light Calendar date picker emotive theme dark Calendar date picker productive theme light Calendar date picker productive theme dark
:calendar-range
Gutter: 8px		 Calendar range date picker emotive theme light Calendar range date picker emotive theme dark Calendar range date picker productive theme light Calendar range date picker productive theme dark

Calender states

The table below shows you the various types of date picker with a calender option and its states.

States Emotive
Input dimensions: 48px 		Productive
Input dimensions: 40px
:calendar-enabled Enabled calendar emotive theme light Enabled calendar emotive theme dark Enabled calendar productive theme light Enabled calendar productive theme dark
:calendar-selected Selected calendar emotive theme light Selected calendar emotive theme dark Selected calendar productive theme light Selected calendar productive theme dark
:calendar-range-selected Selected range calendar emotive theme light Selected range calendar emotive theme dark Selected range calendar productive theme light Selected range calendar productive theme dark
:calendar-date-hover Hover calendar emotive theme light Hover calendar emotive theme dark Hover calendar productive theme light Hover calendar productive theme dark

Usage

Date pickers are used to display past, present, or future dates and/or times. Depending on the request, you can determine which picker is best to use.

When to use When you are asking for the date or time from the user, or scheduling a task.

Type Use
Date When requesting just the date
Calendar When requesting just a date but showing the calendar selectable option for in order for users to see dates aligned with days
Calendar range Selecting a start to end date, displaying the calendar on click which will allow users to easily select the date range