Day Picker Input

A date picker component with range and presets.

Preview

Pick a date

Code

'use client'

import Button from '@dinui/react/button'
import DayPicker from '@dinui/react/day-picker'
import Popover from '@dinui/react/popover'
import { cn } from '@dinui/react/utils'
import { IconCalendar } from '@tabler/icons-react'
import { format } from 'date-fns'
import { useState } from 'react'

export default function DayPickerInputDemo() {
  const [date, setDate] = useState<Date>()

  return (
    <Popover>
      <Popover.Trigger asChild>
        <Button
          variant={'outline'}
          className={cn('w-[240px] justify-start font-normal', !date && 'text-fg-weaker')}
        >
          <Button.LeftIcon>
            <IconCalendar />
          </Button.LeftIcon>
          {date ? format(date, 'PPP') : <span>Pick a date</span>}
        </Button>
      </Popover.Trigger>
      <Popover.Content className="w-auto p-0" align="start">
        <DayPicker mode="single" selected={date} onSelect={setDate} initialFocus />
      </Popover.Content>
    </Popover>
  )
}

Date Range Picker

Preview

Jan 20, 2022 - Feb 09, 2022

Code

'use client'

import Button from '@dinui/react/button'
import DayPicker from '@dinui/react/day-picker'
import Popover from '@dinui/react/popover'
import { cn } from '@dinui/react/utils'
import { IconCalendarWeek } from '@tabler/icons-react'
import { addDays, format } from 'date-fns'
import { useState } from 'react'
import type { DateRange } from 'react-day-picker'

export default function DayPickerInputWithRange({
  className,
}: React.HTMLAttributes<HTMLDivElement>) {
  const [date, setDate] = useState<DateRange | undefined>({
    from: new Date(2022, 0, 20),
    to: addDays(new Date(2022, 0, 20), 20),
  })

  return (
    <div className={cn('grid gap-2', className)}>
      <Popover>
        <Popover.Trigger asChild>
          <Button
            id="date"
            variant={'outline'}
            className={cn(
              'w-[300px] justify-start text-left font-normal',
              !date && 'text-fg-weaker',
            )}
          >
            <Button.LeftIcon>
              <IconCalendarWeek />
            </Button.LeftIcon>

            {date?.from ? (
              date.to ? (
                <>
                  {format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')}
                </>
              ) : (
                format(date.from, 'LLL dd, y')
              )
            ) : (
              <span>Pick a date</span>
            )}
          </Button>
        </Popover.Trigger>
        <Popover.Content className="w-auto p-0" align="start">
          <DayPicker
            initialFocus
            mode="range"
            defaultMonth={date?.from}
            selected={date}
            onSelect={setDate}
            numberOfMonths={2}
          />
        </Popover.Content>
      </Popover>
    </div>
  )
}

With Presets

Preview

Pick a date

Code

'use client'

import Button from '@dinui/react/button'
import DayPicker from '@dinui/react/day-picker'
import Popover from '@dinui/react/popover'
import Select from '@dinui/react/select'
import { cn } from '@dinui/react/utils'
import { IconCalendar } from '@tabler/icons-react'
import { addDays, format } from 'date-fns'
import * as React from 'react'

export default function DayPickerInputWithPresets() {
  const [date, setDate] = React.useState<Date>()

  return (
    <Popover>
      <Popover.Trigger asChild>
        <Button
          variant={'outline'}
          className={cn('w-[240px] justify-start text-left font-normal', !date && 'text-fg-weaker')}
        >
          <Button.LeftIcon>
            <IconCalendar />
          </Button.LeftIcon>

          {date ? format(date, 'PPP') : <span>Pick a date</span>}
        </Button>
      </Popover.Trigger>
      <Popover.Content align="start" className="p-0">
        <div className="p-1">
          <Select onValueChange={(value) => setDate(addDays(new Date(), parseInt(value)))}>
            <Select.Trigger className="w-full">
              <Select.Value placeholder="Select" />
            </Select.Trigger>
            <Select.Content position="popper">
              <Select.Item value="0">Today</Select.Item>
              <Select.Item value="1">Tomorrow</Select.Item>
              <Select.Item value="3">In 3 days</Select.Item>
              <Select.Item value="7">In a week</Select.Item>
            </Select.Content>
          </Select>
        </div>

        <DayPicker className="mt-1" mode="single" selected={date} onSelect={setDate} />
      </Popover.Content>
    </Popover>
  )
}