• Settings
    • 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
  • Resources

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