DatePicker

Usage

import { DatePicker } from '@acronis-platform/shadcn-uikit';

Basic

A simple date picker with a popover calendar.

View source

import * as React from 'react';
import { format } from 'date-fns';
import { cn } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';

import { CalendarIcon } from '@acronis-platform/shadcn-uikit';
export function DatePickerBasic() {
  const [date, setDate] = React.useState<Date>();

  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            variant="outline"
            className={cn(
              'w-[280px] justify-start text-left font-normal',
              !date && 'text-muted-foreground'
            )}
          />
        }
      >
        <CalendarIcon className="mr-2 h-4 w-4" />
        {date ? format(date, 'PPP') : <span>Pick a date</span>}
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
        />
      </PopoverContent>
    </Popover>
  );
}

Small

A compact date picker variant.

View source

import * as React from 'react';
import { format } from 'date-fns';
import { cn } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';

import { CalendarIcon } from '@acronis-platform/shadcn-uikit';
export function DatePickerSmall() {
  const [date, setDate] = React.useState<Date>();

  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            variant="outline"
            className={cn(
              'h-8 w-[240px] justify-start text-left text-sm font-normal',
              !date && 'text-muted-foreground'
            )}
          />
        }
      >
        <CalendarIcon className="mr-2 h-3 w-3" />
        {date ? format(date, 'PP') : <span>Pick a date</span>}
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
        />
      </PopoverContent>
    </Popover>
  );
}

With label

A date picker with an associated label.

Date of Birth

View source

import * as React from 'react';
import { format } from 'date-fns';
import { cn } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';

import { CalendarIcon } from '@acronis-platform/shadcn-uikit';
export function DatePickerWithLabel() {
  const [date, setDate] = React.useState<Date>();

  return (
    <div className="space-y-2">
      <label htmlFor="birth-date" className="text-sm font-medium">
        Date of Birth
      </label>
      <Popover>
        <PopoverTrigger
          render={
            <Button
              id="birth-date"
              variant="outline"
              className={cn(
                'w-[280px] justify-start text-left font-normal',
                !date && 'text-muted-foreground'
              )}
            />
          }
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, 'PPP') : <span>Select your birth date</span>}
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0">
          <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
            defaultMonth={new Date(1990, 0)}
          />
        </PopoverContent>
      </Popover>
    </div>
  );
}

Date range

Select a start and end date range.

View source

import * as React from 'react';
import { format } from 'date-fns';
import { cn } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';

type DateRange = { from: Date | undefined; to?: Date | undefined };

import { CalendarIcon } from '@acronis-platform/shadcn-uikit';
export function DatePickerRange() {
  const [dateRange, setDateRange] = React.useState<DateRange>({
    from: undefined,
    to: undefined,
  });

  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            variant="outline"
            className={cn(
              'w-[320px] justify-start text-left font-normal',
              !dateRange.from && 'text-muted-foreground'
            )}
          />
        }
      >
        <CalendarIcon className="mr-2 h-4 w-4" />
        {dateRange.from ? (
          dateRange.to ? (
            <>
              {format(dateRange.from, 'LLL dd, y')} -{' '}
              {format(dateRange.to, 'LLL dd, y')}
            </>
          ) : (
            format(dateRange.from, 'LLL dd, y')
          )
        ) : (
          <span>Pick a date range</span>
        )}
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          mode="range"
          selected={dateRange}
          onSelect={(range) =>
            setDateRange(range ?? { from: undefined, to: undefined })
          }
          numberOfMonths={2}
        />
      </PopoverContent>
    </Popover>
  );
}

In a form

Date picker integrated with form validation.

Appointment Date *

Please select a future date for your appointment.

Event Date

View source

import * as React from 'react';
import { format } from 'date-fns';
import { cn } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';

import { CalendarIcon } from '@acronis-platform/shadcn-uikit';
export function DatePickerForm() {
  const [appointmentDate, setAppointmentDate] = React.useState<Date>();

  return (
    <div className="max-w-md space-y-4 rounded-lg border p-6">
      <div className="space-y-2">
        <label htmlFor="appointment-date" className="text-sm font-medium">
          Appointment Date <span className="text-red-500">*</span>
        </label>
        <Popover>
          <PopoverTrigger
            render={
              <Button
                id="appointment-date"
                variant="outline"
                className={cn(
                  'w-full justify-start text-left font-normal',
                  !appointmentDate && 'text-muted-foreground'
                )}
              />
            }
          >
            <CalendarIcon className="mr-2 h-4 w-4" />
            {appointmentDate ? (
              format(appointmentDate, 'PPP')
            ) : (
              <span>Select appointment date</span>
            )}
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0">
            <Calendar
              mode="single"
              selected={appointmentDate}
              onSelect={setAppointmentDate}
              disabled={(date) => date < new Date()}
            />
          </PopoverContent>
        </Popover>
        <p className="text-sm text-gray-500">
          Please select a future date for your appointment.
        </p>
      </div>

      <div className="space-y-2">
        <label htmlFor="event-date" className="text-sm font-medium">
          Event Date
        </label>
        <Popover>
          <PopoverTrigger
            render={
              <Button
                id="event-date"
                variant="outline"
                className="w-full justify-start text-left font-normal text-muted-foreground"
              />
            }
          >
            <CalendarIcon className="mr-2 h-4 w-4" />
            <span>Optional event date</span>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0">
            <Calendar mode="single" />
          </PopoverContent>
        </Popover>
      </div>
    </div>
  );
}

Date formats

Display dates in different format patterns.

View source

import * as React from 'react';
import { format } from 'date-fns';
import { cn } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';

import { CalendarIcon } from '@acronis-platform/shadcn-uikit';
export function DatePickerFormats() {
  const [date, setDate] = React.useState<Date>();

  return (
    <div className="flex flex-wrap gap-4">
      <Popover>
        <PopoverTrigger
          render={
            <Button
              variant="outline"
              className={cn(
                'w-[200px] justify-start text-left font-normal',
                !date && 'text-muted-foreground'
              )}
            />
          }
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, 'MM/dd/yyyy') : <span>MM/DD/YYYY</span>}
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0">
          <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
          />
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger
          render={
            <Button
              variant="outline"
              className={cn(
                'w-[200px] justify-start text-left font-normal',
                !date && 'text-muted-foreground'
              )}
            />
          }
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, 'dd.MM.yyyy') : <span>DD.MM.YYYY</span>}
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0">
          <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
          />
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger
          render={
            <Button
              variant="outline"
              className={cn(
                'w-[200px] justify-start text-left font-normal',
                !date && 'text-muted-foreground'
              )}
            />
          }
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, 'yyyy-MM-dd') : <span>YYYY-MM-DD</span>}
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0">
          <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
          />
        </PopoverContent>
      </Popover>
    </div>
  );
}

With presets

Quick selection presets for common date ranges.

View source

import * as React from 'react';
import { format } from 'date-fns';
import { cn } from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';

import { CalendarIcon } from '@acronis-platform/shadcn-uikit';
export function DatePickerPresets() {
  const [date, setDate] = React.useState<Date>();

  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            variant="outline"
            className={cn(
              'w-[280px] justify-start text-left font-normal',
              !date && 'text-muted-foreground'
            )}
          />
        }
      >
        <CalendarIcon className="mr-2 h-4 w-4" />
        {date ? format(date, 'PPP') : <span>Pick a date</span>}
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <div className="flex">
          <div className="border-r p-3 space-y-2">
            <p className="text-sm font-medium">Quick Select</p>
            <div className="flex flex-col gap-1">
              <Button
                variant="ghost"
                size="sm"
                className="justify-start"
                onClick={() => setDate(new Date())}
              >
                Today
              </Button>
              <Button
                variant="ghost"
                size="sm"
                className="justify-start"
                onClick={() => {
                  const tomorrow = new Date();
                  tomorrow.setDate(tomorrow.getDate() + 1);
                  setDate(tomorrow);
                }}
              >
                Tomorrow
              </Button>
              <Button
                variant="ghost"
                size="sm"
                className="justify-start"
                onClick={() => {
                  const nextWeek = new Date();
                  nextWeek.setDate(nextWeek.getDate() + 7);
                  setDate(nextWeek);
                }}
              >
                In a week
              </Button>
            </div>
          </div>
          <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
          />
        </div>
      </PopoverContent>
    </Popover>
  );
}

Disabled state

A disabled date picker that cannot be interacted with.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';

import { CalendarIcon } from '@acronis-platform/shadcn-uikit';
export function DatePickerDisabled() {
  return (
    <Button
      variant="outline"
      disabled
      className="w-[280px] justify-start text-left font-normal"
    >
      <CalendarIcon className="mr-2 h-4 w-4" />
      <span>Pick a date</span>
    </Button>
  );
}

The DatePicker is a composition of Calendar and Popover primitives. It does not export a standalone component with its own Props interface. The component manages internal date state and renders a Button trigger with a Calendar inside a PopoverContent.

Edit on GitHub

DatePicker

Usage

Basic

Small

With label

Date range

In a form

Date formats

With presets

Disabled state

API Reference

On this page