Please make sure you have read the Tag Syntax document and understand how tag attribute syntax works.

Description

Renders datepicker element.

Implementation was changed in WebWork 2.2 to use jscalendar instead of non locale aware tigracalendar. Check locale and format settings if you used the old widget in your applications. Be sure to include proper stylesheet as described below if you don't want the calender widget to look transparent.

Important: Be sure to set the id attributs if not used within a <ww:form /> tag, as it takes care of setting the id for you, being required to copy selected date to text input element.

Following a reference for the format parameter (copied from jscalendar documentation):
%a abbreviated weekday name
%A full weekday name
%b abbreviated month name
%B full month name
%C century number
%d the day of the month ( 00 .. 31 )
%e the day of the month ( 0 .. 31 )
%H hour ( 00 .. 23 )
%I hour ( 01 .. 12 )
%j day of the year ( 000 .. 366 )
%k hour ( 0 .. 23 )
%l hour ( 1 .. 12 )
%m month ( 01 .. 12 )
%M minute ( 00 .. 59 )
%n a newline character
%p ``PM'' or ``AM''
%P ``pm'' or ``am''
%S second ( 00 .. 59 )
%s number of seconds since Epoch (since Jan 01 1970 00:00:00 UTC)
%t a tab character
%U, %W, %V the week number
%u the day of the week ( 1 .. 7, 1 = MON )
%w the day of the week ( 0 .. 6, 0 = SUN )
%y year without the century ( 00 .. 99 )
%Y year including the century ( ex. 1979 )
%% a literal % character

Parameters

Name

Required

Default

Type

Description

language false The language of the current Locale String The language to use for the widget texts and localization presets.
format false Dateformat specified by language preset (%Y/%m/%d for en) String The format to use for date field.
showstime false false String Whether time selector is to be shown. Valid values are "true", "false", "24" and "12".
singleclick false true Boolean Whether to use selected value after single or double click.
maxlength false   Integer HTML maxlength attribute
maxLength false   Object/String Deprecated. Use maxlength instead.
readonly false false Boolean Whether the input is readonly
size false   Integer HTML size attribute
theme false   Object/String The theme (other than default) to use for rendering the element
templateDir false   Object/String The template directory (other than default) to used to find the themes and hence the template.
template false   Object/String The template (other than default) to use for rendering the element
cssClass false   Object/String The css class to use for element
cssStyle false   Object/String The css style definitions for element ro use
title false   Object/String Set the html title attribute on rendered html element
disabled false   Object/String Set the html disabled attribute on rendered html element
label false   Object/String Label expression used for rendering a element specific label
labelPosition false left Object/String deprecated.
labelposition false   Object/String define label position of form element (top/left)
requiredposition false   Object/String define required position of required form element (left|right)
name false   Object/String The name to set for element
required false false Boolean If set to true, the rendered element will indicate that input is required
tabindex false   Object/String Set the html tabindex attribute on rendered html element
value false   Object/String Preset the value of input element.
onclick false   Object/String Set the html onclick attribute on rendered html element
ondblclick false   Object/String Set the html ondblclick attribute on rendered html element
onmousedown false   Object/String Set the html onmousedown attribute on rendered html element
onmouseup false   Object/String Set the html onmouseup attribute on rendered html element
onmouseover false   Object/String Set the html onmouseover attribute on rendered html element
onmousemove false   Object/String Set the html onmousemove attribute on rendered html element
onmouseout false   Object/String Set the html onmouseout attribute on rendered html element
onfocus false   Object/String Set the html onfocus attribute on rendered html element
onblur false   Object/String Set the html onblur attribute on rendered html element
onkeypress false   Object/String Set the html onkeypress attribute on rendered html element
onkeydown false   Object/String Set the html onkeydown attribute on rendered html element
onkeyup false   Object/String Set the html onkeyup attribute on rendered html element
onselect false   Object/String Set the html onselect attribute on rendered html element
onchange false   Object/String Set the html onchange attribute on rendered html element
accesskey false   Object/String Set the html accesskey attribute on rendered html ekement
tooltip false String Set the tooltip of this particular component
tooltipConfig false String Set the tooltip configuration
id false   Object/String id for referencing element. For UI and form tags it will be used as HTML id attribute

Examples

Date in application's locale format:
    <ww:datepicker name="order.date" id="order.date" />
Date in german locale, with german texts:
    <ww:datepicker name="delivery.date" id="delivery.date" template="datepicker_js.ftl" language="de" />
Date in german locale, with german texts and custom date format, including time:
    <ww:datepicker name="invoice.date" id="invoice.date" template="datepicker_js.ftl" language="de" format="%d. %b &Y %H:%M" showstime="true" />

If you use this jscalendar based datepicker widget, you might want to use one of the standard stylesheets provided with jscalendar (all distribution stylesheets are included in webwork jar). The easiest way to do so is to place the <ww:head/> tag in the head of your html page, as it takes care of including calendar css. Otherwise, to manually activate the calendar-blue style, include the following in your stylesheet definition:

<link href="<ww:url value="/webwork/jscalendar/calendar-blue.css" />" rel="stylesheet" type="text/css" media="all"/>