Input Datetime

A segmented date / time input. Each unit — year, month, day, hour, minute, AM/PM — is its own focusable segment; separators are static, and the container shows a single focus ring via :focus-within. Type digits to fill a segment (it auto-advances when no further digit fits), use ↑/↓ to step a value (stepping an empty segment starts from the current date/time), and

←/→ to move between segments. Date segment order and separators follow the locale.

One component covers three shapes via granularity: "date" (default), "time", and "datetime". Set range for a start/end pair. The time portion follows the locale’s 12/24-hour cycle unless you force it with is24Hour.

The value is a Date (or a { start, end } DateRange when range is set), exposed as a bindable value + onChange with defaultValue for uncontrolled use, and serialized into hidden input(s) for native form submission — YYYY-MM-DD for date, HH:MM for time, YYYY-MM-DDTHH:MM for datetime.

Opt into a calendar picker with calendar: it adds a trailing calendar-icon button (joined to the field with a controls Group) that opens a date-picker popover, so the same field supports both typing and point-and-click selection.

Date

AstroReactSvelteVue

PreviewCode

MMDDYYYY

---
import InputDatetime from "../InputDatetime.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <InputDatetime id="astro-demo-input-datetime-default" />
</div>

MMDDYYYY

value: (null)

import { useState } from "react";
import { InputDatetime } from "../InputDatetime";
import { stack } from "@pindoba/styled-system/patterns";

export default function DefaultDemo() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <div className={stack({ gap: "md" })}>
      <InputDatetime
        value={value}
        onChange={(v) => setValue(v instanceof Date ? v : null)}
      />
      <p style={{ fontFamily: "monospace", fontSize: "0.75rem", opacity: 0.7 }}>
        value: {value ? value.toISOString().slice(0, 10) : "(null)"}
      </p>
    </div>
  );
}

MMDDYYYY

value: (null)

<script lang="ts">
  import InputDatetime from "../input-datetime.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let value = $state<Date | null>(null);
</script>

<div class={stack({ gap: "md" })}>
  <InputDatetime bind:value />
  <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
    value: {value ? value.toISOString().slice(0, 10) : "(null)"}
  </p>
</div>

MMDDYYYY

value: (null)

<script setup lang="ts">
import { ref } from "vue";
import { InputDatetime } from "@pindoba/vue-input-datetime";
import type { DateRange } from "@pindoba/core-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const value = ref<Date | null>(null);
const onChange = (v: Date | null | DateRange) => {
  value.value = v instanceof Date ? v : null;
};
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <InputDatetime :value="value" :onChange="onChange" />
    <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7">
      value: {{ value ? value.toISOString().slice(0, 10) : "(null)" }}
    </p>
  </div>
</template>

Time

granularity="time" renders hour + minute, plus an AM/PM segment in 12-hour mode. is24Hour forces the 24-hour clock.

AstroReactSvelteVue

PreviewCode

12-hour (AM/PM)

hhmm--

24-hour

HHmm

---
import InputDatetime from "../InputDatetime.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <label class={stack({ gap: "2xs" })}>
    <span style="font-size: 0.75rem; opacity: 0.7;">12-hour (AM/PM)</span>
    <InputDatetime
      id="astro-demo-time-12"
      granularity="time"
      fullWidth={false}
    />
  </label>
  <label class={stack({ gap: "2xs" })}>
    <span style="font-size: 0.75rem; opacity: 0.7;">24-hour</span>
    <InputDatetime
      id="astro-demo-time-24"
      granularity="time"
      is24Hour
      fullWidth={false}
    />
  </label>
</div>

12-hour (AM/PM)

hhmm--

24-hour

HHmm

value: (null)

import { useState } from "react";
import { InputDatetime } from "../InputDatetime";
import { stack } from "@pindoba/styled-system/patterns";

const pad2 = (n: number) => (n < 10 ? `0${n}` : `${n}`);
const hhmm = (d: Date | null) =>
  d ? `${pad2(d.getHours())}:${pad2(d.getMinutes())}` : "(null)";

export default function TimeDemo() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <div className={stack({ gap: "md" })}>
      <label className={stack({ gap: "2xs" })}>
        <span style={{ fontSize: "0.75rem", opacity: 0.7 }}>
          12-hour (AM/PM)
        </span>
        <InputDatetime
          granularity="time"
          fullWidth={false}
          value={value}
          onChange={(v) => setValue(v instanceof Date ? v : null)}
        />
      </label>
      <label className={stack({ gap: "2xs" })}>
        <span style={{ fontSize: "0.75rem", opacity: 0.7 }}>24-hour</span>
        <InputDatetime granularity="time" is24Hour fullWidth={false} />
      </label>
      <p style={{ fontFamily: "monospace", fontSize: "0.75rem", opacity: 0.7 }}>
        value: {hhmm(value)}
      </p>
    </div>
  );
}

12-hour (AM/PM)

hhmm--

24-hour

HHmm

value: (null)

<script lang="ts">
  import InputDatetime from "../input-datetime.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let value = $state<Date | null>(null);

  const hhmm = (d: Date | null) =>
    d
      ? `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`
      : "(null)";
</script>

<div class={stack({ gap: "md" })}>
  <label class={stack({ gap: "2xs" })}>
    <span style="font-size: 0.75rem; opacity: 0.7;">12-hour (AM/PM)</span>
    <InputDatetime granularity="time" fullWidth={false} bind:value />
  </label>
  <label class={stack({ gap: "2xs" })}>
    <span style="font-size: 0.75rem; opacity: 0.7;">24-hour</span>
    <InputDatetime granularity="time" is24Hour fullWidth={false} />
  </label>
  <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
    value: {hhmm(value)}
  </p>
</div>

12-hour (AM/PM)

hhmm--

24-hour

HHmm

value: (null)

<script setup lang="ts">
import { ref } from "vue";
import { InputDatetime } from "@pindoba/vue-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const value = ref<Date | null>(null);
const onChange = (v: unknown) => {
  value.value = v instanceof Date ? v : null;
};
const pad2 = (n: number) => (n < 10 ? `0${n}` : `${n}`);
const hhmm = (d: Date | null) =>
  d ? `${pad2(d.getHours())}:${pad2(d.getMinutes())}` : "(null)";
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <label :class="stack({ gap: '2xs' })">
      <span style="font-size: 0.75rem; opacity: 0.7">12-hour (AM/PM)</span>
      <InputDatetime
        granularity="time"
        :fullWidth="false"
        :value="value"
        :onChange="onChange"
      />
    </label>
    <label :class="stack({ gap: '2xs' })">
      <span style="font-size: 0.75rem; opacity: 0.7">24-hour</span>
      <InputDatetime granularity="time" is24Hour :fullWidth="false" />
    </label>
    <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7">
      value: {{ hhmm(value) }}
    </p>
  </div>
</template>

Datetime

granularity="datetime" composes the date and time segments into one input.

AstroReactSvelteVue

PreviewCode

MMDDYYYYhhmm--

---
import InputDatetime from "../InputDatetime.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <InputDatetime id="astro-demo-datetime" granularity="datetime" />
</div>

MMDDYYYYhhmm--

value: (null)

import { useState } from "react";
import { InputDatetime } from "../InputDatetime";
import { stack } from "@pindoba/styled-system/patterns";

export default function DatetimeDemo() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <div className={stack({ gap: "md" })}>
      <InputDatetime
        granularity="datetime"
        value={value}
        onChange={(v) => setValue(v instanceof Date ? v : null)}
      />
      <p style={{ fontFamily: "monospace", fontSize: "0.75rem", opacity: 0.7 }}>
        value: {value ? value.toISOString().slice(0, 16) : "(null)"}
      </p>
    </div>
  );
}

MMDDYYYYhhmm--

value: (null)

<script lang="ts">
  import InputDatetime from "../input-datetime.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let value = $state<Date | null>(null);
</script>

<div class={stack({ gap: "md" })}>
  <InputDatetime granularity="datetime" bind:value />
  <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
    value: {value ? value.toISOString().slice(0, 16) : "(null)"}
  </p>
</div>

MMDDYYYYhhmm--

value: (null)

<script setup lang="ts">
import { ref } from "vue";
import { InputDatetime } from "@pindoba/vue-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const value = ref<Date | null>(null);
const onChange = (v: unknown) => {
  value.value = v instanceof Date ? v : null;
};
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <InputDatetime granularity="datetime" :value="value" :onChange="onChange" />
    <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7">
      value: {{ value ? value.toISOString().slice(0, 16) : "(null)" }}
    </p>
  </div>
</template>

Calendar

calendar adds a trailing calendar-icon trigger that opens a date-picker popover. The calendar selects the date part; for granularity="datetime" the time stays typed in the segments (a missing time defaults to 00:00 on the first pick). It is shown for granularity "date" and "datetime", and for ranges — but never for "time" (a clock has no calendar). Picking a day fills the field and closes the popover; typing keeps the open calendar in sync, navigating to and highlighting the typed date.

AstroReactSvelteVue

PreviewCode

MMDDYYYY

DayMonthYear

August 2026

S	M	T	W	T	F	S

---
import InputDatetime from "../InputDatetime.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <InputDatetime id="astro-demo-input-datetime-calendar" calendar />
</div>

MMDDYYYY

value: (null)

import { useState } from "react";
import { InputDatetime } from "../InputDatetime";
import { stack } from "@pindoba/styled-system/patterns";

export default function CalendarDemo() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <div className={stack({ gap: "md" })}>
      <InputDatetime
        calendar
        value={value}
        onChange={(v) => setValue(v instanceof Date ? v : null)}
      />
      <p style={{ fontFamily: "monospace", fontSize: "0.75rem", opacity: 0.7 }}>
        value: {value ? value.toISOString().slice(0, 10) : "(null)"}
      </p>
    </div>
  );
}

MMDDYYYY

value: (null)

<script lang="ts">
  import InputDatetime from "../input-datetime.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let value = $state<Date | null>(null);
</script>

<div class={stack({ gap: "md" })}>
  <InputDatetime calendar bind:value />
  <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
    value: {value ? value.toISOString().slice(0, 10) : "(null)"}
  </p>
</div>

MMDDYYYY

value: (null)

<script setup lang="ts">
import { ref } from "vue";
import { InputDatetime } from "@pindoba/vue-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const value = ref<Date | null>(null);
const onChange = (v: unknown) => {
  value.value = v instanceof Date ? v : null;
};
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <InputDatetime calendar :value="value" :onChange="onChange" />
    <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7">
      value: {{ value ? value.toISOString().slice(0, 10) : "(null)" }}
    </p>
  </div>
</template>

Calendar range

Combine calendar with range for a two-click range picker. The first click sets the start; the second commits { start, end } and closes the popover.

AstroReactSvelteVue

PreviewCode

MMDDYYYYMMDDYYYY

---
import InputDatetime from "../InputDatetime.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <InputDatetime id="astro-demo-input-datetime-calendar-range" range calendar />
</div>

MMDDYYYYMMDDYYYY

(null) → (null)

import { useState } from "react";
import { InputDatetime } from "../InputDatetime";
import type { DateRange } from "@pindoba/core-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const iso = (d: Date | null) => (d ? d.toISOString().slice(0, 10) : "(null)");

export default function CalendarRangeDemo() {
  const [value, setValue] = useState<DateRange>({ start: null, end: null });

  return (
    <div className={stack({ gap: "md" })}>
      <InputDatetime
        range
        calendar
        value={value}
        onChange={(v) => {
          if (v && !(v instanceof Date)) setValue(v);
        }}
      />
      <p style={{ fontFamily: "monospace", fontSize: "0.75rem", opacity: 0.7 }}>
        {iso(value.start)} → {iso(value.end)}
      </p>
    </div>
  );
}

MMDDYYYYMMDDYYYY

(null) → (null)

<script lang="ts">
  import InputDatetime from "../input-datetime.svelte";
  import type { DateRange } from "@pindoba/core-input-datetime";
  import { stack } from "@pindoba/styled-system/patterns";

  let value = $state<DateRange>({ start: null, end: null });

  const iso = (d: Date | null) => (d ? d.toISOString().slice(0, 10) : "(null)");
</script>

<div class={stack({ gap: "md" })}>
  <InputDatetime range calendar bind:value />
  <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
    {iso(value.start)} → {iso(value.end)}
  </p>
</div>

MMDDYYYYMMDDYYYY

(null) → (null)

<script setup lang="ts">
import { ref } from "vue";
import { InputDatetime } from "@pindoba/vue-input-datetime";
import type { DateRange } from "@pindoba/core-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const value = ref<DateRange>({ start: null, end: null });
const onChange = (v: unknown) => {
  if (v && !(v instanceof Date)) value.value = v as DateRange;
};
const iso = (d: Date | null) => (d ? d.toISOString().slice(0, 10) : "(null)");
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <InputDatetime range calendar :value="value" :onChange="onChange" />
    <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7">
      {{ iso(value.start) }} → {{ iso(value.end) }}
    </p>
  </div>
</template>

Calendar with time

With granularity="datetime", the calendar only sets the date — the typed time of day is preserved (or defaults to 00:00 on the first pick). Type a time, pick a day from the calendar, and the time stays put.

AstroReactSvelteVue

PreviewCode

MMDDYYYYhhmm--

---
import InputDatetime from "../InputDatetime.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <InputDatetime
    id="astro-demo-input-datetime-calendar-datetime"
    calendar
    granularity="datetime"
  />
</div>

MMDDYYYYhhmm--

value: (null)

import { useState } from "react";
import { InputDatetime } from "../InputDatetime";
import { stack } from "@pindoba/styled-system/patterns";

export default function CalendarDatetimeDemo() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <div className={stack({ gap: "md" })}>
      <InputDatetime
        calendar
        granularity="datetime"
        value={value}
        onChange={(v) => setValue(v instanceof Date ? v : null)}
      />
      <p style={{ fontFamily: "monospace", fontSize: "0.75rem", opacity: 0.7 }}>
        value: {value ? value.toISOString().slice(0, 16) : "(null)"}
      </p>
    </div>
  );
}

MMDDYYYYhhmm--

value: (null)

<script lang="ts">
  import InputDatetime from "../input-datetime.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let value = $state<Date | null>(null);
</script>

<div class={stack({ gap: "md" })}>
  <InputDatetime calendar granularity="datetime" bind:value />
  <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
    value: {value ? value.toISOString().slice(0, 16) : "(null)"}
  </p>
</div>

MMDDYYYYhhmm--

value: (null)

<script setup lang="ts">
import { ref } from "vue";
import { InputDatetime } from "@pindoba/vue-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const value = ref<Date | null>(null);
const onChange = (v: unknown) => {
  value.value = v instanceof Date ? v : null;
};
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <InputDatetime
      calendar
      granularity="datetime"
      :value="value"
      :onChange="onChange"
    />
    <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7">
      value: {{ value ? value.toISOString().slice(0, 16) : "(null)" }}
    </p>
  </div>
</template>

Range

range renders two groups joined by a separator (configurable via rangeSeparator). The value becomes { start, end }, and each side’s day clamps to its own month/year.

AstroReactSvelteVue

PreviewCode

MMDDYYYYMMDDYYYY

---
import InputDatetime from "../InputDatetime.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <InputDatetime id="astro-demo-range" range />
</div>

MMDDYYYYMMDDYYYY

(null) → (null)

import { useState } from "react";
import { InputDatetime } from "../InputDatetime";
import type { DateRange } from "@pindoba/core-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const iso = (d: Date | null) => (d ? d.toISOString().slice(0, 10) : "(null)");

export default function RangeDemo() {
  const [value, setValue] = useState<DateRange>({ start: null, end: null });

  return (
    <div className={stack({ gap: "md" })}>
      <InputDatetime
        range
        value={value}
        onChange={(v) => {
          if (v && !(v instanceof Date)) setValue(v);
        }}
      />
      <p style={{ fontFamily: "monospace", fontSize: "0.75rem", opacity: 0.7 }}>
        {iso(value.start)} → {iso(value.end)}
      </p>
    </div>
  );
}

MMDDYYYYMMDDYYYY

(null) → (null)

<script lang="ts">
  import InputDatetime from "../input-datetime.svelte";
  import type { DateRange } from "@pindoba/core-input-datetime";
  import { stack } from "@pindoba/styled-system/patterns";

  let value = $state<DateRange>({ start: null, end: null });

  const iso = (d: Date | null) => (d ? d.toISOString().slice(0, 10) : "(null)");
</script>

<div class={stack({ gap: "md" })}>
  <InputDatetime range bind:value />
  <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
    {iso(value.start)} → {iso(value.end)}
  </p>
</div>

MMDDYYYYMMDDYYYY

(null) → (null)

<script setup lang="ts">
import { ref } from "vue";
import { InputDatetime } from "@pindoba/vue-input-datetime";
import type { DateRange } from "@pindoba/core-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const value = ref<DateRange>({ start: null, end: null });
const onChange = (v: unknown) => {
  if (v && !(v instanceof Date)) value.value = v as DateRange;
};
const iso = (d: Date | null) => (d ? d.toISOString().slice(0, 10) : "(null)");
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <InputDatetime range :value="value" :onChange="onChange" />
    <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7">
      {{ iso(value.start) }} → {{ iso(value.end) }}
    </p>
  </div>
</template>

Formats

Date segment order and separators are derived from the locale via the platform’s Intl short-date pattern. Use separator to override the date-part separator.

AstroReactSvelteVue

PreviewCode

en-US — MM/DD/YYYY

05142026

en-GB — DD/MM/YYYY

14052026

pt-BR — DD/MM/YYYY

14052026

---
import InputDatetime from "../InputDatetime.astro";
import { stack } from "@pindoba/styled-system/patterns";

const seed = new Date(2026, 4, 14);
---

<div class={stack({ gap: "md" })}>
  <label class={stack({ gap: "2xs" })}>
    <span style="font-size: 0.75rem; opacity: 0.7;">en-US — MM/DD/YYYY</span>
    <InputDatetime
      id="astro-demo-date-us"
      locale="en-US"
      value={seed}
      fullWidth={false}
    />
  </label>
  <label class={stack({ gap: "2xs" })}>
    <span style="font-size: 0.75rem; opacity: 0.7;">en-GB — DD/MM/YYYY</span>
    <InputDatetime
      id="astro-demo-date-gb"
      locale="en-GB"
      value={seed}
      fullWidth={false}
    />
  </label>
  <label class={stack({ gap: "2xs" })}>
    <span style="font-size: 0.75rem; opacity: 0.7;">pt-BR — DD/MM/YYYY</span>
    <InputDatetime
      id="astro-demo-date-br"
      locale="pt-BR"
      value={seed}
      fullWidth={false}
    />
  </label>
</div>

en-US — MM/DD/YYYY

05142026

en-GB — DD/MM/YYYY

14052026

pt-BR — DD/MM/YYYY

14052026

import { InputDatetime } from "../InputDatetime";
import { stack } from "@pindoba/styled-system/patterns";

const seed = new Date(2026, 4, 14);

export default function FormatsDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      <label className={stack({ gap: "2xs" })}>
        <span style={{ fontSize: "0.75rem", opacity: 0.7 }}>
          en-US — MM/DD/YYYY
        </span>
        <InputDatetime locale="en-US" defaultValue={seed} fullWidth={false} />
      </label>
      <label className={stack({ gap: "2xs" })}>
        <span style={{ fontSize: "0.75rem", opacity: 0.7 }}>
          en-GB — DD/MM/YYYY
        </span>
        <InputDatetime locale="en-GB" defaultValue={seed} fullWidth={false} />
      </label>
      <label className={stack({ gap: "2xs" })}>
        <span style={{ fontSize: "0.75rem", opacity: 0.7 }}>
          pt-BR — DD/MM/YYYY
        </span>
        <InputDatetime locale="pt-BR" defaultValue={seed} fullWidth={false} />
      </label>
    </div>
  );
}

en-US — MM/DD/YYYY

05142026

en-GB — DD/MM/YYYY

14052026

pt-BR — DD/MM/YYYY

14052026

<script lang="ts">
  import InputDatetime from "../input-datetime.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  const seed = new Date(2026, 4, 14);
</script>

<div class={stack({ gap: "md" })}>
  <label class={stack({ gap: "2xs" })}>
    <span style="font-size: 0.75rem; opacity: 0.7;">en-US — MM/DD/YYYY</span>
    <InputDatetime locale="en-US" defaultValue={seed} fullWidth={false} />
  </label>
  <label class={stack({ gap: "2xs" })}>
    <span style="font-size: 0.75rem; opacity: 0.7;">en-GB — DD/MM/YYYY</span>
    <InputDatetime locale="en-GB" defaultValue={seed} fullWidth={false} />
  </label>
  <label class={stack({ gap: "2xs" })}>
    <span style="font-size: 0.75rem; opacity: 0.7;">pt-BR — DD/MM/YYYY</span>
    <InputDatetime locale="pt-BR" defaultValue={seed} fullWidth={false} />
  </label>
</div>

en-US — MM/DD/YYYY

05142026

en-GB — DD/MM/YYYY

14052026

pt-BR — DD/MM/YYYY

14052026

<script setup lang="ts">
import { InputDatetime } from "@pindoba/vue-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const seed = new Date(2026, 4, 14);
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <label :class="stack({ gap: '2xs' })">
      <span style="font-size: 0.75rem; opacity: 0.7">en-US — MM/DD/YYYY</span>
      <InputDatetime locale="en-US" :defaultValue="seed" :fullWidth="false" />
    </label>
    <label :class="stack({ gap: '2xs' })">
      <span style="font-size: 0.75rem; opacity: 0.7">en-GB — DD/MM/YYYY</span>
      <InputDatetime locale="en-GB" :defaultValue="seed" :fullWidth="false" />
    </label>
    <label :class="stack({ gap: '2xs' })">
      <span style="font-size: 0.75rem; opacity: 0.7">pt-BR — DD/MM/YYYY</span>
      <InputDatetime locale="pt-BR" :defaultValue="seed" :fullWidth="false" />
    </label>
  </div>
</template>

Required

required surfaces an error when the field is left empty on blur — data-error flips the input to the danger palette and emits onErrorChange (Svelte) / pindoba:invalid (Astro).

AstroReactSvelteVue

PreviewCode

MMDDYYYY

---
import InputDatetime from "../InputDatetime.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <InputDatetime id="astro-demo-required" required />
</div>

MMDDYYYY

error: (none)

import { useState } from "react";
import { InputDatetime } from "../InputDatetime";
import type { InputDatetimeError } from "@pindoba/core-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

export default function RequiredDemo() {
  const [value, setValue] = useState<Date | null>(null);
  const [error, setError] = useState<InputDatetimeError | null>(null);

  return (
    <div className={stack({ gap: "md" })}>
      <InputDatetime
        required
        value={value}
        onChange={(v) => setValue(v instanceof Date ? v : null)}
        onErrorChange={setError}
      />
      <p style={{ fontFamily: "monospace", fontSize: "0.75rem", opacity: 0.7 }}>
        error: {error ?? "(none)"}
      </p>
    </div>
  );
}

MMDDYYYY

error: (none)

<script lang="ts">
  import InputDatetime from "../input-datetime.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import type { InputDatetimeError } from "@pindoba/core-input-datetime";

  let value = $state<Date | null>(null);
  let error = $state<InputDatetimeError | null>(null);
</script>

<div class={stack({ gap: "md" })}>
  <InputDatetime required bind:value bind:error />
  <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
    error: {error ?? "(none)"}
  </p>
</div>

MMDDYYYY

error: (none)

<script setup lang="ts">
import { ref } from "vue";
import { InputDatetime } from "@pindoba/vue-input-datetime";
import type { InputDatetimeError } from "@pindoba/core-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const value = ref<Date | null>(null);
const error = ref<InputDatetimeError | null>(null);
const onChange = (v: unknown) => {
  value.value = v instanceof Date ? v : null;
};
const onErrorChange = (e: InputDatetimeError | null) => {
  error.value = e;
};
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <InputDatetime
      required
      :value="value"
      :onChange="onChange"
      :onErrorChange="onErrorChange"
    />
    <p style="font-family: monospace; font-size: 0.75rem; opacity: 0.7">
      error: {{ error ?? "(none)" }}
    </p>
  </div>
</template>

Disabled

disabled greys the field, drops the segments out of the tab order, and ignores all editing — in both the Svelte and Astro (DOM-attach) paths.

AstroReactSvelteVue

PreviewCode

05142026

---
import InputDatetime from "../InputDatetime.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md" })}>
  <InputDatetime
    id="astro-demo-disabled"
    disabled
    value={new Date(2026, 4, 14)}
  />
</div>

05142026

import { InputDatetime } from "../InputDatetime";
import { stack } from "@pindoba/styled-system/patterns";

export default function DisabledDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      <InputDatetime disabled defaultValue={new Date(2026, 4, 14)} />
    </div>
  );
}

05142026

<script lang="ts">
  import InputDatetime from "../input-datetime.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md" })}>
  <InputDatetime disabled defaultValue={new Date(2026, 4, 14)} />
</div>

05142026

<script setup lang="ts">
import { InputDatetime } from "@pindoba/vue-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const seed = new Date(2026, 4, 14);
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <InputDatetime disabled :defaultValue="seed" />
  </div>
</template>

Form submission

The component renders hidden <input>(s), so it submits inside a native <form> like any other control — name is the field key (range adds ${name}-end).

AstroReactSvelteVue

PreviewCode

---
import InputDatetime from "../InputDatetime.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<form id="astro-demo-form" class={stack({ gap: "md" })}>
  <InputDatetime
    id="astro-demo-form-input"
    name="appointment"
    value={new Date(2026, 4, 14)}
  />
  <button
    type="submit"
    style="align-self: flex-start; padding: 0.25rem 0.75rem; font-size: 0.875rem;"
  >
    Submit
  </button>
  <p
    data-submitted
    style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;"
  >
    submitted: (nothing yet)
  </p>
</form>

<script>
  function boot() {
    document
      .querySelectorAll<HTMLFormElement>("#astro-demo-form")
      .forEach((form) => {
        if (form.dataset.bound) return;
        form.dataset.bound = "true";
        form.addEventListener("submit", (event) => {
          event.preventDefault();
          const data = new FormData(form);
          const out = form.querySelector("[data-submitted]");
          if (out) {
            out.textContent = `submitted: ${String(data.get("appointment") ?? "")}`;
          }
        });
      });
  }
  boot();
  document.addEventListener("astro:page-load", boot);
</script>

import { useState } from "react";
import { InputDatetime } from "../InputDatetime";
import { stack } from "@pindoba/styled-system/patterns";

export default function FormDemo() {
  const [submitted, setSubmitted] = useState("");

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setSubmitted(String(data.get("appointment") ?? ""));
  }

  return (
    <form className={stack({ gap: "md" })} onSubmit={handleSubmit}>
      <InputDatetime name="appointment" defaultValue={new Date(2026, 4, 14)} />
      <button
        type="submit"
        style={{
          alignSelf: "flex-start",
          padding: "0.25rem 0.75rem",
          fontSize: "0.875rem",
        }}
      >
        Submit
      </button>
      <p
        data-submitted
        style={{ fontFamily: "monospace", fontSize: "0.75rem", opacity: 0.7 }}
      >
        submitted: {submitted || "(nothing yet)"}
      </p>
    </form>
  );
}

<script lang="ts">
  import InputDatetime from "../input-datetime.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let submitted = $state("");

  function handleSubmit(event: SubmitEvent) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement)) return;
    const data = new FormData(form);
    submitted = String(data.get("appointment") ?? "");
  }
</script>

<form class={stack({ gap: "md" })} onsubmit={handleSubmit}>
  <InputDatetime name="appointment" defaultValue={new Date(2026, 4, 14)} />
  <button
    type="submit"
    style="align-self: flex-start; padding: 0.25rem 0.75rem; font-size: 0.875rem;"
  >
    Submit
  </button>
  <p
    data-submitted
    style="font-family: monospace; font-size: 0.75rem; opacity: 0.7;"
  >
    submitted: {submitted || "(nothing yet)"}
  </p>
</form>

<script setup lang="ts">
import { ref } from "vue";
import { InputDatetime } from "@pindoba/vue-input-datetime";
import { stack } from "@pindoba/styled-system/patterns";

const seed = new Date(2026, 4, 14);
const submitted = ref("");

function handleSubmit(event: Event) {
  event.preventDefault();
  const data = new FormData(event.currentTarget as HTMLFormElement);
  submitted.value = String(data.get("appointment") ?? "");
}
</script>

<template>
  <form :class="stack({ gap: 'md' })" @submit="handleSubmit">
    <InputDatetime name="appointment" :defaultValue="seed" />
    <button
      type="submit"
      style="
        align-self: flex-start;
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
      "
    >
      Submit
    </button>
    <p
      data-submitted
      style="font-family: monospace; font-size: 0.75rem; opacity: 0.7"
    >
      submitted: {{ submitted || "(nothing yet)" }}
    </p>
  </form>
</template>

#Date

#Time

#Datetime

#Calendar

#Calendar range

#Calendar with time

#Range

#Formats

#Required

#Disabled

#Form submission

Date

Time

Datetime

Calendar

Calendar range

Calendar with time

Range

Formats

Required

Disabled

Form submission