Date Picker for an input element
Last modified by Thomas Mortagne on 2021/03/18 11:29
Transforms a text input element into a Date Picker |
Type | Snippet |
Category | |
Developed by | Oana Florea, Mircea Staicu, Marius Dumitru Florea, XWiki Development Team |
Rating | |
License | GNU Lesser General Public License 2.1 |
Table of contents
Description
Starting with XWiki 4.3 a Date Picker is included by default (i.e. you don't have to install an extension). It is used for Date object properties (by the Date displayer). Here's how you can use it to enhance a text input:
{{velocity}}
## A simple date picker widget.
#set ($discard = $xwiki.ssfx.use('uicomponents/widgets/datepicker/calendarDateSelect.css', true))
#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/datepicker/calendarDateSelect.js', true))
## Used to parse and serialize the selected date using the date format specified in the XClass.
#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/datepicker/simpleDateFormat.js', true))
## A wrapper over the CalendarDateSelect widget that uses the SimpleDateFormat to parse/serialize the dates.
#set ($discard = $xwiki.ssfx.use('uicomponents/widgets/datepicker/dateTimePicker.css', true))
#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/datepicker/dateTimePicker.js'))
{{html}}
<div>
#set ($format = 'dd/MM/yyyy')
#set ($value = $datetool.date)
<input type="text" value="$!escapetool.xml($datetool.format($format, $value))"
class="datetime t$!value.time" title="$!escapetool.xml($format)" />
</div>
{{/html}}
{{/velocity}}
## A simple date picker widget.
#set ($discard = $xwiki.ssfx.use('uicomponents/widgets/datepicker/calendarDateSelect.css', true))
#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/datepicker/calendarDateSelect.js', true))
## Used to parse and serialize the selected date using the date format specified in the XClass.
#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/datepicker/simpleDateFormat.js', true))
## A wrapper over the CalendarDateSelect widget that uses the SimpleDateFormat to parse/serialize the dates.
#set ($discard = $xwiki.ssfx.use('uicomponents/widgets/datepicker/dateTimePicker.css', true))
#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/datepicker/dateTimePicker.js'))
{{html}}
<div>
#set ($format = 'dd/MM/yyyy')
#set ($value = $datetool.date)
<input type="text" value="$!escapetool.xml($datetool.format($format, $value))"
class="datetime t$!value.time" title="$!escapetool.xml($format)" />
</div>
{{/html}}
{{/velocity}}
If you have an older XWiki version, but newer than 3.3, then the same Date Picker is bundled with the AppWithinMinutes. Here's how you can use it:
{{velocity}}
#set($discard = $xwiki.ssx.use("AppWithinMinutes.Date"))
#set($discard = $xwiki.jsx.use("AppWithinMinutes.Date"))
{{html}}
<div>
<input type="text" class="datetime" title="dd MMM yyyy" />
</div>
{{/html}}
{{/velocity}}
#set($discard = $xwiki.ssx.use("AppWithinMinutes.Date"))
#set($discard = $xwiki.jsx.use("AppWithinMinutes.Date"))
{{html}}
<div>
<input type="text" class="datetime" title="dd MMM yyyy" />
</div>
{{/html}}
{{/velocity}}
Attach the Date Picker object to the input element using a JavaScript skin extension:
(function() {
var init = function() {
// The Date Picker object is automatically attached in inline form edit mode.
if ($('inline')) return true;
$$('input.datetime').each(function(dateTimeInput) {
new XWiki.DateTimePicker(dateTimeInput, dateTimeInput.title);
});
return true;
}
(XWiki.domIsLoaded && init()) || document.observe('xwiki:dom:loaded', init);
})();
var init = function() {
// The Date Picker object is automatically attached in inline form edit mode.
if ($('inline')) return true;
$$('input.datetime').each(function(dateTimeInput) {
new XWiki.DateTimePicker(dateTimeInput, dateTimeInput.title);
});
return true;
}
(XWiki.domIsLoaded && init()) || document.observe('xwiki:dom:loaded', init);
})();
If you have an even older version of XWiki, pre 3.3, then you should check the Date Picker Application.