Date-time picker

SvDateTimePicker: a formatted input plus a portalled dropdown with DATE / TIME tabs (calendar + clock). Type a masked value or pick it; invalid input reverts. min/max, nullable, 12/24-hour, spin buttons. The SvGrid datetime cell editor, standalone in any SvGrid app.

A live, editable Svelte 5 component example from the SvGrid gallery (Date & Time). Read the SvGrid UI component docs for the full API.

What this example shows

SvDateTimePicker - a formatted text input plus a dropdown that composes the calendar and time picker behind DATE / TIME tabs. Type a value or pick it; the dropdown portals to <body> so it is never clipped. This is the SvGrid `datetime` cell editor, usable standalone anywhere.

Imports, features and API used

Imports: @svgrid/grid

Source code (252-datetimepicker.svelte)

<script lang="ts">
  /**
   * SvDateTimePicker - a formatted text input plus a dropdown that composes the
   * calendar and time picker behind DATE / TIME tabs. Type a value or pick it;
   * the dropdown portals to <body> so it is never clipped. This is the SvGrid
   * `datetime` cell editor, usable standalone anywhere.
   */
  import { SvDateTimePicker } from '@svgrid/grid'

  let formatString = $state('yyyy-MM-dd HH:mm')
  let hourFormat = $state<'12-hour' | '24-hour'>('24-hour')
  let mode = $state<'both' | 'calendar' | 'time'>('both')
  let spin = $state(false)
  let value = $state<Date | null>(new Date(2026, 5, 7, 9, 30))

  const formats = ['yyyy-MM-dd HH:mm', 'dd-MMM-yy HH:mm:ss', 'MMMM d, yyyy h:mm tt', 'dd/MM/yyyy HH:mm']
</script>

<div class="wrap">
  <header>
    <h2>SvDateTimePicker</h2>
    <p>
      A formatted input backed by the date-format token engine, plus a portalled
      dropdown with <strong>DATE / TIME tabs</strong> (SvCalendar + SvTimePicker). Type any value in the
      mask or pick it. This is the SvGrid <strong>datetime cell editor</strong>, standalone here.
    </p>
  </header>

  <div class="controls">
    <label>Format mask
      <select bind:value={formatString}>
        {#each formats as f (f)}<option value={f}>{f}</option>{/each}
      </select>
    </label>
    <label>Clock
      <select bind:value={hourFormat}>
        <option value="24-hour">24-hour</option>
        <option value="12-hour">12-hour</option>
      </select>
    </label>
    <label>Dropdown
      <select bind:value={mode}>
        <option value="both">Date + Time</option>
        <option value="calendar">Calendar only</option>
        <option value="time">Time only</option>
      </select>
    </label>
    <label class="chk"><input type="checkbox" bind:checked={spin} /> Spin buttons</label>
  </div>

  <div class="stage">
    <SvDateTimePicker
      {value}
      {formatString}
      {hourFormat}
      dropDownDisplayMode={mode}
      spinButtons={spin}
      onChange={(v) => (value = v)}
    />
    <div class="readout">
      <span class="lbl">value</span>
      <code>{value ? value.toISOString() : 'null'}</code>
    </div>
  </div>

  <p class="tip">Try typing an out-of-mask value and tabbing away - it reverts to the last valid value. The dropdown escapes any scroll container.</p>
</div>

<style>
  .wrap { padding: 20px; max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13.5px; line-height: 1.5; max-width: 620px; }
  strong { color: var(--sg-fg, #0f172a); }
  .controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
  .controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--sg-muted, #64748b); }
  .controls label.chk { flex-direction: row; align-items: center; gap: 6px; }
  .controls select { padding: 5px 8px; border: 1px solid var(--sg-border, #cbd5e1); border-radius: 7px; background: var(--sg-input-bg, #fff); color: inherit; font: inherit; font-size: 13px; }
  .stage { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
  .readout { display: flex; flex-direction: column; gap: 3px; }
  .readout .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sg-muted, #94a3b8); }
  .readout code { font-size: 13px; background: var(--sg-row-hover-bg, #eef2ff); padding: 4px 8px; border-radius: 6px; }
  .tip { margin: 0; font-size: 12px; color: var(--sg-muted, #94a3b8); line-height: 1.5; }
</style>

View this example on GitHub

More Date & Time examples

Calendar - SvCalendar: a themeable month/year/decade calendar with single / range / week / multi selection, min-max, restricted + important dates and week numbers. The same component SvGrid mounts to edit a date cell - and usable standalone in any SvGrid app.
Time picker - SvTimePicker: an analog clock-dial picker with 12/24-hour, minute snapping and hour to minute auto-switch. Drag the hand or click a number. The SvGrid time cell editor, usable standalone in any SvGrid app.
Date-range input - SvDateRangeInput: a compact start/end field that opens a two-month range calendar with one-click presets (Today, Last 7 days, ...). Composes the same headless range engine as SvCalendar, and carries the shared editor contract - label, hint, error validation, dir (RTL) and localizable messages.
Calendar - range + presets - SvCalendar as a date-range picker: selectionMode="range" with a one-click presets rail (Today, Last 7 days, This month, Year to date...), animated month navigation and mouse-wheel scrolling. Presets resolve relative to today. Same component, no extra dependency.
Calendar - date of birth - SvCalendar as a date-of-birth picker: single selection with max clamped to today so future dates are blocked, opening on the decade (year) grid for fewer clicks to a birth year, with a live age readout. Same component SvGrid mounts to edit a date cell.

Date-time picker

What this example shows

Imports, features and API used

Source code (252-datetimepicker.svelte)

Related documentation

Related articles

More Date & Time examples