/ datetime-field

DatetimeField

@kumiki/atelier/datetime-field

Layer 5 preview — styled DateTimeField with locale-aware segmented input.

Source

Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**

Attach to your own DOM

<script lang="ts">
  import { createDatetimeField } from '@kumiki/headless/datetime-field';
  const ctl = createDatetimeField({});
</script>

<div {@attach ctl.root}>
  <!-- your markup -->
</div>

Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.

Live preview

Compound usage

<script lang="ts">
  import { DatetimeField } from '@kumiki/components/datetime-field';
</script>

<DatetimeField.Root>
  <!-- subcomponents go here -->
</DatetimeField.Root>

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

Live preview

Live preview…

Install

pnpm add @kumiki/atelier

Segmented DateTime input

<script lang="ts">
  import { Tailwind as DateTimeField } from '@kumiki/atelier/datetime-field';
  import { type CalendarDateTime, now, getLocalTimeZone } from '@internationalized/date';

  let value = $state<CalendarDateTime | null>(
    now(getLocalTimeZone()) as unknown as CalendarDateTime,
  );
</script>

<DateTimeField.Root bind:value granularity="minute">
  <DateTimeField.Label>Starts at</DateTimeField.Label>
  <DateTimeField.DatePart />
  <DateTimeField.TimePart />
</DateTimeField.Root>

This component, layer by layer

Keyboard

Test discipline