Date Picker

Approved — Ready for dev

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.

Date Picker

Anatomy

Iris Vue Date Picker

The Iris Vue date picker will 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. 

  1. Trigger
  2. 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 year. To move between the months, they will click the back and forward arrows to the right of the date picker. Note: The month and year titles will open a browser styled dropdown to choose the new month/year. The entire label and caret are clickable to open the month/year switcher.

  1. Raised surface (Optional)
  2. Month label - Subtitle 1
  3. Month switcher - 24px Icon 
  4. Year label - Body 1
  5. Year switcher - 24px Icon
  6. Month pagination triggers - x-small embedded medium emphasis QAB
  7. Day of the week labels - Overline
  8. Day - 40px circle & body 1

Date Range

The date range is when a user needs to choose a start and end date. The date range will only be used across two text fields. The user will pick the start date in one text field then the end date in another. 

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

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. 

Monthly

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

Month 

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

Year

  1. Bottom sheet title - Small Heading (optional)
  2. Year range label - Body 1
  3. Month/year switcher - x-small embedded no emphasis QAB
  4. Month label - Caption
  5. 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. 

  1. 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 date range will only be used across two text fields. The user will pick the start date in one text field then the end date in another. 

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

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

Iris Vue Date picker switcher

‍

Note: The entire label and caret are clickable to open the month/year switcher. 

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. 

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 Haptics
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 Haptics
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!

Introduction
Anatomy
Specs
States
Theming
Placement
Behavior
Dev Docs
Dev Docs