Date Range Time Picker

Live Editor

function DateRangeTimePickerDemo() {
  return (
    <ThemeProvider>
      <DateRangeTimePicker
        label="Maintenance window"
        value='{"start":"2026-03-15T09:00","end":"2026-03-15T12:00"}'
        step={15}
        clearable
        allowPartial
        onValueChange={(value) => console.log(value)}
      />
    </ThemeProvider>
  );
}

Result

Loading...

Key Props

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