Date Picker

Date Picker based on pickaday.js

Pickaday uses moment.js for client side date formatting. Be aware that client and server side formats may differ.

Important! If you don't add ajax behavior to the datepicker, you have to assign it an id for the client side functionality to kick in. The reason for this is that inputText elements do not get an id unless they have client behaviors.

Example

Documentation


<t:form-element label="Manual submit" small="12" medium="4">
    <t:datepicker id="mypicker" format="YYYY-MM-DD" value="#{controller.date}">
        <f:convertDateTime pattern="yyyy-MM-dd"/>
    </t:datepicker>
    <t:commandLink button="true" value="Submit" color="success" action="#{controller.save}" render="notification"/>
</t:form-element>

<t:form-element label="AJAX on change, Norwegian locale" small="12" medium="4">
    <t:datepicker format="L" locale="nb" value="#{controller.date}">
        <f:ajax listener="#{controller.onDateChange}" render="notification"/>
        <f:convertDateTime pattern="dd.MM.yyyy"/>
    </t:datepicker>
</t:form-element>

Date Picker based on pickaday.js

Info

Tag name	datepicker
Component type	io.tornadofaces.component.Datepicker
Renderer type	io.tornadofaces.component.DatepickerRenderer

Attributes

Name	Description	Required
widgetVar	Widget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar.	false
format	Client side format. Server side format is set via the converter.	false
converter	Converter	false
value	The value	false
locale	Locale used to determine client side locale. The value is globally configured for moment.js.	false
position	Preferred position of the datepicker relative to the form field, e.g.: top right, bottom, right. Note: automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see positions example (default to 'bottom left')	false
reposition	can be set to false to not reposition datepicker within the viewport, forcing it to take the configured position (default: true)	false
container	DOM node to render calendar into, see container example (default: undefined)	false
firstDay	First day of the week (0: Sunday, 1: Monday, etc)	false
onSelect	Callback function for when a date is selected	false
trigger	Use a different element to trigger opening the datepicker, see trigger example (default to field)	false
rendered	Should this component be rendered?	false

Ajax Behavior Events

change will be called when a date is selected.

More properties are available, see pickaday.js site.