Dateinput

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download date-input -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { DateInput } from "@/components/ui/date-input";

const args = {
  "value": new Date(2026, 8, 22),
  "date": "2026-09-22",
} satisfies Partial<
  InstanceType<typeof DateInput> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <DateInput
    :model-value="new Date(args.date + 'T12:00:00')"
    @update:model-value="
      (next) => {
        if (next instanceof Date) args.date = next.toISOString().slice(0, 10);
      }
    "
  />
</template>

Props API

Behavior

• Validate complete dates before emitting.
• Arrow keys increment or decrement the active segment.
• Left and right navigation advances between segments.

Examples

Default

<script setup lang="ts">
import { ref } from "vue";
import { DateInput } from "@/components/ui/date-input";

const args = {

} satisfies Partial<
  InstanceType<typeof DateInput> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const value = ref(new Date());
</script>

<template>
  <DateInput v-model="value" />
</template>

With Value

<script setup lang="ts">
import { DateInput } from "@/components/ui/date-input";
import { reactive } from "vue";

const args = reactive(
  {
    "value": new Date(2026, 8, 22),
  } satisfies Partial<
    InstanceType<typeof DateInput> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown>,
);
</script>

<template>
  <DateInput v-model="args.value" />
</template>

Range

<script setup lang="ts">
import { DateInput } from "@/components/ui/date-input";
import { reactive } from "vue";

const args = reactive(
  {
    "value": { from: new Date(2026, 8, 1), to: new Date(2026, 8, 14) },
  } satisfies Partial<
    InstanceType<typeof DateInput> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown>,
);
</script>

<template>
  <div class="flex gap-2">
    <DateInput v-model="args.value" targeted-value="start" /><DateInput
      v-model="args.value"
      targeted-value="end"
    />
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.