Locale

Change the locale of the datepicker, schedule and client side validation messages.

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Bangla
Bosnian
Czech
Greek
Estonian
Persian
Finnish
Danish
Hindi
Indonesian
Icelandic
Croatian
Japanese
Hungarian
Hebrew
Georgian
Central Kurdish
Khmer
Kyrgyz
Kazakh
Lithuanian
Latvian
Malay
Norwegian
Polish
Romanian
Russian
Slovak
Slovenian
Serbian
Serbian
Swedish
Thai
Turkish
Ukrainian
Uzbek
Vietnamese
Chinese
Chinese

Input Style

Themes

PrimeUIX
Aura Light Emerald Aura Light Emerald
Aura Dark Emerald Aura Dark Emerald
PrimeOne
Saga Blue Saga Blue
Vela Blue Vela Blue
Arya Blue Arya Blue
Bootstrap
Bootstrap Blue Light Bootstrap Blue Light
Bootstrap Purple Light Bootstrap Purple Light
Bootstrap Blue Dark Bootstrap Blue Dark
Bootstrap Purple Dark Bootstrap Purple Dark
Material Design
Material Indigo Light Material Indigo Light
Material Deep Purple Light Material Deep Purple Light
Material Indigo Dark Material Indigo Dark
Material Deep Purple Dark Material Deep Purple Dark
Material Design Compact
Material Compact Indigo Light Material Compact Indigo Light
Material Compact Deep Purple Light Material Compact Deep Purple Light
Material Compact Indigo Dark Material Compact Indigo Dark
Material Compact Deep Purple Dark Material Compact Deep Purple Dark
Legacy
Nova Light Nova Light
Nova Dark Nova Dark
Nova Colored Nova Colored
Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink

DatePicker Metadata

Metadata for the dates in the date picker calendar. Allows you to lazily change attributes like disabled and styleClass for dates when the calendar view changes.

DatePicker Tag Documentation

DatePicker is an input component used to select a date.

NameTypeRequiredDefaultDescription
yearRange String false Year range for navigation. Format: 'start:end'.
yearNavigator String false false Year navigator mode. Options: 'false', 'true', 'dropdown'.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
weekCalculator String false Week calculator algorithm. Options: 'ISO', 'US'.
view String false View mode. Options: 'date', 'month', 'year', 'week'.
valueChangeListener ValueChangeListener false A method binding expression referring to a method for handling a valuchangeevent.
value Object false Value of the component.
validatorMessage String false Custom message to display when validation fails.
validator Validator false A method expression referring to a method validating the input.
valid boolean false true Indicates whether the input's value is valid.
type String false text Input field type.
triggerButtonIcon String false Icon for the trigger button.
touchUI boolean false false When enabled, uses touch-optimized UI.
touchable Boolean false Enable touch if supported by device. NULL uses global default or primefaces.TOUCHABLE. Default: globally enabled.
title String false Specifies extra information about an element (displayed as a tooltip).
timeZone Object false Time zone for the calendar.
timeOnly boolean false false When enabled, shows only time picker.
timeInput boolean false false When enabled, uses time input field instead of spinner.
tabindex String false Specifies the tab order of an element.
submittedValue Object false
styleClass String false Specifies one or more CSS class names for an element.
style String false Specifies an inline CSS style for an element.
stepSecond int false 1 Step value for second spinner.
stepMinute int false 1 Step value for minute spinner.
stepMillisecond int false 1 Step value for millisecond spinner.
stepHour int false 1 Step value for hour spinner.
size int false Integer.MIN_VALUE Number of characters used to determine the width of the input element.
showWeek boolean false false When enabled, shows week numbers. Defaults to true when view is 'week'.
showTime boolean false false When enabled, shows time picker.
showSeconds boolean false false When enabled, shows seconds in time picker.
showOtherMonths boolean false false When enabled, shows dates from other months.
showOnFocus boolean false true When enabled, shows calendar on input focus.
showMinMaxRange boolean false true When enabled, shows min/max range indicators.
showMilliseconds boolean false false When enabled, shows milliseconds in time picker.
showLongMonthNames boolean false false When enabled, shows long month names.
showIcon boolean false false When enabled, shows calendar icon.
showButtonBar boolean false false When enabled, shows button bar with today/clear buttons.
shortYearCutoff String false Cutoff year for two-digit year interpretation.
selectOtherMonths boolean false false When enabled, allows selecting dates from other months.
selectionMode String false Selection mode. Options: 'single', 'multiple', 'range'. Defaults to 'range' when view is 'week', otherwise 'single'.
role String false Defines the role of the element for accessibility purposes.
responsiveBreakpoint int false 576 Responsive breakpoint in pixels for auto-switching to touch mode.
resolverStyle String false SMART Resolver style for date parsing. Options: 'STRICT', 'SMART', 'LENIENT'.
requiredMessage String false Custom message to display when the required validation fails.
required boolean false false Marks component as required.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
readonlyInput boolean false false When enabled, makes the input field readonly.
readonly boolean false false Specifies that an input field is read-only.
rangeSeparator String false - Separator character for date ranges.
placeholder String false Specifies a short hint describing the expected value of the input.
pattern String false Date/time pattern for formatting.
panelStyleClass String false CSS class for the calendar panel.
panelStyle String false Inline style for the calendar panel.
onYearChange String false JavaScript callback for year change event.
onwheel String false Script to execute when the mouse wheel is used.
onselect String false Script to execute when text is selected.
onsearch String false Script to execute when a search is performed.
onscroll String false Script to execute when the element is scrolled.
onreset String false Script to execute when the form is reset.
onpaste String false Script to execute when content is pasted into the element.
onmouseup String false Fires when a mouse button is released over an element.
onmouseover String false Fires when the mouse pointer moves onto an element.
onmouseout String false Fires when the mouse pointer moves out of an element.
onmousemove String false Fires when the mouse pointer is moving while it is over an element.
onmousedown String false Fires when a mouse button is pressed down on an element.
onMonthChange String false JavaScript callback for month change event.
onkeyup String false Fires when a user releases a key.
onkeypress String false Fires when a user presses a key.
onkeydown String false Fires when a user is pressing a key.
oninvalid String false Script to execute when the element's value is invalid.
oninput String false Script to execute when the element receives user input.
onfocus String false Fires when an element gets focus.
ondrop String false Script to execute when a dragged element is dropped.
ondragstart String false Script to execute at the start of a drag operation.
ondragover String false Script to execute when a dragged element is over a valid drop target.
ondragleave String false Script to execute when a dragged element leaves a valid drop target.
ondragenter String false Script to execute when a dragged element enters a valid drop target.
ondragend String false Script to execute at the end of a drag operation.
ondrag String false Script to execute when an element is dragged.
ondblclick String false Fires when a mouse double-click on the element.
oncut String false Script to execute when content is cut from the element.
oncopy String false Script to execute when content is copied from the element.
oncontextmenu String false Script to execute when the context menu is triggered.
onclick String false Fires when a mouse click on the element.
onchange String false Fires when the value of an element has been changed.
onblur String false Fires when an element loses focus.
numberOfMonths int false 1 Number of months to display.
monthNavigator boolean false false When enabled, shows month navigator.
model DateMetadataModel false DateMetadataModel for advanced date metadata.
mindate Object false Minimum selectable date.
maxlength int false Integer.MIN_VALUE Defines the maximum number of characters allowed in the input.
maxDateCount int false 2147483647 Maximum number of dates that can be selected.
maxdate Object false Maximum selectable date.
maskSlotChar String false _ Character to display in empty mask slots.
maskAutoClear boolean false true When enabled, clears the input when it doesn't match the mask.
mask String false false Input mask pattern. Set to 'false' to disable.
localValueSet boolean false false Indicates whether the local value of the component has been set.
locale Object false Locale for the calendar.
lang String false Specifies the language of the element's content.
label String false A localized user presentable name.
keepInvalid boolean false false When enabled, keeps invalid input value.
inputStyleClass String false CSS class for the input element.
inputStyle String false Inline style for the input element.
inputmode String false Specifies the type of data expected in the input, aiding virtual keyboards.
inline boolean false false When enabled, displays calendar inline.
immediate boolean false false When set true, process validations logic is executed at apply request values phase for this component.
id String false generated Unique identifier of the component in a namingContainer.
hourFormat String false Hour format. Options: '12' for 12-hour, '24' for 24-hour.
hideOnRangeSelection boolean false false When enabled, hides calendar after range selection.
hideOnDateTimeSelect boolean false false When enabled, hides calendar after date/time selection.
focusOnSelect boolean false false When enabled, focuses input after selection.
flex Boolean false Use modern FlexGrid CSS for this component.
enabledDates List false List of enabled dates.
disabledDays List false List of disabled days of week (0=Sunday, 6=Saturday).
disabledDates List false List of disabled dates.
disabled boolean false false Specifies that an element should be disabled.
dir String false ltr Direction indication for text that does not inherit directionality.
defaultSecond int false 0 Default second value.
defaultMinute int false 0 Default minute value.
defaultMillisecond int false 0 Default millisecond value.
defaultHour int false 0 Default hour value.
dateTemplate String false Template for custom date rendering.
converterMessage String false Custom message to display when conversion fails.
converter Converter false EL expression resolves to a converter instance or literal converter ID defining a component converter.
buttonTabindex String false Tabindex for the trigger button.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
beforeShow String false JavaScript callback to execute before showing the calendar.
autoMonthFormat boolean false true When enabled, automatically formats month display.
autoDetectDisplay boolean false true When enabled, automatically detects display mode.
autocomplete String false Controls browser autocomplete behavior. Possible values are 'on', 'off', and 'new-password'.
ariaLabelledBy String false
ariaDescribedBy String false Identifies the element(s) that describe the object, enhancing accessibility.
appendTo String false @(body) Search expression to append the calendar panel to.
alt String false Alternate textual description of the input field.
accesskey String false Access key to transfer focus to the input element.
Loading...
Tag DocumentationNew DocumentationNew Documentation JSDoc java.util.Date Java 8+ Date APIs Metadata

Usage


<style>
    .start { background: #81c784; }
    .deadline { background: #ef9a9a; }
    .ui-datepicker-calendar .ui-state-disabled { opacity: .2; }
</style>

<p:growl id="growl"/>

<div class="card">
    <h:form id="form">
        <h:panelGrid columns="2" cellpadding="7">
            <p:outputLabel for="basic" value="Basic"/>
            <p:datePicker id="basic" value="#{datePickerMetadataView.date1}"
                          model="#{datePickerMetadataView.model}"/>

            <p:outputLabel for="lazy" value="Lazy and Navigator"/>
            <p:datePicker pattern="yyyy-MM-dd" id="lazy" value="#{datePickerMetadataView.date2}"
                          model="#{datePickerMetadataView.modelLazy}"
                          monthNavigator="true" yearNavigator="true"/>

            <p:outputLabel for="lazyEnabled" value="Lazy and Navigator - Enabled dates"/>
            <p:datePicker pattern="yyyy-MM-dd" id="lazyEnabled" value="#{datePickerMetadataView.date5}"
                          model="#{datePickerMetadataView.modelEnabledDaysLazy}"
                          monthNavigator="true" yearNavigator="true"/>

            <p:outputLabel for="basicEvent" value="Basic and Event"/>
            <p:datePicker id="basicEvent" value="#{datePickerMetadataView.date3}"
                          model="#{datePickerMetadataView.model}">
                <p:ajax event="viewChange" listener="#{datePickerMetadataView.onViewChange}" update="growl"/>
            </p:datePicker>

            <p:outputLabel for="lazyEvent" value="Lazy and Event"/>
            <p:datePicker inline="true" id="lazyEvent" value="#{datePickerMetadataView.date4}"
                          model="#{datePickerMetadataView.modelLazy}">
                <p:ajax event="viewChange" listener="#{datePickerMetadataView.onViewChange}" update="growl"/>
            </p:datePicker>

            <p:outputLabel for="lazyEnabledEvent" value="Lazy and Event - Enabled dates"/>
            <p:datePicker pattern="yyyy-MM-dd" id="lazyEnabledEvent" value="#{datePickerMetadataView.date6}"
                          model="#{datePickerMetadataView.modelEnabledDaysLazy}">
                <p:ajax event="viewChange" listener="#{datePickerMetadataView.onViewChange}" update="growl"/>
            </p:datePicker>
        </h:panelGrid>
    </h:form>
</div>