DatePicker is a form component to work with dates.
import { DatePicker } from 'primereact/datepicker';<DatePicker>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header />
<DatePicker.Table>
<DatePicker.TableHead />
<DatePicker.TableBody>
<DatePicker.TableBodyRow>
<DatePicker.TableBodyCell />
</DatePicker.TableBodyRow>
</DatePicker.TableBody>
</DatePicker.Table>
<DatePicker.Buttonbar />
</DatePicker.Calendar>
</DatePicker.Container>
<DatePicker.Time />
</DatePicker.Portal>
</DatePicker>'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function BasicDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<DatePicker value={date} onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
Default date format is mm/dd/yy which can be customized using the dateFormat property. Following options can be a part of the format.
d - day of month (no leading zero)dd - day of month (two digit)o - day of the year (no leading zeros)oo - day of the year (three digit)D - day name shortDD - day name longm - month of year (no leading zero)mm - month of year (two digit)M - month name shortMM - month name longy - year (two digit)yy - year (four digit)@ - Unix timestamp (ms since 01/01/1970)! - Windows ticks (100ns since 01/01/0001)'...' - literal text'' - single quoteanything else - literal text'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function FormatDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<DatePicker value={date} dateFormat="dd/mm/yy" onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
An additional icon is displayed next to the input field.
'use client';
import {
DatePickerInputIconContainerInstance,
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import { Label } from 'primereact/label';
import * as React from 'react';
export default function IconDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
const [date2, setDate2] = React.useState<useDatePickerProps['value'] | null>(null);
const [date3, setDate3] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex flex-wrap gap-4">
<div className="flex-auto">
<Label htmlFor="buttondisplay" className="font-bold block mb-2">
Button
</Label>
<DatePicker value={date} fluid onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input id="buttondisplay" />
<DatePicker.Dropdown>
<DatePicker.DropdownIcon />
</DatePicker.Dropdown>
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
<div className="flex-auto">
<Label htmlFor="icondisplay" className="font-bold block mb-2">
Default Icon
</Label>
<DatePicker value={date2} fluid onValueChange={(event: DatePickerValueChangeEvent) => setDate2(event.value)}>
<DatePicker.Input id="icondisplay" />
<DatePicker.InputIconContainer>
<DatePicker.DropdownIcon />
</DatePicker.InputIconContainer>
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
<div className="flex-auto">
<Label htmlFor="templatedisplay" className="font-bold block mb-2">
Custom Icon
</Label>
<DatePicker value={date3} fluid timeOnly onValueChange={(event: DatePickerValueChangeEvent) => setDate3(event.value)}>
<DatePicker.Input id="templatedisplay" />
<DatePicker.InputIconContainer>
{(instance: DatePickerInputIconContainerInstance) => {
const { datepicker } = instance;
return <i className="pi pi-clock" onClick={datepicker?.onButtonClick}></i>;
}}
</DatePicker.InputIconContainer>
<DatePicker.Portal>
<DatePicker.Time>
<DatePicker.Picker type="hour">
<DatePicker.Increment />
<DatePicker.Hour />
<DatePicker.Decrement />
</DatePicker.Picker>
<DatePicker.SeparatorContainer>
<DatePicker.Separator />
</DatePicker.SeparatorContainer>
<DatePicker.Picker type="minute">
<DatePicker.Increment />
<DatePicker.Minute />
<DatePicker.Decrement />
</DatePicker.Picker>
</DatePicker.Time>
</DatePicker.Portal>
</DatePicker>
</div>
</div>
);
}
Boundaries for the permitted dates that can be entered are defined with minDate and maxDate properties.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function MinMaxDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
const today = new Date();
const month = today.getMonth();
const year = today.getFullYear();
const prevMonth = month === 0 ? 11 : month - 1;
const prevYear = prevMonth === 11 ? year - 1 : year;
const nextMonth = month === 11 ? 0 : month + 1;
const nextYear = nextMonth === 0 ? year + 1 : year;
const minDate = new Date();
const maxDate = new Date();
minDate.setMonth(prevMonth);
minDate.setFullYear(prevYear);
maxDate.setMonth(nextMonth);
maxDate.setFullYear(nextYear);
return (
<div className="flex justify-center">
<DatePicker
value={date}
minDate={minDate}
maxDate={maxDate}
manualInput={false}
onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}
>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
In order to choose multiple dates, set selectionMode as multiple. In this mode, the value binding should be an array.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function MultipleDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<DatePicker
value={date}
selectionMode="multiple"
manualInput={false}
onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}
>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
A range of dates can be selected by defining selectionMode as range, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function RangeDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<DatePicker
value={date}
selectionMode="range"
manualInput={false}
onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}
>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
When Buttonbar component is used, today and clear buttons are displayed at the bottom of the calendar panel.
'use client';
import {
DatePickerButtonbarInstance,
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { Button } from 'primereact/button';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function ButtonbarDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
const [date2, setDate2] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center gap-4 flex-wrap">
<DatePicker value={date} placeholder="Basic" onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
<DatePicker.Buttonbar>
<DatePicker.Today />
<DatePicker.Clear />
</DatePicker.Buttonbar>
</DatePicker.Portal>
</DatePicker>
<DatePicker
value={date2}
placeholder="Customized"
selectionMode="range"
manualInput={false}
onValueChange={(event: DatePickerValueChangeEvent) => setDate2(event.value)}
>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
<DatePicker.Buttonbar>
{(instance: DatePickerButtonbarInstance) => {
const { datepicker } = instance;
return (
<div className="flex justify-between w-full">
<div className="flex gap-2">
<Button size="small" severity="secondary">
Exact
</Button>
<Button size="small" severity="secondary">
Flexible
</Button>
</div>
<div className="flex gap-2">
<Button size="small" label="Today" onClick={datepicker?.onTodayButtonClick} variant="outlined">
Today
</Button>
<Button size="small" severity="danger" variant="outlined" onClick={datepicker?.onClearButtonClick}>
<i className="pi pi-times" />
</Button>
</div>
</div>
);
}}
</DatePicker.Buttonbar>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
A time picker is displayed when DatePicker.Time component is used where 12/24 hour format is configured with hourFormat property. In case, only time needs to be selected, add timeOnly to hide the date section.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import { Label } from 'primereact/label';
import * as React from 'react';
export default function TimeDemo() {
const [date1, setDate1] = React.useState<useDatePickerProps['value'] | null>(null);
const [date2, setDate2] = React.useState<useDatePickerProps['value'] | null>(null);
const [date3, setDate3] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<>
<div className="flex flex-wrap gap-4">
<div className="flex-auto">
<Label htmlFor="datepicker-12h" className="font-bold block mb-2">
12h Format
</Label>
<DatePicker
value={date1}
showTime
hourFormat="12"
fluid
onValueChange={(event: DatePickerValueChangeEvent) => setDate1(event.value)}
>
<DatePicker.Input id="datepicker-12h" />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
<DatePicker.Time>
<DatePicker.Picker type="hour">
<DatePicker.Increment />
<DatePicker.Hour />
<DatePicker.Decrement />
</DatePicker.Picker>
<DatePicker.SeparatorContainer>
<DatePicker.Separator />
</DatePicker.SeparatorContainer>
<DatePicker.Picker type="minute">
<DatePicker.Increment />
<DatePicker.Minute />
<DatePicker.Decrement />
</DatePicker.Picker>
<DatePicker.SeparatorContainer>
<DatePicker.Separator />
</DatePicker.SeparatorContainer>
<DatePicker.Picker type="ampm">
<DatePicker.Increment />
<DatePicker.AmPm />
<DatePicker.Decrement />
</DatePicker.Picker>
</DatePicker.Time>
</DatePicker.Portal>
</DatePicker>
</div>
<div className="flex-auto">
<Label htmlFor="datepicker-24h" className="font-bold block mb-2">
24h Format
</Label>
<DatePicker
value={date2}
showTime
hourFormat="24"
fluid
onValueChange={(event: DatePickerValueChangeEvent) => setDate2(event.value)}
>
<DatePicker.Input id="datepicker-24h" />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
<DatePicker.Time>
<DatePicker.Picker type="hour">
<DatePicker.Increment />
<DatePicker.Hour />
<DatePicker.Decrement />
</DatePicker.Picker>
<DatePicker.SeparatorContainer>
<DatePicker.Separator />
</DatePicker.SeparatorContainer>
<DatePicker.Picker type="minute">
<DatePicker.Increment />
<DatePicker.Minute />
<DatePicker.Decrement />
</DatePicker.Picker>
</DatePicker.Time>
</DatePicker.Portal>
</DatePicker>
</div>
<div className="flex-auto">
<Label htmlFor="datepicker-timeonly" className="font-bold block mb-2">
Time Only
</Label>
<DatePicker value={date3} timeOnly fluid onValueChange={(event: DatePickerValueChangeEvent) => setDate3(event.value)}>
<DatePicker.Input id="datepicker-timeonly" />
<DatePicker.Portal>
<DatePicker.Time>
<DatePicker.Picker type="hour">
<DatePicker.Increment />
<DatePicker.Hour />
<DatePicker.Decrement />
</DatePicker.Picker>
<DatePicker.SeparatorContainer>
<DatePicker.Separator />
</DatePicker.SeparatorContainer>
<DatePicker.Picker type="minute">
<DatePicker.Increment />
<DatePicker.Minute />
<DatePicker.Decrement />
</DatePicker.Picker>
</DatePicker.Time>
</DatePicker.Portal>
</DatePicker>
</div>
</div>
</>
);
}
Month only picker is enabled by specifying view as month in addition to a suitable dateFormat.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function MonthPickerDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<DatePicker value={date} view="month" dateFormat="mm/yy" onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
Year only picker is enabled by specifying view as year in addition to a suitable dateFormat.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function YearPickerDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<DatePicker value={date} view="year" dateFormat="yy" onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
Number of months to display is configured with the numberOfMonths property.
'use client';
import type {
DatePickerContainerInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function MultipleMonthsDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<DatePicker value={date} numberOfMonths={2} onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
{(instance: DatePickerContainerInstance) => {
const { datepicker } = instance;
const months = datepicker?.months as useDatePickerMonthData[];
return (
<>
{months?.map((_, groupIndex) => {
const month = datepicker?.getIndexedMonth?.(groupIndex) as useDatePickerMonthData;
return (
<DatePicker.Calendar key={groupIndex}>
{groupIndex === 0 && (
<>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth>
{datepicker?.getMonthName?.(month.month)}
</DatePicker.SelectMonth>
<DatePicker.SelectYear>{month.year}</DatePicker.SelectYear>
<DatePicker.Decade />
</DatePicker.Title>
</DatePicker.Header>
</>
)}
{groupIndex === 1 && (
<>
<DatePicker.Header>
<DatePicker.Title>
<DatePicker.SelectMonth>
{datepicker?.getMonthName?.(month.month)}
</DatePicker.SelectMonth>
<DatePicker.SelectYear>{month.year}</DatePicker.SelectYear>
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
</>
)}
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{() => {
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{() => {
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell
key={date.day + '' + date.month}
date={date}
>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{() => {
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell
key={monthIndex}
month={month}
index={monthIndex}
>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{() => {
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
);
})}
</>
);
}}
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
The updateModelType property controls the data type of the value. When set to string it returns a string representation of the date, when set to date (default) it returns a Date object.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import { Label } from 'primereact/label';
import * as React from 'react';
export default function ModelTypeDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
const [date2, setDate2] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex flex-wrap gap-4">
<div className="flex-auto">
<Label htmlFor="datetype" className="font-bold block mb-2">
Date Type Model
</Label>
<DatePicker value={date} fluid onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input id="datetype" />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
<div className="flex-auto">
<Label htmlFor="stringtype" className="font-bold block mb-2">
String Type Model
</Label>
<DatePicker value={date2} updateModelType="string" fluid onValueChange={(event: DatePickerValueChangeEvent) => setDate2(event.value)}>
<DatePicker.Input id="stringtype" />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
</div>
);
}
Custom content can be placed inside date cells with the DatePicker.TableHeadCell component that takes a Date as a parameter.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function DateTemplateDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<DatePicker value={date} onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day > 10 && date.day < 15 ? (
<strong className="line-through">{date.day}</strong>
) : (
date.day
)}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
| Wk | Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|---|
| 51 | 26 | 27 | 28 | 29 | 30 | 31 | 1 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 2 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 3 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 4 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 5 | 30 | 31 | 1 | 2 | 3 | 4 | 5 |
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function InlineDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<DatePicker value={date} className="w-full sm:w-120" onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Panel>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
<DatePicker.TableHeadWeekCell>Wk</DatePicker.TableHeadWeekCell>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week, weekIndex) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
<DatePicker.TableBodyWeekCell>
{month.weekNumbers[weekIndex]}
</DatePicker.TableBodyWeekCell>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Panel>
</DatePicker>
</div>
);
}
Custom content can be placed inside date cells in inline mode with the DatePicker.TableHeadCell component that takes a Date as a parameter.
| 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 |
| 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 |
'use client';
import type {
DatePickerContainerInstance,
DatePickerTableBodyInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
const getRandomNumber = (min: number = 30, max: number = 100): number => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
export default function InlineTemplateDemo() {
const [value, setValue] = React.useState<Date | null>(null);
const priceMapRef = React.useRef(new Map<string, number>());
const getPrice = React.useCallback((year: number, month: number, day: number) => {
const key = `${year}-${month}-${day}`;
if (!priceMapRef.current.has(key)) {
priceMapRef.current.set(key, getRandomNumber());
}
return priceMapRef.current.get(key)!;
}, []);
return (
<div className="flex justify-center">
<DatePicker value={value} numberOfMonths={2} onValueChange={(event: DatePickerValueChangeEvent) => setValue(event.value as Date)}>
<DatePicker.Panel>
<DatePicker.Container>
{(instance: DatePickerContainerInstance) => {
const { datepicker } = instance;
const months = datepicker?.months as useDatePickerMonthData[];
return (
<>
{months?.map((month, groupIndex) => {
return (
<DatePicker.Calendar key={groupIndex}>
{groupIndex === 0 && (
<>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth>
{datepicker?.getMonthName?.(month.month)}
</DatePicker.SelectMonth>
<DatePicker.SelectYear>{month.year}</DatePicker.SelectYear>
<DatePicker.Decade />
</DatePicker.Title>
</DatePicker.Header>
</>
)}
{groupIndex === 1 && (
<>
<DatePicker.Header>
<DatePicker.Title>
<DatePicker.SelectMonth>
{datepicker?.getMonthName?.(month.month)}
</DatePicker.SelectMonth>
<DatePicker.SelectYear>{month.year}</DatePicker.SelectYear>
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
</>
)}
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{() => {
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.(groupIndex) as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => {
const today = new Date();
today.setHours(0, 0, 0, 0);
const currentDate = new Date(date.year, date.month, date.day);
const price =
currentDate >= today
? getPrice(date.year, date.month, date.day)
: null;
const isLowPrice = price !== null && price < 50;
const selected = value && datepicker?.isDateEquals(value, date);
return (
<DatePicker.TableBodyCell
key={date.day + '' + date.month}
date={date}
className={`p-2 ${date.otherMonth ? 'invisible' : ''}`}
pt={{
day: `w-12 h-12 rounded-lg ${selected ? 'bg-primary' : !value && date.today ? 'bg-primary' : ''}`
}}
>
<div
className={`flex flex-col items-center gap-1 min-w-[50px]`}
>
<span
className={`font-semibold text-base ${selected || (!value && date.today) ? 'text-white dark:text-surface-900' : ''}`}
>
{date.day}
</span>
{price !== null && (
<span
className={`text-sm font-medium ${
selected || (!value && date.today)
? 'text-white dark:text-surface-800'
: isLowPrice
? 'text-green-600'
: 'text-surface-600 dark:text-surface-400'
}`}
>
${price}
</span>
)}
</div>
</DatePicker.TableBodyCell>
);
})}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
);
})}
</>
);
}}
</DatePicker.Container>
</DatePicker.Panel>
</DatePicker>
</div>
);
}
FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import { Label } from 'primereact/label';
import * as React from 'react';
export default function FloatLabelDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
const [date2, setDate2] = React.useState<useDatePickerProps['value'] | null>(null);
const [date3, setDate3] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex flex-wrap justify-center items-end gap-4">
<Label.Float>
<DatePicker value={date} onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input id="over_label" />
<DatePicker.InputIconContainer>
<DatePicker.DropdownIcon />
</DatePicker.InputIconContainer>
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
<Label htmlFor="over_label">Over Label</Label>
</Label.Float>
<Label.Float variant="in">
<DatePicker value={date2} onValueChange={(event: DatePickerValueChangeEvent) => setDate2(event.value)}>
<DatePicker.Input id="in_label" />
<DatePicker.InputIconContainer>
<DatePicker.DropdownIcon />
</DatePicker.InputIconContainer>
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
<Label htmlFor="in_label">In Label</Label>
</Label.Float>
<Label.Float variant="on">
<DatePicker value={date3} onValueChange={(event: DatePickerValueChangeEvent) => setDate3(event.value)}>
<DatePicker.Input id="on_label" />
<DatePicker.InputIconContainer>
<DatePicker.DropdownIcon />
</DatePicker.InputIconContainer>
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
<Label htmlFor="on_label">On Label</Label>
</Label.Float>
</div>
);
}
IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import { Label } from 'primereact/label';
import * as React from 'react';
export default function IftaLabelDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<Label.Ifta>
<DatePicker value={date} variant="filled" onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input id="date" />
<DatePicker.InputIconContainer>
<DatePicker.DropdownIcon />
</DatePicker.InputIconContainer>
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
<Label htmlFor="date" className="mb-2">
Date
</Label>
</Label.Ifta>
</div>
);
}
When DatePicker.ClearIcon component is used, a clear icon is added to reset the DatePicker.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function ClearIconDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<DatePicker value={date} onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)} inputClass="w-56">
<DatePicker.Input />
<DatePicker.ClearIcon />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
DatePicker provides small and large sizes as alternatives to the base.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function SizesDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
const [date2, setDate2] = React.useState<useDatePickerProps['value'] | null>(null);
const [date3, setDate3] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex flex-col items-center gap-4">
<DatePicker value={date} size="small" placeholder="Small" onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input />
<DatePicker.InputIconContainer>
<DatePicker.DropdownIcon />
</DatePicker.InputIconContainer>
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
<DatePicker value={date2} placeholder="Normal" onValueChange={(event: DatePickerValueChangeEvent) => setDate2(event.value)}>
<DatePicker.Input />
<DatePicker.InputIconContainer>
<DatePicker.DropdownIcon />
</DatePicker.InputIconContainer>
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
<DatePicker value={date3} size="large" placeholder="Large" onValueChange={(event: DatePickerValueChangeEvent) => setDate3(event.value)}>
<DatePicker.Input />
<DatePicker.InputIconContainer>
<DatePicker.DropdownIcon />
</DatePicker.InputIconContainer>
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
The fluid prop makes the component take up the full width of its container when set to true.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function FluidDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div>
<DatePicker value={date} fluid onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
Specify the filled property to display the component with a higher visual emphasis than the default outlined style.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function FilledDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex justify-center">
<DatePicker value={date} variant="filled" onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
Use the disabled property to disable a datepicker.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
export default function DisabledDemo() {
return (
<div className="flex justify-center">
<DatePicker disabled>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
Specify the invalid property to display the component with a red border.
'use client';
import {
DatePickerTableBodyInstance,
DatePickerTableHeadRowInstance,
DatePickerValueChangeEvent,
useDatePickerMonthData,
useDatePickerMonthOptions,
useDatePickerProps,
useDatePickerYearOptions
} from '@primereact/types/shared/datepicker';
import { DatePicker } from 'primereact/datepicker';
import * as React from 'react';
export default function InvalidDemo() {
const [date, setDate] = React.useState<useDatePickerProps['value'] | null>(null);
const [date2, setDate2] = React.useState<useDatePickerProps['value'] | null>(null);
return (
<div className="flex flex-wrap justify-center gap-4">
<DatePicker value={date} invalid={!date} placeholder="Date" onValueChange={(event: DatePickerValueChangeEvent) => setDate(event.value)}>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
<DatePicker
value={date2}
invalid={!date2}
variant="filled"
placeholder="Date"
onValueChange={(event: DatePickerValueChangeEvent) => setDate2(event.value)}
>
<DatePicker.Input />
<DatePicker.Portal>
<DatePicker.Container>
<DatePicker.Calendar>
<DatePicker.Header>
<DatePicker.Prev />
<DatePicker.Title>
<DatePicker.SelectMonth />
<DatePicker.SelectYear />
<DatePicker.Decade />
</DatePicker.Title>
<DatePicker.Next />
</DatePicker.Header>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableHeadRow>
{(instance: DatePickerTableHeadRowInstance) => {
const { datepicker } = instance;
const weekDays = datepicker?.weekDays as string[];
return (
<>
{weekDays.map((day, index) => (
<DatePicker.TableHeadCell key={index} abbr={day}>
{day}
</DatePicker.TableHeadCell>
))}
</>
);
}}
</DatePicker.TableHeadRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const month = datepicker?.getIndexedMonth?.() as useDatePickerMonthData;
return (
<>
{month.dates?.map((week) => (
<DatePicker.TableBodyRow key={week[0].day + '' + week[0].month}>
<>
{week.map((date) => (
<DatePicker.TableBodyCell key={date.day + '' + date.month} date={date}>
{date.day}
</DatePicker.TableBodyCell>
))}
</>
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="month">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const months = datepicker?.monthPickerValues as useDatePickerMonthOptions[];
return (
<>
{Array.from({ length: 4 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`month-row-${rowIndex}`}>
{months.slice(rowIndex * 3, (rowIndex + 1) * 3).map((month, colIndex) => {
const monthIndex = rowIndex * 3 + colIndex;
return (
<DatePicker.TableBodyCell key={monthIndex} month={month} index={monthIndex}>
{month.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
<DatePicker.TableBody view="year">
{(instance: DatePickerTableBodyInstance) => {
const { datepicker } = instance;
const years = datepicker?.yearPickerValues as useDatePickerYearOptions[];
return (
<>
{Array.from({ length: 5 }).map((_, rowIndex) => (
<DatePicker.TableBodyRow key={`year-row-${rowIndex}`}>
{years.slice(rowIndex * 2, (rowIndex + 1) * 2).map((year, colIndex) => {
const yearIndex = rowIndex * 2 + colIndex;
return (
<DatePicker.TableBodyCell key={yearIndex} year={year}>
{year.value}
</DatePicker.TableBodyCell>
);
})}
</DatePicker.TableBodyRow>
))}
</>
);
}}
</DatePicker.TableBody>
</DatePicker.Table>
</DatePicker.Calendar>
</DatePicker.Container>
</DatePicker.Portal>
</DatePicker>
</div>
);
}
Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to
aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup.
The optional datepicker button requires includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the
chooseDate key of the aria property from the locale API. This label is also used for the aria-label of the popup as well. When there is a value selected, it is formatted and
appended to the label to be able to notify users about the current value.
Popup has a dialog role along with aria-modal and aria-label. The navigation buttons at the header has an aria-label retrieved from the prevYear, nextYear, prevMonth, nextMonth,
prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys.
Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value.
Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute.
Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour, nextHour, prevMinute, nextMinute, prevSecond, nextSecond, am and
pm keys.
DatePicker also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.
| Key | Function |
|---|---|
| space | Opens popup and moves focus to the selected date, if there is none focuses on today. |
| enter | Opens popup and moves focus to the selected date, if there is none focuses on today. |
| Key | Function |
|---|---|
| escape | Closes the popup and moves focus to the input element. |
| tab | Moves focus to the next focusable element within the popup. |
| shift + tab | Moves focus to the next focusable element within the popup. |
| Key | Function |
|---|---|
| enter | Triggers the button action. |
| space | Triggers the button action. |
| Key | Function |
|---|---|
| enter | Selects the date, closes the popup and moves focus to the input element. |
| space | Closes the popup and moves focus to the input element. |
| up arrow | Moves focus to the same day of the previous week. |
| alt + up arrow | Closes the popup and moves focus to the input element. |
| down arrow | Moves focus to the same day of the next week. |
| right arrow | Moves focus to the next day. |
| left arrow | Moves focus to the previous day. |
| home | Moves focus to the first day of the current week. |
| end | Moves focus to the last day of the current week. |
| page up | Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker. |
| shift + page up | Changes the date to previous year in date picker mode. Has no effect in month or year picker. |
| page down | Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker. |
| shift + page down | Changes the date to next year in date picker mode. Has no effect in month or year picker. |
| Key | Function |
|---|---|
| enter | Triggers the button action. |
| space | Triggers the button action. |