DateTimePicker

Guidelines#

Use it for due dates, send times and meeting slots. The popover holds a Calendar above an inline time input and a clear action.

What you provide: value (an ISO instant or null), onChange(iso | null), id, placeholder, disabled. It shows and edits in the viewer's local time; store the ISO string you get back.

Honest precision: don't give far-off plans fake clock times; label projected times "projected".

Facts#

API#

TypeScript declarations emitted from src/components/ui/date-time-picker.tsx (the module also exports its other parts).

export interface DateTimePickerProps {
    id?: string;
    value: string | null;
    /** Called with a new ISO instant, or null when the field is cleared. */
    onChange(iso: string | null): void;
    placeholder?: string;
    disabled?: boolean;
    className?: string;
    /** Display format for the trigger button. @default "EEE d MMM yyyy, HH:mm" */
    displayFormat?: string;
}
export declare function DateTimePicker({ id, value, onChange, placeholder, disabled, className, displayFormat, }: DateTimePickerProps): any;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  var s = React.useState("2026-10-02T14:30:00.000Z");
  return h("div", { className: "flex flex-col gap-2 w-72" },
    h(DC.Label, { htmlFor: "dtp" }, "Due"),
    h(DC.DateTimePicker, { id: "dtp", value: s[0], onChange: s[1], placeholder: "Pick a date" }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Forms#