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>

Disabled DatePicker

For any reason you may think it’s useful, you can set disabled props to true to not interact with the component.

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-disabled"
    class="block mb-1 text-sm font-medium text-neutral-500"
  >
    <span>Disabled Date</span>
  </label>
  <DatePicker id="datepicker-disabled" name="datepicker-disabled" disabled />
</div>

Reset And Today Buttons DatePicker

For any reason you may think it’s useful, you can set disabled props to true to not interact with the component.

Copied !

---
import DatePicker from "$components/datepicker/DatePicker.astro";
---

<div class="container px-4 py-2 mx-auto md:py-10 w-[17rem]">
  <label
    for="reset-and-today-datepicker"
    class="block mb-1 text-sm font-medium text-neutral-500"
  >
    <span>Select Date</span>
  </label>
  <DatePicker
    id="reset-and-today-datepicker"
    name="reset-and-today-datepicker"
    @picked="console.log($event.detail)"
    showResetAndTodayButtons
  />
</div>

Different Date Formats

There are 11 different date formats. Down below are example for each one.

Copied !

---
import DatePicker from "$components/datepicker/DatePicker.astro";
import { DateFormatType } from "$common/types";
---

<div class="grid grid-cols-2 gap-8 w-full items-center justify-center px-4">
  {
    [
      "MMMM d, YYYY",
      "M d, YYYY",
      "MM-dd-YYYY",
      "dd-MM-YYYY",
      "YYYY-MM-dd",
      "MM/dd/YYYY",
      "dd/MM/YYYY",
      "YYYY/MM/dd",
      "D d M YYYY",
      "DDDD d M YYYY",
      "DDDD d MMMM YYYY",
    ].map((format: DateFormatType, index: number) => {
      return (
        <div class="py-2 mx-auto flex flex-col items-center w-full">
          <label
            for={`datepicker-format-${index + 1}`}
            class="block mb-1 text-sm font-medium text-neutral-500"
          >
            <span>Date Format: {format}</span>
          </label>
          <DatePicker
            id={`datepicker-format-${index + 1}`}
            name={`datepicker-format-${index + 1}`}
            date={new Date().toISOString()}
            x-on:picked="console.log($event.detail)"
            dateFormat={format}
            class="flex [&>*]:grow"
          />
        </div>
      );
    })
  }
</div>