Sprix logo

Date Picker

A calendar input for single dates and date ranges.

The Date Picker Component

Basic Usage

Code Snippet

<script lang="ts">		import { DatePicker } from '$lib/components'; 		let value = $state(['2026-04-12']);	</script> 	<DatePicker bind:value={value} placeholder="Choose a publish date" />

Examples

Range Selection

Enable range mode when users need a start and end date together.