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.


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

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

Date Picker based on pickaday.js

Tag name datepicker
Component type io.tornadofaces.component.Datepicker
Renderer type io.tornadofaces.component.DatepickerRenderer
widgetVar Widget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar.false
formatClient side format. Server side format is set via the converter.false
valueThe valuefalse
localeLocale used to determine client side locale. The value is globally configured for moment.js.false
positionPreferred 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
repositioncan be set to false to not reposition datepicker within the viewport, forcing it to take the configured position (default: true) false
containerDOM node to render calendar into, see container example (default: undefined)false
firstDayFirst day of the week (0: Sunday, 1: Monday, etc)false
onSelectCallback function for when a date is selectedfalse
triggerUse a different element to trigger opening the datepicker, see trigger example (default to field) false
renderedShould 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.