DateTimepicker

Bootstrap 5 DateTimepicker

DateTimepicker is a form that adds the function of selecting date and time.

Note: Read the API tab to find all available options and advanced customization

Basic example

Input with a modal for selecting a date and time.

Show code

Inline version

You can use inline version with inline prop.

Show code

Disabled

Use disabled property on DateTimepicker to give it a grayed out appearance and remove pointer events.

Show code

Default values

You can set default date and time with options datepickerOptions and timepickerOptions.

Show code

Invalid label

Add invalidLabel with specified value, to change the invalid label message.

Show code

Input toggle

Add inputToggle prop to the input element to enable toggling on input click.

Show code

Custom date and time options

Use datepickerOptions or timepickerOptions props to set custom options from our Datepicker and Timepicker components.

Datepicker options

Show code

Timepicker options

Show code