Github
Docs
Date Picker

Date Picker

A component that allows users to select a date from a calendar.

Docs API Reference

Installation

npx shadcn-solid@latest add date-picker

Usage

import {
  DatePicker,
  DatePickerContent,
  DatePickerInput,
  DatePickerRangeText,
  DatePickerTable,
  DatePickerTableBody,
  DatePickerTableCell,
  DatePickerTableCellTrigger,
  DatePickerTableHead,
  DatePickerTableHeader,
  DatePickerTableRow,
  DatePickerView,
  DatePickerViewControl,
  DatePickerViewTrigger
} from "@/components/ui/date-picker";
<DatePicker>
  <DatePickerInput />
  <DatePickerContent>
    <DatePickerView view="day">
      {api => (
        <>
          <DatePickerViewControl>
            <DatePickerViewTrigger>
              <DatePickerRangeText />
            </DatePickerViewTrigger>
          </DatePickerViewControl>
          <DatePickerTable>
            <DatePickerTableHead>
              <DatePickerTableRow>
                <For each={api().weekDays}>
                  {weekDay => <DatePickerTableHeader>{weekDay.short}</DatePickerTableHeader>}
                </For>
              </DatePickerTableRow>
            </DatePickerTableHead>
            <DatePickerTableBody>
              <For each={api().weeks}>
                {week => (
                  <DatePickerTableRow>
                    <For each={week}>
                      {day => (
                        <DatePickerTableCell value={day}>
                          <DatePickerTableCellTrigger>{day.day}</DatePickerTableCellTrigger>
                        </DatePickerTableCell>
                      )}
                    </For>
                  </DatePickerTableRow>
                )}
              </For>
            </DatePickerTableBody>
          </DatePickerTable>
        </>
      )}
    </DatePickerView>
    <DatePickerView view="month">
      {api => (
        <>
          <DatePickerViewControl>
            <DatePickerViewTrigger>
              <DatePickerRangeText />
            </DatePickerViewTrigger>
          </DatePickerViewControl>
          <DatePickerTable>
            <DatePickerTableBody>
              <For
                each={api().getMonthsGrid({
                  columns: 4,
                  format: "short"
                })}
              >
                {months => (
                  <DatePickerTableRow>
                    <For each={months}>
                      {month => (
                        <DatePickerTableCell value={month.value}>
                          <DatePickerTableCellTrigger>{month.label}</DatePickerTableCellTrigger>
                        </DatePickerTableCell>
                      )}
                    </For>
                  </DatePickerTableRow>
                )}
              </For>
            </DatePickerTableBody>
          </DatePickerTable>
        </>
      )}
    </DatePickerView>
    <DatePickerView view="year">
      {api => (
        <>
          <DatePickerViewControl>
            <DatePickerViewTrigger>
              <DatePickerRangeText />
            </DatePickerViewTrigger>
          </DatePickerViewControl>
          <DatePickerTable>
            <DatePickerTableBody>
              <For
                each={api().getYearsGrid({
                  columns: 4
                })}
              >
                {years => (
                  <DatePickerTableRow>
                    <For each={years}>
                      {year => (
                        <DatePickerTableCell value={year.value}>
                          <DatePickerTableCellTrigger>{year.label}</DatePickerTableCellTrigger>
                        </DatePickerTableCell>
                      )}
                    </For>
                  </DatePickerTableRow>
                )}
              </For>
            </DatePickerTableBody>
          </DatePickerTable>
        </>
      )}
    </DatePickerView>
  </DatePickerContent>
</DatePicker>

Examples

Date Range Picker

Calendar

Data TableDialog