Date Picker

date-picker.tsx

import {DatePicker} from '@you-got-bud/calendar'

export function DatePicker() {
  return (
    <DatePicker />
  )
}

Alternative selection modes

Range

Set the prop mode to range to enable the range selection mode.

date-range-picker.tsx

import {DatePicker} from '@you-got-bud/calendar'

export function DatePicker() {
  return (
    <DatePicker type="range" />
  )
}

Multiple

Set the prop mode to multiple to enable the multiple selection mode.

date-picker-multiple.tsx

import {DatePicker} from '@you-got-bud/calendar'

export function DatePicker() {
  return (
    <DatePicker type="multiple" />
  )
}

Controlled state

The following example uses a state value to keep track of the date range and renders it in a popover.

date-range-picker-in-popover.tsx

'use client'

import {Button} from '@/components/ui/button'
import {Popover, PopoverContent, PopoverTrigger} from '@/components/ui/popover'
import {DatePicker, DatesRangeValue} from '@you-got-bud/calendar'
import dayjs from 'dayjs'
import {CalendarDays} from 'lucide-react'
import {useMemo, useState} from 'react'

export function DateRangeInPopover() {
  const [dateRange, setDateRange] = useState<DatesRangeValue>()
  const label = useMemo(() => {
    if (!dateRange) return 'Select date range'
    return dateRange.map(date => dayjs(date).format('DD MMM YYYY')).join(' - ')
  }, [dateRange])
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>
          <CalendarDays className="w-4 h-4 me-2" />
          {label}
        </Button>
      </PopoverTrigger>
      <PopoverContent>
        <DatePicker type="range" value={dateRange} onChange={setDateRange} />
      </PopoverContent>
    </Popover>
  )
}

Number of columns

The date picker can be configured to show a different number of columns. Using the numberOfColumns prop. The following example shows a date picker with 2 columns.

This demo is only available on desktop. Please use a screen with a width of 768px or more to view the demo.

date-range-picker.two-column.tsx

import {DatePicker} from '@you-got-bud/calendar'

export function DatePicker() {
  return (
    <DatePicker type="range" numberOfColumns={2} />
  )
}

Min and max dates

You can set the minimum and maximum dates that can be selected using the minDate and maxDate props.

date-picker.min-max-date.tsx

import {DatePicker} from '@you-got-bud/calendar'

export function MinMaxDateExample() {
  return (
    <DatePicker
      minDate={dayjs().subtract(1, 'week').toDate()}
      maxDate={new Date()}
    />
  )
}

The size prop

The size prop can be used to change the size of the date picker. Sizes xs, sm, md, lg, and xl are available.

date-picker.with-size.tsx

'use client'

import {DatePicker, DatePickerProps} from '@you-got-bud/calendar'
import {useState} from 'react'
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

export function WithSizeDemo() {
  const [size, setSize] = useState<NonNullable<DatePickerProps['size']>>('sm')
  return (
    <>
      <DatePicker size={size} />
      <Select
        value={size}
        onValueChange={value =>
          setSize(value as NonNullable<DatePickerProps['size']>)
        }
      >
        <SelectTrigger className="w-[100px] absolute right-4 top-4">
          <SelectValue placeholder="Size" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Size</SelectLabel>
            <SelectItem value="xs">xs</SelectItem>
            <SelectItem value="sm">sm</SelectItem>
            <SelectItem value="md">md</SelectItem>
            <SelectItem value="lg">lg</SelectItem>
            <SelectItem value="xl">xl</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </>
  )
}

Change the month and year item formats

Using the monthsListFormat and yearsListFormat props, you can change the format of the month and year items. Refer to the dayjs documentation for more information on the formatting options.

date-range-picker.month-year-format.tsx

import {DatePicker} from '@you-got-bud/calendar'

export function DatePicker() {
  return (
    <DatePicker monthsListFormat="MMMM" yearsListFormat="YY" />
  )
}

Using the date picker inside a `@shadcn/ui` form

The date picker can be used inside a @shadcn/ui form. The following example shows a date picker inside a form.

birthday-form.tsx

'use client'
import {Button} from '@/components/ui/button'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
} from '@/components/ui/form'
import {Popover, PopoverContent, PopoverTrigger} from '@/components/ui/popover'
import {DatePicker} from '@you-got-bud/calendar'
import dayjs from 'dayjs'
import {ChevronDown} from 'lucide-react'
import {useForm} from 'react-hook-form'
import {toast} from 'sonner'
import {z} from 'zod'

export const formSchema = z.object({
  birthday: z.nullable(z.date()),
})

export function DatePickerInForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    defaultValues: {
      birthday: new Date(1990, 0, 1),
    },
  })

  function onSubmit(data: z.infer<typeof formSchema>) {
    toast(`You are ${dayjs().diff(data.birthday, 'year')} years old`)
  }
  return (
    <Form {...form}>
      <form
        className="flex flex-col gap-6"
        onSubmit={form.handleSubmit(onSubmit)}
      >
        <FormField
          control={form.control}
          name="birthday"
          render={({field}) => (
            <FormItem className="flex flex-col">
              <FormLabel htmlFor="birthday">Birthday</FormLabel>
              <FormControl>
                <Popover>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      className={
                        'relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none md:w-40 lg:w-64'
                      }
                    >
                      {form.watch('birthday')
                        ? dayjs(form.watch('birthday')).format('DD/MM/YYYY')
                        : 'Select a date'}
                      <ChevronDown className="h-4 w-4 ms-auto" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent>
                    <DatePicker
                      allowDeselect
                      onChange={field.onChange}
                      value={field.value}
                    />
                  </PopoverContent>
                </Popover>
              </FormControl>
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}

Selecting a single date in a range

By default clicking a date twice will deselect it. If you want to allow your users to select a single date use the allowSingleDateInRange prop.

date-range-picker.allow-single-date.tsx

import {DatePicker} from '@you-got-bud/calendar'

export function DatePicker() {
  return (
    <DatePicker type="range" allowSingleDateInRange />
  )
}

Changing the default date

You can set the default date using the defaultDate prop. The calendar will automatically jump to this date.

date-picker-default-date.tsx

import {DatePicker} from '@you-got-bud/calendar'

export function DatePicker() {
  return (
    <DatePicker defaultDate={new Date(1999, 9, 5)} />
  )
}

Localization

The date picker can be localized by passing a locale string to the locale prop. The following example shows a date picker with a custom locale.

Locale prop

Use the locale prop to set the locale of the date picker.

lu	ma	mi	ju	vi	sá	do

date-range-picker.locale.tsx

'use client'
import 'dayjs/locale/es'
import {DatePicker} from '@you-got-bud/calendar'

export function DatePicker() {
  return (
    <DatePicker locale="es" />
  )
}

First day of week prop

Use the firstDayOfWeek prop to set the first day of the week.

do	lu	ma	mi	ju	vi	sá

date-range-picker.locale-weekday-start.tsx

'use client'
import 'dayjs/locale/es'
import {DatePicker} from '@you-got-bud/calendar'

export function DatePicker() {
  return (
    <DatePicker locale="es" firstDayOfWeek={0} />
  )
}

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su