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.

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

About this example

SvCalendar as a Svelte 5 date-of-birth picker: single selection with max clamped to today so future dates are blocked, and displayMode='decade' so it opens on the year grid for fewer clicks to a birth year, with a footer and a live age readout beside it. It is the same component SvGrid mounts to edit a date cell, in under fifty lines.

SvCalendar as a date-of-birth picker: single selection, max clamped to today so future dates can't be chosen, and displayMode="decade" so it opens on the year grid (fewer clicks to reach a birth year). Same component SvGrid mounts to edit a date cell.

Imports, features and API used

Imports: @svgrid/grid

Frequently asked questions

How do I start on the year grid?

Set displayMode='decade'. The calendar opens on a grid of years; picking one goes to the months of that year, then to the days.

How are future dates blocked?

Pass max={today}. Days after it render disabled and the year and month grids stop at the current one.

How is the age computed?

A $derived subtracts the picked date from today, adjusting for whether the birthday has passed this year, and prints the result next to the calendar.

Source code (260-calendar-birthday.svelte)

<script lang="ts">
  /**
   * SvCalendar as a date-of-birth picker: single selection, `max` clamped to
   * today so future dates can't be chosen, and `displayMode="decade"` so it
   * opens on the year grid (fewer clicks to reach a birth year). Same component
   * SvGrid mounts to edit a date cell.
   */
  import { SvCalendar } from '@svgrid/grid'

  let value = $state<Date[]>([])
  const today = new Date()

  const fmt = new Intl.DateTimeFormat(undefined, { dateStyle: 'long' })
  const age = $derived.by(() => {
    const d = value[0]
    if (!d) return null
    let a = today.getFullYear() - d.getFullYear()
    const beforeBirthday =
      today.getMonth() < d.getMonth() ||
      (today.getMonth() === d.getMonth() && today.getDate() < d.getDate())
    if (beforeBirthday) a -= 1
    return a
  })
</script>

<div class="wrap">
  <SvCalendar
    {value}
    selectionMode="one"
    max={today}
    displayMode="decade"
    footer
    onChange={(dates) => (value = dates)}
  />

  <p class="out">
    {#if value[0]}
      Born <strong>{fmt.format(value[0])}</strong> - {age} years old
    {:else}
      Pick a date of birth (future dates are blocked)
    {/if}
  </p>
</div>

<style>
  .wrap { padding: 20px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
  .out { margin: 0; font-size: 13.5px; color: var(--sg-muted, #64748b); }
  .out strong { color: var(--sg-fg, #0f172a); }
</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-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.
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.