Date Picker Application

Last modified by Thomas Mortagne on 2023/11/06 00:21

cogDate Picker
TypeXAR
Category
Developed by

Jerome

Active Installs9
Rating
1 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

Description

Starting with XWiki 4.3 the Date Picker is included by default. Now if you're on an older version you should probably use the Date Picker for an input element because this extension is not maintained anymore.

How to use

Including the proper resources

  • Starting with XWiki Enterprise 1.8
    $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js")
    $xwiki.jsx.use("XWiki.DatePickerExtension")
    $xwiki.ssx.use("XWiki.DatePickerExtension")
  • Starting with XWiki Enterprise 2.4 all JavaScript extensions are included by default using deferred loading, in order to improve page load speed. Because the code of the DatePicker extension is not that well written we have to include it with:
    $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js")
    $xwiki.jsx.use("XWiki.DatePickerExtension", {'defer':false})
    $xwiki.ssx.use("XWiki.DatePickerExtension")

Adding a date picker to an input field

<input type="text" name="mydate" id="mydate_id" />
<script type="text/javascript">
var dpicker = new DatePicker({
 relative : 'mydate_id',
 language: "$context.language",
 dateFormat: [ ["dd","mm","yyyy"], "/" ]
});
</script>

for full reference, see this datepicker widget.

A code example

The following example is an extension to the default class sheet velocity code supplied when you create a new class like in the FAQ tutorial. In this case any properties that are date type will have the date picker added to enter the date.

## Includes for the date picker for date properties
$xwiki.jsfx.use("js/scriptaculous/scriptaculous.js")
$xwiki.jsx.use("XWiki.DatePickerExtension")
$xwiki.ssx.use("XWiki.DatePickerExtension")

#set($class = $doc.getObject("Projects.ProjectClass").xWikiClass)
#set($hasProps = false)
#foreach($prop in $class.properties)
#if($velocityCount == 1)
#set($hasProps = true)
<dl>
#end
<dt> ${prop.prettyName} </dt>
<dd>$doc.display($prop.getName())</dd>
##Now if we are editing the property and it is
##a date property, attach a date picker to it
#if(($context.action == 'inline') and ($prop.type == 'DateClass'))
<script type="text/javascript">
var dpicker = new DatePicker({
 relative : '${class.name}_${class.number}_${prop.name}',
 language : "$context.language",
 dateFormat: [ ["dd","mm","yyyy"], "/" ]
});
</script>
#end
#end
#if($hasProps)
</dl>
#end

Result

picker.png

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes

v1.1

Improvement

  • Make Date Picker stylesheet use the current Color Theme
  • Date Picker: Improve placement, triggering of the calendar and focus management of the date field

Task

  • Convert documents to xwiki/2.0 syntax
  • Fix IE7 bug for the appear and fade effects (a temporary fix is to just deactivate the effects by setting flags _enableShowEffect and _enableCloseEffect to false)
Tags: UI Component
    

Get Connected