Basic Usage

Simple date picker with live value display.

Birthday

Date of birth selection for user profiles.

Project Deadline

Set a due date for project milestones.

Due:

Event Scheduling

Pick a date for upcoming events.

In a Form

Date picker combined with other form inputs.

Date Range

Use two date pickers for start and end dates.

From: To:

Usage

startDate = ""// Basic date picker<DatePicker label="Start Date" bind={startDate} />// Display selected date{if startDate != ""}<Badge>{startDate}</Badge>{/if}// Date range with two pickers<DatePicker label="Start" bind={startDate} /><DatePicker label="End" bind={endDate} />

Props

PropTypeDefaultDescription
labeltext""Label text above picker
bindbinding-Two-way binding for selected date