Date Field

"use client";

import { DateField } from "@/siteplane/components/date-field";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/siteplane/components/field";

export default function Example() {
  return (
    <Field className="w-full max-w-sm">
      <FieldLabel>Invoice date</FieldLabel>
      <DateField defaultValue={new Date(2026, 9, 1)} />
      <FieldDescription>
        Printed on the invoice and used to calculate the due date.
      </FieldDescription>
    </Field>
  );
}

"use client";

import { DateField } from "@/siteplane/components/date-field";
import { useState } from "react";

export default function Example() {
  const [value, setValue] = useState<Date | null>(new Date(2026, 8, 7));
  return (
    <DateField
      aria-label="Meeting date"
      value={value}
      onValueChange={(next) => setValue(next ?? null)}
    />
  );
}

"use client";

import { DateField } from "@/siteplane/components/date-field";
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/siteplane/components/field";
import { useEffect, useState } from "react";

export default function Example() {
  // Read today in the browser once the example mounts. A page rendered on a
  // server or at build time would otherwise keep the day it was rendered.
  const [today, setToday] = useState<Date>();
  useEffect(() => setToday(new Date()), []);
  return (
    <Field className="w-full max-w-sm">
      <FieldLabel>Delivery date</FieldLabel>
      <DateField
        calendarProps={{
          disabled: [{ before: today }, { dayOfWeek: [0, 6] }],
        }}
      />
      <FieldDescription>We deliver Monday to Friday.</FieldDescription>
      <FieldError />
    </Field>
  );
}

"use client";

import { DateField } from "@/siteplane/components/date-field";
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/siteplane/components/field";

export default function Example() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <Field disabled>
        <FieldLabel>Start date</FieldLabel>
        <DateField defaultValue={new Date(2026, 9, 5)} />
      </Field>
      <Field>
        <FieldLabel>Contract start</FieldLabel>
        <DateField defaultValue={new Date(2026, 0, 1)} readOnly />
        <FieldDescription>Set by your workspace admin.</FieldDescription>
      </Field>
      <Field invalid>
        <FieldLabel>End date</FieldLabel>
        <DateField />
        <FieldError match={true}>Enter an end date.</FieldError>
      </Field>
    </div>
  );
}

"use client";

import { Button } from "@/siteplane/components/button";
import { DateField } from "@/siteplane/components/date-field";
import { Field, FieldError, FieldLabel } from "@/siteplane/components/field";
import { Form } from "@/siteplane/components/form";

export default function Example() {
  return (
    <Form
      className="grid w-full max-w-sm gap-4"
      onSubmit={(event) => {
        event.preventDefault();
      }}
    >
      <Field>
        <FieldLabel>Start date</FieldLabel>
        <DateField
          className="w-full"
          defaultValue={new Date(2026, 9, 5)}
          name="startDate"
          required
        />
        <FieldError />
      </Field>
      <div className="flex gap-2">
        <Button type="submit">Submit</Button>
        <Button type="reset" variant="outline">
          Reset
        </Button>
      </div>
    </Form>
  );
}

"use client";

import { DateField } from "@/siteplane/components/date-field";
import { Field, FieldLabel } from "@/siteplane/components/field";

export default function Example() {
  return (
    <Field className="w-full max-w-sm">
      <FieldLabel>Date of birth</FieldLabel>
      <DateField iconMode="decorative-start" />
    </Field>
  );
}