Date Picker for an input element

Last modified by Thomas Mortagne on 2021/03/18 11:29

calendarTransforms a text input element into a Date Picker
TypeSnippet
Category
Developed by

Oana Florea, Mircea Staicu, Marius Dumitru Florea, XWiki Development Team

Rating
1 Votes
LicenseGNU 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}}

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}}

The title attribute for the input element specifies the format for the date.

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);
})();

If you have an even older version of XWiki, pre 3.3, then you should check the Date Picker Application.

Tags:
     

Get Connected