lara-light-indigo

Calendar

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

Popup
Inline
January2022
WkSuMoTuWeThFrSa
512627282930311
522345678
19101112131415
216171819202122
323242526272829
4303112345
Import via Module

import { Calendar } from 'primereact/calendar';
 
Import via CDN

<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/calendar/calendar.min.js"></script>
 
Getting Started

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


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

Calendar is displayed in a popup by default whereas inline property needs to be enabled for inline mode.


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

viewDate defines the date whose month and year are used to display the calendar. By default calendar uses value to render the view and falls back to today's date when value is not defined. In case you'd like to display a different month/year use viewDate. The usage of this property can either be controlled or uncontrolled. In controlled mode, onViewDateChange is required to manage the viewDate whereas in uncontrolled mode, viewDate is used only once in initial rendering and ignored in updates. If you'd like to change the displayed month/year programmatically, use the onViewDateChange in controlled mode.


<Calendar value={dates} onChange={(e) => setDate(e.value)} viewDate={viewDate} onViewDateChange={(e) => setViewDate(e.value)}></Calendar>
 
Selection Mode

Calendar offers "single" (default), "multiple" and "range" selection types controlled via the selectionMode property. In single, mode the bound value should be an array whereas in multiple case an array is required. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value is the end date. Note that time picker is not currently supported in multiple and range modes.


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

Default date format is "mm/dd/yy" which can be customized using the dateFormat property.


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

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
Locale

Translations for the calendar are defined with the Locale API.

Time

TimePicker is enabled with showTime property and hourFormat is used to select the 24 (default) or 12 hour mode. Optionally enabling timeOnlydisplays a calendare with time controls only.


<Calendar showTime hourFormat="12" value={date1} onChange={(e) => setDate1(e.value)}></Calendar>
<Calendar showTime hourFormat="24" value={date2} onChange={(e) => setDate2(e.value)}></Calendar>
<Calendar timeOnly showTime hourFormat="24" value={date3} onChange={(e) => setDate3(e.value)}></Calendar>
 
Date Restriction

To disable entering dates manually, set readOnlyInput to true and to restrict selectable date ranges use minDate and maxDate options.


<Calendar minDate={minDate} maxDate={maxDate} readOnlyInput value={date} onChange={(e) => setDate(e.value)}></Calendar>
 
Disable specific dates and/or days

Specific dates or days can be disabled as well, in this case set readOnlyInput to true and to restrict selectable dates use disabledDates and/or disabledDays options. disabledDatesproperty should be an array of dates and disabledDays should be an array of disabled weekdays.


<Calendar disabledDates={invalidDates} disabledDays={[0,6]} readOnlyInput value={date} onChange={(e) => setDate(e.value)}></Calendar>
 
Button Bar

Button bar displays today and clear buttons and activated using the showButtonBar property.


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

Displaying multiple months is enabled by setting numberOfMonths property to a value greater than 1.


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

Date cell contents can be templated using the dateTemplate property that returns the content of a cell. This is a handy feature to highlight specific dates. Note that the variable passed to the template is not a date instance but a metadata object to represent a Date with "day", "month", "year", "otherMonth", "today" and "selectable" properties to represent the date. Example below changes the styling of dates between 10 and 15.


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

dateTemplate(date) {
    if (date.day > 10 && date.day < 15) {
        return (
            <div style={{backgroundColor: '#1dcbb3', color: '#ffffff', fontWeight: 'bold', borderRadius: '50%', width: '2em', height: '2em', lineHeight: '2em', padding: 0}}>{date.day}</div>
        );
    }
    else {
        return date.day;
    }
}
 
Header and Footer

The headerTemplate and footerTemplate properties are available to place custom content at these sections.


<Calendar value={date} onChange={(e) => setDate(e.value)} headerTemplate={() => <Button label="Custom Button" />} footerTemplate={() => <div>Footer Content</div>} />
 
Month and Year Navigator

Navigators are used to quickly change the displayed month and year using dropdowns. Enabling monthNavigator displays a dropdown with months whereas yearNavigator along with yearRange displays available years. Format of the yearRange is "startYear:endYear".


<Calendar value={date} onChange={(e) => setDate(e.value)} monthNavigator yearNavigator yearRange="2010:2030" />
 
Navigator Templates

The monthNavigatorTemplate and yearNavigatorTemplate properties are available to place custom content at the navigator sections.


<Calendar value={date} onChange={(e) => setDate(e.value)} monthNavigator yearNavigator yearRange="2010:2030" monthNavigatorTemplate={this.monthNavigatorTemplate} />
 

const monthNavigatorTemplate = (options) => {
    // options.onChange: Change event for the default element.
    // options.className: Style class of the default element.
    // options.value: Selected value.
    // options.names: Names of options.
    // options.options: Options as SelectItem API.
    // options.element: Default element created by the component.
    // options.props: component props.
}
 
Month Picker

Month picker is used to select month and year only without the date, set view mode as "month" to activate month picker.


<Calendar value={date} onChange={(e) => setDate(e.value)} view="month" dateFormat="mm/yy" yearNavigator yearRange="2010:2030"/>
 
Touch UI

Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.


<Calendar value={date} onChange={(e) => setDate(e.value)} touchUI />
 
Properties
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
namestringnullName of the input element.
valueanynullValue of the component.
visiblebooleanfalseSpecifies the visibility of the overlay.
viewDatedatenullDate instance whose month and year are used to display the calendar.
stylestringnullInline style of the element.
classNamestringnullStyle class of the element.
inlinebooleanfalseWhen enabled, displays the calendar as inline instead of an overlay.
inputIdstringnullIdentifier of the input element.
inputStyleobjectnullInline style of the input element.
inputClassNamestringnullStyle class of the input element.
inputModestringnullHTML inputmode attribute of input.
requiredbooleanfalseWhen present, it specifies that an input field must be filled out before submitting the form.
readOnlyInputbooleannullWhen specified, prevents entering the date manually with keyboard.
keepInvalidbooleanfalseKeep invalid value when input blur.
maskstringnullMask pattern for input element.
disabledbooleanfalseWhen specified, disables the component.
tabIndexnumbernullIndex of the element in tabbing order.
placeholderstringnullPlaceholder text for the input.
showIconbooleanfalseWhen enabled, displays a button with icon next to input.
iconstringpi pi-calendarIcon of the calendar button.
iconPosstringrightIcon position of the calendar button. Valid values is 'left' and 'right'.
showOnFocusbooleantrueWhen disabled, datepicker will not be visible with input focus.
numberOfMonthsnumber1Number of months to display.
viewstringdateType of view to display, valid valids are "date" for datepicker and "month" for month picker.
touchUIbooleanfalseWhen enabled, calendar overlay is displayed as optimized for touch devices.
showTimebooleanfalseWhether to display timepicker.
timeOnlybooleanfalseWhether to display timepicker only.
showSecondsbooleanfalseWhether to show the seconds in time picker.
showMillisecbooleanfalseWhether to show the milliseconds in time picker.
hourFormatstring24Specifies 12 or 24 hour format.
localestringenUsed to display the values ​​of the locale object defined in the Locale API
stepHournumber1Hours to change per step.
stepMinutenumber1Minutes to change per step.
stepSecondnumber1Seconds to change per step.
stepMillisecnumber1Milliseconds to change per step.
shortYearCutoffstring+10The cutoff year for determining the century for a date.
hideOnDateTimeSelectbooleanfalseWhether to hide the overlay on date selection when showTime is enabled.
showWeekbooleanfalseWhen enabled, calendar will show week numbers.
dateFormatstringmm/dd/yyFormat of the date.
panelStyleobjectnullInline style of the datetimepicker panel.
panelClassNamestringnullStyle class of the datetimepicker panel.
monthNavigatorbooleanfalseWhether the month should be rendered as a dropdown instead of text.
yearNavigatorbooleanfalseWhether the year should be rendered as a dropdown instead of text.
disabledDatesarray;nullArray with dates to disable.
disabledDaysarraynullArray with disabled weekday numbers.
minDateDatenullThe minimum selectable date.
maxDateDatenullThe maximum selectable date.
maxDateCountnumbernullMaximum number of selectable dates in multiple mode.
showOtherMonthsbooleantrueWhether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
selectOtherMonthsbooleanfalseWhether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
showButtonBarbooleanfalseWhether to display today and clear buttons at the footer
todayButtonClassNamestringp-secondary-buttonStyle class of the today button.
clearButtonClassNamestringp-secondary-buttonStyle class of the clear button.
baseZIndexnumber0Base zIndex value to use in layering.
autoZIndexbooleantrueWhether to automatically manage layering.
appendToDOM element | stringdocument.bodyDOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
tooltipanynullContent of the tooltip.
tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
dateTemplatefunctionnullFunction that gets a date information and returns the cell content in datepicker.
monthNavigatorTemplatefunctionnullFunction that gets a navigator information and returns the navigator element in header.
yearNavigatorTemplatefunctionnullFunction that gets a navigator information and returns the novigator in header.
transitionOptionsobjectnullThe properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
Events
NameParametersDescription
onFocusevent: Browser eventCallback to invoke on focus event of input field.
onBlurevent: Browser eventCallback to invoke on blur event of input field.
onInputevent: Browser eventCallback to invoke on input event of input field.
onSelectoriginalEvent: Browser event
value: Selected date
Callback to invoke when a date is selected.
onChangeoriginalEvent: Browser event
value: New date
Callback to invoke when value changes.
onTodayButtonClickevent: Browser eventCallback to invoke when today button is clicked.
onClearButtonClickevent: Browser eventCallback to invoke when clear button is clicked.
onViewDateChangeoriginalEvent: Browser event
value: New date
Callback to invoke when the displayed month/year is changed.
onShow-Callback to invoke when overlay panel or modal becomes visible.
onHide-Callback to invoke when overlay panel or modal becomes hidden.
onVisibleChangeevent.visible: Whether the overlay is visible
event.type: Action type when the overlay is visible/hidden
event.callback: It is used to refocus the input field in some cases when the overlay is hidden.
Callback to invoke when visible is changed.
Styling

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

None.

Component Scale

Input Style

Ripple Effect

Free Themes

Built-in component themes created by the PrimeReact Theme Designer.

Bootstrap
Blue
Purple
Blue
Purple
Material Design
Indigo
Deep Purple
Indigo
Deep Purple
Material Design Compact
Indigo
Deep Purple
Indigo
Deep Purple
Tailwind
Tailwind Light
Fluent UI
Blue
PrimeOne Design - 2022 NEW
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
PrimeOne Design - 2021
Saga Blue
Saga Green
Saga Orange
Saga Purple
Vela Blue
Vela Green
Vela Orange
Vela Purple
Arya Blue
Arya Green
Arya Orange
Arya Purple
Premium Themes

Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.

Soho Light
Soho Dark
Viva Light
Viva Dark
Mira
Nano

Legacy Free Themes

Nova
Nova Alt
Nova Accent
Luna Blue
Luna Green
Luna Amber
Luna Pink
Rhea

Premium Create-React-App Templates

Beautifully crafted premium create-react-app application templates by the PrimeTek design team.

Sakai
Atlantis
Freya
Ultima
Diamond
Sapphire
Serenity
Babylon
Avalon
Apollo
Roma