GitHub

Date Picker

A date picker component for selecting dates with calendar navigation

Docs API
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3

Installation

pnpm dlx shadcn@latest add https://shark-ui.vercel.app/r/datepicker.json

Usage

import {
  DatePicker,
  DatePickerControl,
  DatePickerInput,
  DatePickerTrigger,
  DatePickerContent,
  DatePickerView,
  DatePickerContext,
  DatePickerTable,
  DatePickerTableHead,
  DatePickerTableRow,
  DatePickerTableHeader,
  DatePickerTableBody,
  DatePickerTableCell,
  DatePickerTableCellTrigger,
  DatePickerViewControl,
  DatePickerViewTrigger,
  DatePickerRangeText,
  DatePickerPrevTrigger,
  DatePickerNextTrigger,
} from "@/components/ui/datepicker";
<DatePicker>
  <DatePickerLabel>Pick a date</DatePickerLabel>
  <DatePickerControl>
    <DatePickerInput placeholder="Select date" />
    <DatePickerTrigger asChild>
      <Button>📅</Button>
    </DatePickerTrigger>
  </DatePickerControl>

  <DatePickerContent>
    <DatePickerView view="day">
      <DatePickerContext>
        {(datePicker) => (
          <>
            <DatePickerViewControl>
              <DatePickerPrevTrigger>Prev</DatePickerPrevTrigger>
              <DatePickerViewTrigger>
                <DatePickerRangeText />
              </DatePickerViewTrigger>
              <DatePickerNextTrigger>Next</DatePickerNextTrigger>
            </DatePickerViewControl>
            <DatePickerTable>
              <DatePickerTableHead>
                <DatePickerTableRow>
                  {datePicker.weekDays.map((weekDay, id) => (
                    <DatePickerTableHeader key={id}>
                      {weekDay.short}
                    </DatePickerTableHeader>
                  ))}
                </DatePickerTableRow>
              </DatePickerTableHead>
              <DatePickerTableBody>
                {datePicker.weeks.map((week, id) => (
                  <DatePickerTableRow key={id}>
                    {week.map((day, id) => (
                      <DatePickerTableCell key={id} value={day}>
                        <DatePickerTableCellTrigger>
                          {day.day}
                        </DatePickerTableCellTrigger>
                      </DatePickerTableCell>
                    ))}
                  </DatePickerTableRow>
                ))}
              </DatePickerTableBody>
            </DatePickerTable>
          </>
        )}
      </DatePickerContext>
    </DatePickerView>
  </DatePickerContent>
</DatePicker>