DatePicker

DatePicker is a form component to work with dates.

When are you traveling?

Pick your departure and return dates · Free cancellation

preview

Installation#

npx shadcn@latest add https://v11.primereact.org/r/datepicker.json

Usage#

import { DatePicker, DatePickerBody, DatePickerCalendar, DatePickerInput, DatePickerPanel, DatePickerPopup, DatePickerPortal, DatePickerPositioner } from '@/components/ui/datepicker';

<DatePicker value={date} onValueChange={(e) => setDate(e.value)}>
    <DatePickerInput />
    <DatePickerPortal>
        <DatePickerPositioner>
            <DatePickerPopup>
                <DatePickerBody>
                    <DatePickerPanel>
                        <DatePickerCalendar />
                    </DatePickerPanel>
                </DatePickerBody>
            </DatePickerPopup>
        </DatePickerPositioner>
    </DatePickerPortal>
</DatePicker>

Examples#

Basic#

A simple date selector.

basic-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function BasicDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker value={date} onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
                <DatePickerInput />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Range#

Use selectionMode="range" to select a start and end date.

range-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function RangeDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker
                value={date}
                selectionMode="range"
                manualInput={false}
                onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}
            >
                <DatePickerInput />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Multiple#

Use selectionMode="multiple" to select multiple dates independently.

multiple-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function MultipleDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker
                value={date}
                selectionMode="multiple"
                manualInput={false}
                onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}
            >
                <DatePickerInput />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Format#

Customize the input format with dateFormat.

format-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function FormatDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker value={date} dateFormat="dd/mm/yy" onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
                <DatePickerInput placeholder="dd/mm/yy" />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Min / Max#

Restrict the selectable range with minDate and maxDate.

min-max-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function MinMaxDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    const today = new Date();
    const minDate = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
    const maxDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());

    return (
        <div className="flex justify-center">
            <DatePicker value={date} minDate={minDate} maxDate={maxDate} onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
                <DatePickerInput />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Month Picker#

Use view="month" to select only month and year.

month-picker-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function MonthPickerDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker value={date} view="month" dateFormat="mm/yy" onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
                <DatePickerInput placeholder="mm/yy" />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Year Picker#

Use view="year" to select only the year.

year-picker-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function YearPickerDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker value={date} view="year" dateFormat="yy" onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
                <DatePickerInput placeholder="yyyy" />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Time#

Use showTime to render a time picker beneath the calendar; pass hourFormat="12" for AM/PM.

time-demo

'use client';
import {
    DatePicker,
    DatePickerBody,
    DatePickerCalendar,
    DatePickerInput,
    DatePickerPanel,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner,
    DatePickerTime
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function TimeDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker value={date} showTime hourFormat="12" onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
                <DatePickerInput placeholder="mm/dd/yy hh:mm aa" />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                    <DatePickerTime />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Inline#

Skip the popup chain and embed the calendar directly.

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	31	1	2	3	4	5

inline-demo

'use client';
import { DatePicker, DatePickerBody, DatePickerCalendar, DatePickerPanel } from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function InlineDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker value={date} onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
                <DatePickerBody>
                    <DatePickerPanel>
                        <DatePickerCalendar />
                    </DatePickerPanel>
                </DatePickerBody>
            </DatePicker>
        </div>
    );
}

Multiple Months#

Render two side-by-side calendars with numberOfMonths={2} and one DatePickerCalendar per offset.

January0

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	31	1	2	3	4	5

February0

Su	Mo	Tu	We	Th	Fr	Sa
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	1	2	3	4	5

March0

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

multiple-months-demo

'use client';
import { DatePicker, DatePickerBody, DatePickerCalendar, DatePickerPanel } from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function MultipleMonthsDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker value={date} selectionMode="range" numberOfMonths={3} onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
                <DatePickerBody>
                    <DatePickerPanel>
                        <DatePickerCalendar index={0} />
                    </DatePickerPanel>
                    <DatePickerPanel>
                        <DatePickerCalendar index={1} />
                    </DatePickerPanel>
                    <DatePickerPanel>
                        <DatePickerCalendar index={2} />
                    </DatePickerPanel>
                </DatePickerBody>
            </DatePicker>
        </div>
    );
}

Show Week Numbers#

Add showWeek to display ISO week numbers on the leftmost column.

show-week-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function ShowWeekDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker value={date} showWeek onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
                <DatePickerInput />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Sizes#

Use size to render small or large variants.

sizes-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function SizesDemo() {
    const [date1, setDate1] = React.useState<DatePickerRootProps['value']>(null);
    const [date2, setDate2] = React.useState<DatePickerRootProps['value']>(null);
    const [date3, setDate3] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex flex-col items-center gap-4">
            <DatePicker value={date1} onValueChange={(e: DatePickerRootValueChangeEvent) => setDate1(e.value)}>
                <DatePickerInput size="small" placeholder="Small" />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
            <DatePicker value={date2} onValueChange={(e: DatePickerRootValueChangeEvent) => setDate2(e.value)}>
                <DatePickerInput placeholder="Normal" />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
            <DatePicker value={date3} onValueChange={(e: DatePickerRootValueChangeEvent) => setDate3(e.value)}>
                <DatePickerInput size="large" placeholder="Large" />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Fluid#

Use fluid to make the input span the parent container width.

fluid-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function FluidDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <DatePicker value={date} fluid onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
            <DatePickerInput fluid />
            <DatePickerPortal>
                <DatePickerPositioner>
                    <DatePickerPopup>
                        <DatePickerBody>
                            <DatePickerPanel>
                                <DatePickerCalendar />
                            </DatePickerPanel>
                        </DatePickerBody>
                    </DatePickerPopup>
                </DatePickerPositioner>
            </DatePickerPortal>
        </DatePicker>
    );
}

Filled#

Use variant="filled" for a filled input style.

filled-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function FilledDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker value={date} onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
                <DatePickerInput variant="filled" />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Disabled#

Use disabled to disable the input.

disabled-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';

export default function DisabledDemo() {
    return (
        <div className="flex justify-center">
            <DatePicker disabled>
                <DatePickerInput />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Invalid#

Use invalid to display the input in an error state.

invalid-demo

'use client';
import {
    DatePicker,
    DatePickerCalendar,
    DatePickerBody,
    DatePickerPanel,
    DatePickerInput,
    DatePickerPopup,
    DatePickerPortal,
    DatePickerPositioner
} from '@/components/ui/datepicker';
import type { DatePickerRootProps, DatePickerRootValueChangeEvent } from '@primereact/types/primitive/datepicker';
import * as React from 'react';

export default function InvalidDemo() {
    const [date, setDate] = React.useState<DatePickerRootProps['value']>(null);

    return (
        <div className="flex justify-center">
            <DatePicker value={date} invalid={!date} onValueChange={(e: DatePickerRootValueChangeEvent) => setDate(e.value)}>
                <DatePickerInput placeholder="Date" invalid={!date} />
                <DatePickerPortal>
                    <DatePickerPositioner>
                        <DatePickerPopup>
                            <DatePickerBody>
                                <DatePickerPanel>
                                    <DatePickerCalendar />
                                </DatePickerPanel>
                            </DatePickerBody>
                        </DatePickerPopup>
                    </DatePickerPositioner>
                </DatePickerPortal>
            </DatePicker>
        </div>
    );
}

Accessibility#

DatePicker uses combobox role on the input and dialog role on the popup. Day cells use gridcell role with aria-selected reflecting selection and range state.

Keyboard Support#

Key	Function
`tab`	Moves focus through interactive parts
`space / enter`	Selects the focused date
`arrow keys`	Moves focus by day or grid cell
`page up/down`	Moves focus by month
`home / end`	Moves focus to start/end of week
`escape`	Closes the popup