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.
The <b:datepicker>
supports six modes for displaying the widget, specified with the attributemode
:
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. |
Datepickers support the
required
attribute:
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.
You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:
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
.
required
is true, the pseudo CSS class bf-required
is added.
Thus you can define your custom style for required fields.
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.