Svelte Date Picker
The date components in SvGrid are the ones the grid itself mounts when you edit a date cell, which means they are built for keyboard use and awkward input before they are built to look good in a screenshot. They also work perfectly well on their own, in any form, with no grid in sight.
There are three of them: SvCalendar for picking days out of a month, year or decade view, SvDateTimePicker for a masked input with a calendar and clock dropdown, and SvDateRangeInput for a start and end pair.
Install
npm i @svgrid/gridFree and MIT-licensed in @svgrid/grid: no license key, no row cap, no watermark.
The code
<script lang="ts">
import { SvDateTimePicker, SvCalendar } from '@svgrid/grid'
let value = $state<Date | null>(new Date())
let day = $state<Date | null>(null)
</script>
<SvDateTimePicker {value} hourFormat={24} onChange={(v) => (value = v)} />
<SvCalendar value={day} selectionMode="single" weekNumbers onChange={(d) => (day = d)} />What you get
- No extra dependency - The calendar and the pickers are part of @svgrid/grid. No date library, no plugin, nothing else to install or keep updated.
- Selection modes - Single day, a range, a whole week or several unrelated days, with min and max bounds and restricted dates.
- Type or pick - The date-time input is masked, so a keyboard user can type a value and an invalid one reverts instead of silently becoming a wrong date.
- A real clock - The time tab is an analog dial with minute snapping and automatic hour-to-minute switching, plus optional spin buttons.
- Range presets - A presets rail for Today, Last 7 days, This month and Year to date, resolved relative to the current date.
- Also a cell editor - Set a column's editorType to date and the same component opens inside the grid, so a form and a table behave identically.
Live examples
- 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.
- 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.
- 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.
- Date-time picker - form fields - SvDateTimePicker in five real shapes on one form: date-only, time-only, date+time, 12-hour with spin buttons, and a min/max-constrained field. Masked inputs (type or pick), portalled dropdowns, animated calendars. The SvGrid datetime cell editor, standalone.
- 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.
Documentation
- SvDateTimePicker - A formatted text input plus a portalled dropdown with DATE / TIME tabs - type a masked value or pick it from a calendar and clock.
- SvCalendar - A themeable, accessible month / year / decade calendar with every selection mode - the date surface the whole date/time family is built on.
- SvDateRangeInput - A compact start/end field that opens a two-month range calendar with one-click presets (Today, Last 7 days, This month, ...). Emits an inclusive [start,…
Related articles
- A Date-Picker Cell Editor in SvGrid - How to make date columns editable with a real date picker in SvGrid - including display formatting, time zone handling, and validation that preserves user input.
Frequently asked questions
How do I add a date picker to a Svelte app?
Import SvDateTimePicker or SvCalendar from @svgrid/grid and bind a value. There is no separate package and no date library to add.
Can it pick a date range?
Yes. SvCalendar has a range selection mode with an optional presets rail, and SvDateRangeInput gives you a start and end field pair in one control.
Is the date picker free?
Yes. Every date and time component is MIT-licensed in @svgrid/grid, with no license key.
Does it work as a grid cell editor?
Yes, and that is where it came from. A column with editorType 'date' or 'datetime' opens the same component inline when the cell is edited.