Day Picker

A date field component that allows users to enter and edit date.

Preview

May 2024

Su	Mo	Tu	We	Th	Fr	Sa
28	29	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

Code

'use client'

import DayPicker from '@dinui/react/day-picker'
import { useState } from 'react'

export default function DayPickerVariantDemo() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <DayPicker
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border shadow-sm"
    />
  )
}

About

The DayPicker component is built on top of React DayPicker.

Range

Preview

May 2024

Su	Mo	Tu	We	Th	Fr	Sa
28	29	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

June 2024

Su	Mo	Tu	We	Th	Fr	Sa
26	27	28	29	30	31	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	1	2	3	4	5	6

Code

'use client'

import DayPicker, { type DateRange } from '@dinui/react/day-picker'
import { useState } from 'react'

export default function DayPickerRangeDemo() {
  const [date, setDate] = useState<DateRange | undefined>({
    from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
    to: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
  })

  return (
    <DayPicker
      mode="range"
      selected={date}
      onSelect={setDate}
      disabled={[new Date(Date.now() - 24 * 60 * 60 * 1000)]}
      numberOfMonths={2}
      className="rounded-md border shadow-sm"
    />
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add day-picker

   yarn

   yarn dlx @dinui/cli@latest add day-picker

   pnpm

   pnpm dlx @dinui/cli@latest add day-picker

   bun

   bunx @dinui/cli@latest add day-picker

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @tabler/icons-react react-day-picker tailwind-variants type-fest react-day-picker

   yarn

   yarn add @tabler/icons-react react-day-picker tailwind-variants type-fest react-day-picker

   pnpm

   pnpm add @tabler/icons-react react-day-picker tailwind-variants type-fest react-day-picker

   bun

   bun add @tabler/icons-react react-day-picker tailwind-variants type-fest react-day-picker

3. Copy and paste the following code into your project

   'use client'
   
   import { button } from '@dinui/react/button'
   import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
   import * as DayPickerPrimitive from 'react-day-picker'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const dayPicker = tv({
     slots: {
       root: 'p-3',
       months: 'flex flex-wrap gap-4',
       month: 'space-y-4',
       caption: 'flex justify-center pt-1 relative items-center',
       captionLabel: 'text-sm font-medium',
       nav: 'gap-1 flex items-center',
       navButton: button({
         variant: 'outline',
       }).root({
         className: 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
       }),
   
       navButtonPrevious: 'absolute left-1',
       navButtonNext: 'absolute right-1',
       table: 'border-collapse space-y-1',
       headRow: 'flex',
       headCell: 'text-fg-weaker w-8 font-normal text-[0.8rem]',
       row: 'flex mt-2',
       cell: [
         '[&:has(.drm)]:bg-bg--active',
         '[&:has(.drs)]:bg-bg--active [&:has(.drs)]:rounded-l-md',
         '[&:has(.dre)]:bg-bg--active [&:has(.dre)]:rounded-r-md',
         'last:[&:has(.ds)]:rounded-r-md first:[&:has(.ds)]:rounded-l-md',
       ],
       day: button({
         variant: 'ghost',
         size: 'sm',
         icon: true,
       }).root({
         className: [
           'text-[0.8125rem] font-normal aria-selected:opacity-100',
   
           '[&.dt:not(.ds)]:text-fg-brand [&.dt.drm]:text-fg-brand',
           '[&.dd]:opacity-50',
           '[&.do]:opacity-50',
           '[&.ds:not(.drm,.dd)]:bg-brand [&.ds:not(.drm,.dd)]:hover:bg-brand',
         ],
       }),
       dayRangeStart: 'drs',
       dayRangeEnd: 'dre',
       daySelected: 'ds',
       dayToday: 'dt',
       dayOutside: 'do',
       dayDisabled: 'dd',
       dayRangeMiddle: 'drm',
       dayHidden: 'dh',
       componentIconLeft: 'size-4',
       componentIconRight: 'size-4',
     },
   })
   
   function DayPicker({
     componentIconLeftProps,
     componentIconRightProps,
     ...props
   }: Merge<
     React.ComponentProps<(typeof DayPickerPrimitive)['DayPicker']>,
     {
       componentIconLeftProps?: React.ComponentProps<typeof IconChevronLeft>
       componentIconRightProps?: React.ComponentProps<typeof IconChevronRight>
     }
   >) {
     const classes = dayPicker()
   
     return (
       <DayPickerPrimitive.DayPicker
         showOutsideDays
         {...props}
         className={classes.root({ className: props.className })}
         classNames={{
           ...props.classNames,
           months: classes.months({ className: props.classNames?.months }),
           month: classes.month({ className: props.classNames?.month }),
           caption: classes.caption({ className: props.classNames?.caption }),
           caption_label: classes.captionLabel({ className: props.classNames?.caption_label }),
           nav: classes.nav({ className: props.classNames?.nav }),
           nav_button: classes.navButton({ className: props.classNames?.nav_button }),
           nav_button_previous: classes.navButtonPrevious({
             className: props.classNames?.nav_button_previous,
           }),
           nav_button_next: classes.navButtonNext({ className: props.classNames?.nav_button_next }),
           table: classes.table({ className: props.classNames?.table }),
           head_row: classes.headRow({ className: props.classNames?.head_row }),
           head_cell: classes.headCell({ className: props.classNames?.head_cell }),
           row: classes.row({ className: props.classNames?.row }),
           cell: classes.cell({ className: props.classNames?.cell }),
           day: classes.day({ className: props.classNames?.day }),
           day_range_start: classes.dayRangeStart({ className: props.classNames?.day_range_start }),
           day_range_end: classes.dayRangeEnd({ className: props.classNames?.day_range_end }),
           day_selected: classes.daySelected({ className: props.classNames?.day_selected }),
           day_today: classes.dayToday({ className: props.classNames?.day_today }),
           day_outside: classes.dayOutside({ className: props.classNames?.day_outside }),
           day_disabled: classes.dayDisabled({ className: props.classNames?.day_disabled }),
           day_range_middle: classes.dayRangeMiddle({ className: props.classNames?.day_range_middle }),
           day_hidden: classes.dayHidden({ className: props.classNames?.day_hidden }),
         }}
         components={{
           IconLeft: () => (
             <IconChevronLeft
               {...componentIconLeftProps}
               className={classes.componentIconLeft({ className: componentIconLeftProps?.className })}
             />
           ),
           IconRight: () => (
             <IconChevronRight
               {...componentIconRightProps}
               className={classes.componentIconRight({
                 className: componentIconRightProps?.className,
               })}
             />
           ),
           ...props.components,
         }}
       />
     )
   }
   
   export default DayPicker
   export { dayPicker, DayPickerPrimitive }
   export type { DateRange, DayClickEventHandler, DateFormatter } from 'react-day-picker'

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.

Form

Preview

Date of birthPick a date

Your date of birth is used to calculate your age.

Submit

Code

'use client'

import Button from '@dinui/react/button'
import DayPicker from '@dinui/react/day-picker'
import Form, { useForm } from '@dinui/react/form'
import Popover from '@dinui/react/popover'
import { cn } from '@dinui/react/utils'
import { zodResolver } from '@hookform/resolvers/zod'
import { IconCalendar } from '@tabler/icons-react'
import { format } from 'date-fns'
import { z } from 'zod'

const FormSchema = z.object({
  dob: z.date({
    required_error: 'A date of birth is required.',
  }),
})

export default function DayPickerFormDemo() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  })

  function onSubmit(data: z.infer<typeof FormSchema>) {
    alert(`You submitted the following values: ${JSON.stringify(data, null, 2)}`)
  }

  return (
    <Form form={form} onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
      <Form.Field
        control={form.control}
        name="dob"
        render={({ field }) => (
          <Form.Item>
            <Form.Label>Date of birth</Form.Label>
            <Popover>
              <Popover.Trigger asChild>
                <Form.Control>
                  <Button
                    variant={'outline'}
                    className={cn(
                      'w-[240px] pl-3 text-left font-normal text-fg',
                      !field.value && 'text-fg-weaker',
                    )}
                  >
                    {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}

                    <Button.RightIcon className="ml-auto text-fg-weaker">
                      <IconCalendar />
                    </Button.RightIcon>
                  </Button>
                </Form.Control>
              </Popover.Trigger>
              <Popover.Content className="p-0" align="start">
                <DayPicker
                  mode="single"
                  selected={field.value}
                  onSelect={field.onChange}
                  disabled={(date) => date > new Date() || date < new Date('1900-01-01')}
                  initialFocus
                />
              </Popover.Content>
            </Popover>
            <Form.Description>Your date of birth is used to calculate your age.</Form.Description>
            <Form.ErrorMessage />
          </Form.Item>
        )}
      />
      <Button type="submit">Submit</Button>
    </Form>
  )
}