Date Time Picker

Live Editor

function DateTimePickerDemo() {
  return (
    <ThemeProvider>
      <DateTimePicker
        label="Start"
        open
        value="2026-03-15T14:00"
        format="24h"
        step={30}
        clearable
        allowInput
        showFooter
        onChange={(detail) => console.log(detail)}
      />
    </ThemeProvider>
  );
}

Result

Loading...

Key Props

value, defaultValue, open, defaultOpen, min, max, locale, translations, weekStart, size, bare, variant, step, format, disabled, readOnly, required, name, closeOnSelect, clearable, allowInput, mode, showFooter, label, hint, error, onInput, onChange, onValueChange, onOpen, onClose, onInvalid