Skip to content
v0.2.10

DateTimeRangePicker

An ordered civil date/time range with four atomic form values.

Preview
Booking
Start
End

Use DateTimeRangePicker

DateTimeRangePicker is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood
Example import style
date-time-range-picker.tsxTSX
"use client";

import { FloodRoot, DateTimeRangePicker } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <DateTimeRangePicker label="Booking" startDateName="startDate" startTimeName="startTime" endDateName="endDate" endTimeName="endTime"
        defaultValue={{start:{date:"2026-10-27",time:"09:00"},end:{date:"2026-10-27",time:"18:00"}}} required />
    </FloodRoot>
  );
}

Design notes

  • Incomplete and reversed ranges do not contribute accepted values.
  • No timezone or timestamp inference. Server availability remains host owned.
  • Only range and endpoint headings are visible; individual field names remain accessible.

API reference

PropValuesDefault
labelstringRequired
hideLabelboolean—
valueDateTimeRangeValue—
defaultValueDateTimeRangeValue—
onValueChange(range: DateTimeRangeValue) => void—
startDateNamestring—
startTimeNamestring—
endDateNamestring—
endTimeNamestring—
startLabelstring—
endLabelstring—
startDateLabelstring—
startTimeLabelstring—
endDateLabelstring—
endTimeLabelstring—
formstring—
requiredboolean—
disabledboolean—
readOnlyboolean—
controlSize"sm" | "md" | "lg" | "xl"—
precision"minute" | "second"—
orderDateFieldProps["order"]—
localestring—
minDatestring—
maxDatestring—
stepnumber—
intervalnumber—
status"error" | "warning" | "success" | "info"—
descriptionstring—
incompleteMessagestring—
reversedMessagestring—
Native HTML propsOmit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange">Forwarded
View TypeScript source