DateTimeInput

A smart date and time picker with natural language support in smrt mode. Users can speak dates like "next Tuesday at 3pm" and the component parses them automatically using chrono-node.

Installation

typescript

import { DateTimeInput } from '@happyvertical/smrt-svelte';

Basic Usage

A date and time picker with native browser controls in standard mode.

Appointment Date & Time

svelte

<script lang="ts">
  let value = $state('');
</script>

<DateTimeInput
  name="appointment"
  label="Appointment Date & Time"
  bind:value
/>

Date Only

Set includeTime=false for a date-only picker.

Date of Birth

svelte

<DateTimeInput
  name="birthdate"
  label="Date of Birth"
  includeTime={false}
  placeholder="e.g., March 15, 1990"
  bind:value
/>

With Default Value

Set an initial value in ISO format (YYYY-MM-DDTHH:mm for datetime, YYYY-MM-DD for date).

Meeting Time

svelte

<DateTimeInput
  name="meeting"
  label="Meeting Time"
  value="2025-03-15T14:30"
/>

Required Field

Add required to mark the field as required.

Deadline *

svelte

<DateTimeInput
  name="deadline"
  label="Deadline"
  required
/>

Disabled State

Use disabled to prevent user interaction.

Locked Date

svelte

<DateTimeInput
  name="locked"
  label="Locked Date"
  value="2025-01-01T00:00"
  disabled
/>

With Description

Add a description for additional context.

Event Start

svelte

<DateTimeInput
  name="event"
  label="Event Start"
  description="When should the event begin?"
/>

Natural Language Input (smrt Mode)

In smrt mode, users can speak natural language dates. The component uses chrono-node to parse phrases like:

"next Tuesday at 3pm"
"tomorrow morning"
"March 15th 2025"
"in two weeks"
"last Friday"

svelte

<!-- In smrt mode, users can hold the mic and say natural language dates -->
<DateTimeInput
  name="flexible"
  label="Flexible Date"
  placeholder="Say a date like 'next Tuesday at 3pm'"
  description="Date and time for the appointment"
/>

Interactive Example

Select a date and time to see the ISO value:

Pick a date and time

ISO Value: (none)

svelte

<script lang="ts">
  let value = $state('');
</script>

<DateTimeInput
  name="interactive"
  label="Pick a date and time"
  bind:value
/>
<p>ISO Value: {value || '(none)'}</p>

Props

Prop	Type	Default	Description
`name` *	`string`	-	Field name for form submission
`label`	`string`	`undefined`	Field label displayed above the input
`description`	`string`	`undefined`	Description text for LLM field extraction
`includeTime`	`boolean`	`true`	Include time picker (false for date-only)
`placeholder`	`string`	`'e.g., next Tuesday at 3pm'`	Placeholder text shown when empty
`value`	`string`	`''`	Current value in ISO format (bindable)
`disabled`	`boolean`	`false`	Disables the input
`required`	`boolean`	`false`	Marks field as required
`onchange`	`(value: string) => void`	`undefined`	Callback when value changes

TypeScript

typescript

import { DateTimeInput } from '@happyvertical/smrt-svelte';

// Props interface
interface Props {
  name: string;
  label?: string;
  description?: string;
  includeTime?: boolean;
  placeholder?: string;
  value?: string; // ISO format: YYYY-MM-DDTHH:mm or YYYY-MM-DD
  disabled?: boolean;
  required?: boolean;
  onchange?: (value: string) => void;
}

Value Format

The component uses ISO date format:

With time: 2025-03-15T14:30 (YYYY-MM-DDTHH:mm)
Date only: 2025-03-15 (YYYY-MM-DD)

The display value is automatically formatted to the user's locale for readability.