Date time input

Last modified:

A simple HTML5 date or time input.


Example of Date time input - default

<div className='bc-form__group'>
  <label className='bc-label' htmlFor='date'>
    Pick a date
  <div className='bc-date-time-input'>
    <input className='bc-text-input' id='date' name='date' type='date' />

React documentation

Last modified:

TODO: Introduce a new <BcDateTimeInput /> react component and migrate.


Last modified:

Allows users to set dates and times. Combine together for setting ranges.


By default a calendar icon is shown.

The --time variant is available to show a clock icon instead.

Known browser differences

In addition to differences between the native menu pickers and spinners, on desktop:

BrowserDate field focusDate field clickDate buttonTime field focusTime field clickTime buttonDirty behavior
ChromeTextTextPicker UITextTextPicker UI
EdgeTextTextPicker UITextTextPicker UI
SafariTextPicker UITextText
FirefoxTextTextPicker UITextText

The component automatically handles mobile support, using their touch-based native spinners.


Last modified:

These are sizing and layout variants:

.bc-date-time-input--blockTakes entire block width.
.bc-date-time-input--disabledMakes date time input disabled.
.bc-date-time-input--timeShows clock icon instead of default calendar icon.


Last modified:

This component uses native HTML5 date and time inputs.

Its core mouse, touch, keyboard and screen reader support is excellent.

Note: ::placeholder does not exist for this feature.

Note the extended functionality differs slightly β€” see Known browser differences below.


Last modified:

Native HTML5 date and time inputs have a good browser support and losing some control over the styles of the open picker menu UI is acceptable given the many benefits gained.

The benefits:

  • HTML5 native date and time inputs have good native support, in many cases exceeding that of third-party JS pickers
  • The usability and accessibility exceeds that of many third-party JS pickers
  • Mobile support is superior to most third-party JS pickers
  • Automatically uses local date and time preferences
  • KISS and don’t re-invent the wheel.

The downsides:

  • Minor browser inconsistencies
  • Lack of control in styling the picker menu
  • No inbuilt range support.

See also

Last modified:

  • text-input (Forms)