Date Picker

Planned

Date pickers allow users to select a single date or a range of dates. The component has distinct mobile and desktop variants with similar attributes. Date pickers are especially helpful when users need to see the context of a date they are entering or selecting. The dates within the picker can appear in a variety of styles, signifying variations of meaning.

Anatomy

Iris Vue Date Picker

The Iris Vue date picker will be based off the flatpickr plugin and be attached to a trigger that acts as a dropdown.

Trigger

The date picker trigger will take on the same styling as all other text fields. It will have a calendar icon to the right to indicate that this is a date picker trigger. Once a date is picked, it will be reflected in the trigger. Note: The user cannot type into this trigger. If you are needing to input a date, use the date text field.

Trigger
Date picker

Date picker

The date picker allows the user to search through the months to pick a date. If they are needing to change the year, they will click on either the up or down arrow to move throughout the years. To move between the months, they will click the back and forward arrows to the right of the date picker.

Raised surface (Optional)
Month label - Subtitle 1
Year label - Body 1
Year switcher
Month pagination triggers - x-small embedded medium emphasis QAB
Day of the week labels - Overline
Day - 40px circle & body 1

Action buttons

The action button is an extension of the date picker where if needed, you can have up to two buttons at the bottom.

CTA - Up to two compact buttons (optional)

Flutter Date Picker

The flutter date picker will reside inside of a partial bottom sheet and is activated by a date picker trigger. The date picker can switch between different pick views; monthly, month, and year date picker. When switching views, the height of the bottom sheet will stay the same as the monthly picker.

Trigger

Monthly

Bottom sheet title - Small Heading (Optional)
Month label - Subtitle 1
Year label - Body 1
Month/Year Trigger - x-small embedded no emphasis QAB
Day of the week labels - Overline
Day - 40px circle & body 1‍
Month pagination triggers - x-small embedded medium emphasis QAB

Month

Bottom sheet title - Small Heading (optional)
Year label - Body 1
Month/year switcher - x-small embedded no emphasis QAB
Month label - Caption

Year

Bottom sheet title - Small Heading (optional)
Year range label - Body 1
Month/year switcher - x-small embedded no emphasis QAB
Month label - Caption

Next month pagination trigger - x-small embedded medium emphasis QAB

Month/Year Trigger

To make it easier for the user to tap the trigger to switch between month and year, the entire title section along with the quick action button will have a tap hit spot. Note: The QAB will showcase the pressed state but there is no pressed state for the month and year labels.

Action buttons

The action button is an extension of the date picker where if needed, you can have up to two buttons as a sticky footer at the bottom of the bottom sheet.

Bottom sheet sticky footer with up to 2 buttons

Date range

The date range is when a user needs to choose a start and end date. The first date will be selected then the user will decide what the end date is, select it then apply their selection. A background color will be applied between the start and end date.

Starting date - Day selected state
Range
End date - Day selected state

Legend

The legend is an extension of the date picker where you will see color coded circles attached to the date with a descriptive legend at the bottom of the calendar. Each date could have up to 4 visual identifiers attached to it. This applies to both the Iris Vue and Flutter date picker. The legend extension is only for the monthly date picker and the color is defined by the design. Note: This uses the large legend component variant.

Day legend - 4px circle
Legend visual identifier - 12px circle
Legend Label - Caption

Specs

Color

Note: Text field and quick action buttons take on their default component coloring.

Element	Property	Value
Month Labels	Text color	∆colorPlatformGray900
Year Labels	Text color	∆colorPlatformGray900
Day of the week Labels	Text color	∆colorPlatformGray600
Day (Static)	Text color	∆colorPlatformGray900
Day (Static)	Background color	∆colorPlatformAlpha0
Day (Static)	Stroke color	∆colorPlatformAlpha0
Day (Today)	Text color	∆colorPlatformGray900
Day (Today)	Background color	∆colorPlatformAlpha0
Day (Today)	Stroke color	∆colorPlatformGray600
Day (Hover)	Text color	∆colorPlatformGray900
Day (Hover)	Background color	∆colorBrandedAffordance100
Day (Hover)	Stroke color	∆colorBrandedAffordance100
Day (Pressed)	Text color	∆colorPlatformGray900
Day (Pressed)	Background color	∆colorBrandedAffordance100
Day (Pressed)	Stroke color	∆colorBrandedAffordance100
Day (Selected)	Text color	∆colorBrandedAffordanceOn
Day (Selected)	Background color	∆colorBrandedAffordance
Day (Selected)	Stroke color	∆colorBrandedAffordance
Day (Range)	Text color	∆colorPlatformGray900
Day (Range)	Background color	∆colorBrandedAffordance100
Day (Range)	Stroke color	∆colorBrandedAffordance100
Day (Inactive)	Text color	∆colorPlatformGray900 ∆colorPlatformAlpha400
Day (Inactive)	Background color	∆colorPlatformAlpha0
Day (Inactive)	Stroke color	∆colorPlatfromAlpha0
Day (Disabled)	Text color	∆colorPlatformGray900 ∆colorPlatformAlpha400
Day (Disabled)	Background color	∆colorPlatformAlpha0
Day (Disabled)	Stroke color	∆colorPlatfromAlpha0
Month/Year (Static)	Text color	∆colorPlatformGray900
Month/Year (Static)	Background color	∆colorPlatformAlpha0
Month/Year (Hover)	Text color	∆colorPlatformGray900
Month/Year (Hover)	Background color	∆colorBrandedAffordance100
Month/Year (Pressed)	Text color	∆colorPlatformGray900
Month/Year (Pressed)	Background color	∆colorBrandedAffordance100
Month/Year (Selected)	Text color	∆colorBrandedAffordanceOn
Month/Year (Selected)	Background color	∆colorBrandedAffordance
Month/Year (Disabled)	Text color	∆colorPlatformGray900 ∆colorPlatformAlpha400
Month/Year (Disabled)	Background color	∆colorPlatformAlpha0
Month/Year Switchher (Static)	Text color	∆colorPlatformGray900
Month/Year Switcher (Static)	Background color	∆colorPlatformAlpha0
Month/Year Switchher (Hover)	Text color	∆colorPlatformGray900
Month/Year Switcher (Hover)	Background color	∆colorBrandedAffordance100
Month/Year Switchher (Pressed)	Text color	∆colorPlatformGray900
Month/Year Switcher (Pressed)	Background color	∆colorBrandedAffordance100
Legend	Text color	∆colorPlatformGray600
Legend visual indicator	Background color	Defined by design

Elevation

Note: Elevation is only applied when the date picker is inside of a card.

Element	Property	Value
Surface	Shadow Y offset	∆surfacePlatformRaisedShadowY
Surface	Shadow opacity	∆surfacePlatformRaisedShadowOpacity
Surface	Shadow spread	∆surfacePlatformRaisedShadowSpread
Surface (static)	Shadow blur	∆surfacePlatformRaisedShadowBlurResting
Surface (hover)	Shadow blur	∆surfacePlatformRaisedShadowBlurLifted
Surface (pressed/active)	Shadow blur	∆surfacePlatformRaisedShadowBlurPressed
Surface (dragged)	Shadow blur	∆surfacePlatformRaisedShadowBlurLifted

‍

Spacing

Iris Vue Date Picker

Flutter Date Picker

States

Date picker trigger

Day

Month

Year

Date range

When needing to do a date range with Iris Vue, the user will need to pick each date separately from each trigger. With the flutter date range, you may decide to do it separate or together.

Theming

Shape

Note: The date range state does not take on any shape tokens.

Element	Property	Value
Day	Small Component	∆shapeBrandedSmall
Month	Small Component	∆shapeBrandedSmall
Year	Small Component	∆shapeBrandedSmall

Placement

Iris Vue Date Picker

The date picker is directly below the trigger.

Flutter bottom sheet

A bottom sheet will be used on native mobile instead of the traditional dropdown date picker. The height of the bottom sheet will stay the same as the monthly calendar when switching between month and year views.

Legend

Action buttons

Action buttons in a bottom sheet will turn into a footer with up to two CTA buttons at a high and no emphasis level.

Behavior

Date picker - Expand

When clicking or tapping on the date text field, the date picker will open.

Interaction	Steps	Duration	Easing	Notes
Expand	1a. Fade in	∆motionTimeFast	∆motionTimingFunctionStandard	Fades in from 0–100% opacity
	1b. Move from -∆platformSpacingNano	∆motionTimeFast	∆motionTimingFunctionStandard	Moves from –∆platformSpacingNano into designed position (from +∆platformSpacingNano for a dropdown placed above the input)
	1c. Scale in	∆motionTimeFast	∆motionTimingFunctionStandard	Scale 96–100%. The scale’s origin point should be set on the side closest to the input.

Date picker - Collapse

When clicking or tapping outside of the date picker, the assumption is that the user does not want to interact with the date picker anymore and it will close.

Interaction	Steps	Duration	Easing	Notes
Collapse	1. Dropdown selection delay	∆motionTimeFast		Delay before dismissing the dropdown surface
	2a. Fade out	∆motionTimeFast	∆motionTimingFunctionStandard	Fades out 100–0% opacity
	2b. Move to -∆platformSpacingNano	∆motionTimeFast	∆motionTimingFunctionStandard	Moves + or - ∆platformSpacingNano depending on placement
	2c. Scale out	∆motionTimeFast	∆motionTimingFunctionStandard	Scale 100–96% using the same origin point as the entrance

Switching between variants

When switching between a month or year variants, the user will click the hit state of where the month, year and dropdown caret is. The month picker will show first and once they have picked the month, it will change to the year. Once the user selects the year they want, it will go back to the monthly variant.

Month Pagination

The user will click the quick action buttons to the right to switch between months.

Developer Docs

Vue Developer Docs

Component documentation coming soon!