Date Picker deprecated since 1.1.0

BootsFaces derives the Date Picker component from jQuery UI's widget because of its ease of use and its configurability.

Caveat: There's a new component, the <b:dateTimePicker />, that doesn't need jQueryUI. We recommend to use the new component. The <b:datepicker> is considered deprecated and will be removed in one of the next versions of BootsFaces.

Date Picker modes

The <b:datepicker> supports six modes for displaying the widget, specified with the attributemode:

b:datepicker mode attribute Description
popup In this mode, the Date picker is triggered only when the user clicks in the field.
popup-icon In this mode, the Date picker is triggered either when the user clicks in the field, or when the user clicks on the calendar icon. The icon is positioned on the right of the input.
icon-popup Same as above, but the icon is positioned on the left of the input.
toggle-icon This is the default mode. In this mode, the Date picker is triggered only when the user clicks on the calendar icon. The icon is positioned on the right of the input.
icon-toggle Same as above, but the icon is positioned on the left of the input.
inline In this mode, the Date picker is displayed directly inline and no input field is shown.
Widget options

BootsFaces <b:datepicker> tag supports jQuery UI's widget most relevant options:

Option Type Description
changeMonth boolean Boolean value to specify if month selector should be shown.
changeYear boolean Boolean value to specify if year selector should be shown.
firstDay int Set the first day of the week: Sunday is 0, Monday is 1, etc. Default is 0 (Sunday).
numberOfMonths int Number of months to show.
showButtonPanel boolean Boolean value to specify if row Buttons to the bottom of calendar should be shown.
showWeek boolean Boolean value to specify if Week number should be shown.
Date Picker examples
Date:
Date Picker with showButtonPanel, changeMonth, changeYear set to true.
Date(3 months):
Date Picker with numberOfMonths="3" .
Inline:
Inline Date Picker with showWeek="true" and firstDay="1" .

Mandatory Dates since 0.9.0

Datepickers support the required attribute:

Responsive design since 0.9.0

You can use all the attributes controlling the responsive behaviour of <b:column /> also with <b:datepicker />. Note that this is equivalent to putting it into a <b:column />. In particular, the CSS styles are inside the column div.

Visibility depending on screen size

You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:


Visible on >= md:
Visible on <= sm:
Visible on sm...lg:
Visible on xs and md:
Col-md-6, offset 2:

Reference section

Attribute Default value Description
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
changeMonth false Boolean value to specify if month selector should be shown.
changeYear false Boolean value to specify if year selector should be shown.
firstDay 0 Set the first day of the week: Sunday is 0, Monday is 1, etc.
id (none) Unique identifier of the component in a namingContainer.
lang (none) This option allows you to localize the DatePicker, specifying the language code (eg. it, fr, es, nl). The datepicker uses the ISO 639-1 language codes eventually followed by ISO 3166-1 country codes. The Datepicker is localized with the language specified by the ViewRoot Locale.
mode (none) Controls how the Calendar is showed, can be inline or popup. Default is popup.
numberOfMonths 0 Number of months to show.
placeholder (none) The placeholder attribute shows text in a field until the field is focused upon, then hides the text.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
showButtonPanel false Boolean value to specify if row Buttons to the bottom of calendar should be shown.
showWeek false Boolean value to specify if Week number should be shown.
tooltip (none) The text of the tooltip.
tooltipDelay (none) The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltipDelayHide (none) The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltipDelayShow (none) The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltipPosition (none) Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".
value (none) Value.
  • <b:datePicker /> is an input tag bearing the CSS-classes form-control and hasDatepicker.
  • If the attribute required is true, the pseudo CSS class bf-required is added. Thus you can define your custom style for required fields.
  • If there's a FacesMessage, the input field is bears one of the pseudo CSS classes bf-info, bf-warning, bf-error or bf-fatal. If there are no messages, the input field bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default.