Date Picker
Overview
DatePicker is a combination of TextInput in readonly state and Calendar component. It let you pick a date in the UI Calendar which will appeared once you click on the input.
This component has many features in one place. Letβs look at the example below.
Default DatePicker
There is an ui design by default. With slot props, you can implement your own.
Calendar component provides a select to choose month, an input for year, two navigations buttons for previous and next months and a list of days. Internally, a lot of things are made to simplify its usage. Notice that no value is set by default.
From outside, you can use @picked dispatch event props to listen to selected date.
Copied !
---
import DatePicker from "$components/datepicker/DatePicker.astro";
---
<div class="container px-4 py-2 mx-auto md:py-10 w-[17rem]">
<label
for="datepicker"
class="block mb-1 text-sm font-medium text-neutral-500"
>
<span>Select Date</span>
</label>
<DatePicker
id="datepicker"
name="datepicker"
@picked="console.log($event.detail)"
/>
</div>
Set DatePicker FullDate On Init
You can actually pass a date to the component as initial value and, itβs pretty easy.
Check these four examples below and see how you can set a date value to DatePicker.
Copied !
---
import DatePicker from "$components/datepicker/DatePicker.astro";
---
<div class="grid grid-cols-2 gap-8">
<div class="container py-2 mx-auto">
<label
for="datepicker-date-now"
class="block mb-1 text-sm font-medium text-neutral-500"
>
<span>Today Date</span>
</label>
<DatePicker
id="datepicker-date-now"
name="datepicker-date-now"
date={new Date().toDateString()}
@picked="console.log($event.detail)"
/>
</div>
<div class="container py-2 mx-auto">
<label
for="datepicker-random-date"
class="block mb-1 text-sm font-medium text-neutral-500"
>
<span>Date as 06/07/1990</span>
</label>
<DatePicker
id="datepicker-random-date"
name="datepicker-random-date"
date="06/07/1990"
@picked="console.log($event.detail)"
/>
</div>
<div class="container py-2 mx-auto">
<label
for="datepicker-random-date-2"
class="block mb-1 text-sm font-medium text-neutral-500"
>
<span>Date as new Date(2020, 4, 10)</span>
</label>
<DatePicker
id="datepicker-random-date-2"
name="datepicker-random-date-2"
date={new Date(2020, 4, 10).toDateString()}
@picked="console.log($event.detail)"
showResetAndTodayButtons
/>
</div>
<div class="container py-2 mx-auto">
<label
for="datepicker-random-date-3"
class="block mb-1 text-sm font-medium text-neutral-500"
>
<span>Set date with x-init</span>
</label>
<DatePicker
id="datepicker-random-date-3"
name="datepicker-random-date-3"
x-init="datePickerValue = new Date('1998-06-22').toDateString()"
@picked="console.log($event.detail)"
/>
</div>
</div>