Github

Single Date Picker

Single date pickers let users choose one date from a calendar input.

Component Variations

Basic Single Date Picker

Standard date picker for selecting a single date

States

Contains: Default, Success, Error, Warning

Date is valid
Invalid date
Check date

With Month Year Selector

Allow users to quickly navigate months and years

Dropdown Positions

Contains: Bottom-Left, Bottom-Center, Bottom-Right, Top-Left, Top-Center, Top-Right

Input Field Variations

Contains: Optional Label, Hint Text, Helper Text, Leading Icon

Optional

This is helper text shown below the input field

Optional

Helper text displayed below the field

Usage Guidelines

1. Import

Import the single date picker component:

import-single-date-picker.ts

Copy code

2. Basic Usage

Simplest form of the single date picker:

basic-usage-example.html

Copy code

3. With Month Year Selector

Enable quick navigation through months and years:

month-year-selector-example.html

Copy code

4. Dropdown Position

Control the calendar dropdown position:

dropdown-position-example.html

Copy code

5. All API Usage

Comprehensive example with all available properties and events:

single-date-picker-all-api.html

Copy code

API Reference

Inputs

Properties that can be passed to the component:

Property
Type
Default
Required
Description
label
string
-
No
Label text displayed above the date picker
placeholder
string
'Select date'
No
Placeholder text shown when no date is selected
value
Date | null
null
No
Currently selected date
disabled
boolean
false
No
Whether the date picker is disabled
optional
boolean
false
No
Whether the date picker is optional
state
'success' | 'error' | 'warning' | null
null
No
Visual state of the date picker
helperText
string
-
No
Helper text displayed below the date picker
hintText
string
-
No
Hint text displayed in tooltip on ? icon next to label
showMonthYearSelector
boolean
false
No
Whether to show month and year selectors
dropdownPosition
'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right'
'bottom-left'
No
Position of the dropdown calendar relative to the input field

Outputs

Events emitted by the component:

Property
Type
Description
Format
valueChange
EventEmitter<Date | null>
Emitted when the selected date changes
Date object or null
inputFocus
EventEmitter<void>
Emitted when the input receives focus
No payload
inputBlur
EventEmitter<void>
Emitted when the input loses focus
No payload

Best Practices

When to Use

  • Use Single Date Picker when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Single Date Picker when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Always provide clear labels for date inputs
  • Use helper text to indicate date format (e.g., MM/DD/YYYY)
  • Set min and max dates to constrain valid selections
  • Use state prop to provide validation feedback
  • Use month year selectors for date ranges spanning multiple years
  • Disable past/future dates when appropriate
  • Provide meaningful error messages for invalid date selections
  • Consider accessibility - ensure keyboard navigation works properly
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Playground

Customize the single date picker features

example.html

Copy code