Github

Date Time Picker

Date time pickers help users select single dates, ranges, and optional time values.

Component Variations

Date picker

Can contains single date, date range

Date pickers with time

Can contains single date, date range with time.

States

Contains: Default, Success, Error, Warning

Valid selection
Invalid selection
Check selection

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

Import

Import the date time picker component:

import-date-time-picker.ts

Copy code

Basic Usage

Simplest form of the date picker:

basic-usage-example.html

Copy code

Single Date Mode

Select a single date:

single-mode-example.html

Copy code

Range Date Mode

Select a date range:

range-mode-example.html

Copy code

Single Date Mode with Time

Select a single date with time:

single-with-time-example.html

Copy code

Range Date Mode with Time

Select a date range with time for both start and end:

range-with-time-example.html

Copy code

Dropdown Position

Control the calendar dropdown position:

dropdown-position-example.html

Copy code

All API Usage

Comprehensive example with all available properties and events:

date-time-picker-all-api.html

Copy code

API Reference

Inputs

Properties that can be passed to the component:

Property
Type
Default
Required
Description
mode
'single' | 'range'
'single'
No
Picker mode - single date or date range
withTime
boolean
false
No
Whether to include time selection
label
string
-
No
Label text displayed above the picker
placeholder
string
'Select date'
No
Placeholder text shown when no value is selected
value
Date | DateRange | null
null
No
Currently selected value (date or date range)
disabled
boolean
false
No
Whether the picker is disabled
optional
boolean
false
No
Whether the picker is optional
state
'success' | 'error' | 'warning' | null
null
No
Visual state of the picker
helperText
string
-
No
Helper text displayed below the 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
minDate
Date
-
No
Minimum selectable date
maxDate
Date
-
No
Maximum selectable date
leadingIcon
string
-
No
Icon displayed at the start

Outputs

Events emitted by the component:

Property
Type
Description
Format
valueChange
EventEmitter<Date | DateRange | null>
Emitted when the selected value changes
Single mode: Date object or null. Range mode: { start: Date | null, end: Date | null } 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 Date Time 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 Date Time Picker when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Choose the appropriate mode (single/range) based on your use case
  • Enable time selection only when needed - simpler is better
  • Always provide clear labels indicating what should be selected
  • Use helper text to clarify format or constraints
  • Set min and max dates to constrain valid selections
  • Use state prop to provide validation feedback
  • Consider timezone handling when time selection is enabled
  • Provide meaningful error messages for invalid selections
  • Use consistent date/time formats across your application
  • 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 date time picker features

example.html

Copy code