Date Time Input

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { DateTimeInput } from "@wizeworks/silicaui-react";

Props

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

import { useState } from "react";
import { DateTimeInput } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

export function DateTimeInputDemo() {
    const [when, setWhen] = useState<Date | null>(new Date(2026, 6, 8, 14, 30));

    return (
        <>
            <Section title="Real use · schedule a post (type or paste 'e.g. 7/8/2026 2:30 PM')">
                <DateTimeInput value={when} onValueChange={setWhen} color="primary" />
                <p className="mt-2 text-sm opacity-70">
                    {when ? when.toString() : "No date/time"}
                </p>
            </Section>

            <Section title="24h + seconds, min bound to now">
                <DateTimeInput hourCycle={24} showSeconds min={new Date()} />
            </Section>

            <Section title="Sizes / disabled">
                <Row>
                    <DateTimeInput size="sm" defaultValue={new Date(2026, 6, 8, 9, 0)} />
                    <DateTimeInput size="lg" defaultValue={new Date(2026, 6, 8, 9, 0)} />
                    <DateTimeInput disabled defaultValue={new Date(2026, 6, 8, 9, 0)} />
                </Row>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

The framework-neutral form of Date Time Input. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("DateTimeInput", undefined, { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "… …-primary" rather than passing a colour as a prop.

Takes children

no

Hydrated by

date-segment

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.