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.