Date input

import { FormGroup } from "@clawscale/react";
import { DateInput } from "@clawscale/react/datetime";

const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

const formatDate = (date: Date) => `${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`;

function parseDate(text: string) {
  const [day = "", month = "", year = ""] = text.trim().split(/\s+/);
  const date = new Date(Number(year), MONTHS.indexOf(month), Number(day));
  // Reject unknown months and days that overflow, such as 31 Sep.
  return MONTHS.includes(month) && date.getDate() === Number(day) ? date : false;
}

export default function DateInputBasic() {
  return (
    <FormGroup label="Retain audit logs until" labelFor="retain-until">
      <DateInput
        formatDate={formatDate}
        parseDate={parseDate}
        placeholder="D Mon YYYY"
        defaultValue="2026-12-31"
        inputProps={{ id: "retain-until" }}
      />
    </FormGroup>
  );
}

import { Code } from "@clawscale/react";
import { DateInput } from "@clawscale/react/datetime";
import { useState } from "react";

export default function DateInputTimePrecision() {
  const [value, setValue] = useState<string | null>("2026-08-17T02:30+00:00");
  return (
    <div style={{ display: "grid", gap: 12, justifyItems: "start" }}>
      <DateInput
        timePrecision="minute"
        showTimezoneSelect
        defaultTimezone="Etc/UTC"
        value={value}
        onChange={setValue}
      />
      <Code>value: {JSON.stringify(value)}</Code>
    </div>
  );
}

import { DateInput } from "@clawscale/react/datetime";

export default function DateInputShortcuts() {
  return <DateInput shortcuts defaultValue="2026-08-17" />;
}

import { Button, ButtonGroup, Code } from "@clawscale/react";
import { DateInput } from "@clawscale/react/datetime";
import { useState } from "react";

export default function DateInputControlled() {
  const [value, setValue] = useState<string | null>("2026-08-17");
  return (
    <div style={{ display: "grid", gap: 12, justifyItems: "start" }}>
      <DateInput value={value} onChange={setValue} />
      <ButtonGroup>
        <Button text="Release cut" onClick={() => setValue("2026-08-17")} />
        <Button text="General availability" onClick={() => setValue("2026-08-24")} />
        <Button text="Clear" onClick={() => setValue(null)} />
      </ButtonGroup>
      <Code>value: {JSON.stringify(value)}</Code>
    </div>
  );
}