Calendar

Calendar, also known as DatePicker, is a form component to work with dates.


import { Calendar } from 'primereact/calendar';
         

Calendar is used a controlled input component with value and onChange properties.


<Calendar value={date} onChange={(e) => setDate(e.value)} />
         

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 short
  • DD - day name long
  • m - month of year (no leading zero)
  • mm - month of year (two digit)
  • M - month name short
  • MM - month name long
  • y - year (two digit)
  • yy - year (four digit)
  • @ - Unix timestamp (ms since 01/01/1970)
  • ! - Windows ticks (100ns since 01/01/0001)
  • '...' - literal text
  • '' - single quote
  • anything else - literal text

<Calendar value={date} onChange={(e) => setDate(e.value)} dateFormat="dd/mm/yy" />
         

Locale based settings such as labels, dateFormat and firstDayOfWeek are derived from the global Locale configuration. In case, a certain calendar needs to be customized, locale property can be used to override the global setting.


<Calendar value={date} onChange={(e) => setDate(e.value)} locale="es" />
         

An additional icon is displayed next to the input field when showIcon is present.


<Calendar value={date} onChange={(e) => setDate(e.value)} showIcon />
         

Boundaries for the permitted dates that can be entered are defined with minDate and maxDate properties.


<Calendar id="minmax" value={date} onChange={(e) => setDate(e.value)} minDate={minDate} maxDate={maxDate} readOnlyInput />
         

In order to choose multiple dates, set selectionMode as multiple. In this mode, the value binding should be an array.


<Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="multiple" readOnlyInput />
         

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.


<Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput />
         

When showButtonBar is present, today and clear buttons are displayed at the footer.


<Calendar value={date} onChange={(e) => setDate(e.value)} showButtonBar />
         

A time picker is displayed when showTime is enabled 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.


<Calendar value={datetime12h} onChange={(e) => setDateTime12h(e.value)} showTime hourFormat="12" />
<Calendar value={datetime24h} onChange={(e) => setDateTime24h(e.value)} showTime hourFormat="24" />
<Calendar value={time} onChange={(e) => setTime(e.value)} timeOnly />
         

Month only picker is enabled by specifying view as month in addition to a suitable dateFormat.


<Calendar value={date} onChange={(e) => setDate(e.value)} view="month" dateFormat="mm/yy" />
         

Specifying view as year in addition to a suitable dateFormat enables the year picker.


<Calendar value={date} onChange={(e) => setDate(e.value)} view="year" dateFormat="yy" />
         

Number of months to display is configured with the numberOfMonths property.


<Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={2} />
         

Custom content can be placed inside date cells with the dateTemplate property that takes a Date as a parameter.


<Calendar value={date} onChange={(e) => setDate(e.value)} dateTemplate={dateTemplate} />
         

When touchUI is enabled, overlay is displayed as optimized for touch devices.


<Calendar value={date} onChange={(e) => setDate(e.value)} touchUI />
         

Calendar is displayed as a popup by default, add inline property to customize this behavior.

WkSuMoTuWeThFrSa
432930311234
44567891011
4512131415161718
4619202122232425
47262728293012

<Calendar value={date} onChange={(e) => setDate(e.value)} inline showWeek />

         

A floating label appears on top of the input field when focused.


<span className="p-float-label">
    <Calendar inputId="birth_date" value={date} onChange={(e) => setDate(e.value)} />
    <label htmlFor="birth_date">Birth Date</label>
</span>
         

Invalid state style is added using the p-invalid class to indicate a failed validation.


<Calendar className="p-invalid" />
         

When disabled is present, the element cannot be edited and focused.


<Calendar disabled />
         

Compatibility with popular React form libraries.

Formik is a popular library for handling forms in React.

 

<form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
    <label htmlFor="cal_date">Date</label>
    <Toast ref={toast} />
    <Calendar
        inputId="cal_date"
        name="date"
        value={formik.values.date}
        className={classNames({ 'p-invalid': isFormFieldInvalid('date') })}
        onChange={(e) => {
            formik.setFieldValue('date', e.target.value);
        }}
    />
    {getFormErrorMessage('date')}
    <Button type="submit" label="Submit" />
</form>
         

React Hook Form is another popular React library to handle forms.

 

<Toast ref={toast} />
<Controller
    name="date"
    control={form.control}
    rules={{ required: 'Date is required.' }}
    render={({ field, fieldState }) => (
        <>
            <label htmlFor={field.name}>Date</label>
            <Calendar inputId={field.name} value={field.value} onChange={field.onChange} dateFormat="dd/mm/yy" className={classNames({ 'p-invalid': fieldState.error })} />
            {getFormErrorMessage(field.name)}
        </>
    )}
/>
         

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-calendarMain container element
p-calendar-w-btnMain container element when button is enabled.
p-calendar-timeonlyMain container element in time picker only mode.
p-inputtextInput element
p-datepickerDatepicker element
p-datepicker-inlineDatepicker element in inline mode
p-monthpickerDatepicker element in month view.
p-monthpicker-monthMonth cell in month view mode.
p-datepicker-touch-uiDatepicker element in touch ui mode.
p-datepicker-calendarTable containing dates of a month.
p-datepicker-current-dayCell of selected date.
p-datepicker-todayCell of today's date.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Screen Reader

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 calendar 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 chooseDatekey 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.

Calendar 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.


<label htmlFor="date1">Date</label>
<Calendar inputId="date1" />

<span id="date2">Date</span>
<Calendar aria-labelledby="date2" />

<Calendar aria-label="Date" />
     

Choose Date Button Keyboard Support

KeyFunction
spaceOpens popup and moves focus to the selected date, if there is none focuses on today.
enterOpens popup and moves focus to the selected date, if there is none focuses on today.

Popup Keyboard Support

KeyFunction
escapeCloses the popup and moves focus to the input element.
tabMoves focus to the next focusable element within the popup.
shift + tabMoves focus to the next focusable element within the popup.

Header Buttons Keyboard Support

KeyFunction
enterTriggers the button action.
spaceTriggers the button action.

Date Grid Keyboard Support

KeyFunction
enterSelects the date, closes the popup and moves focus to the input element.
spaceSelects the date, closes the popup and moves focus to the input element.
up arrowMoves focus to the same day of the previous week.
down arrowMoves focus to the same day of the next week.
right arrowMoves focus to the next day.
left arrowMoves focus to the previous day.
homeMoves focus to the first day of the current week.
endMoves focus to the last day of the current week.
page upChanges 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 upChanges the date to previous year in date picker mode. Has no effect in month or year picker
page downChanges 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 downChanges the date to next year in date picker mode. Has no effect in month or year picker

Footer Buttons Keyboard Support

KeyFunction
enterTriggers the button action.
spaceTriggers the button action.