Date Picker Application
 | Date Picker |
| Type | XAR |
| Category | |
| Developed by | |
| Active Installs | 12 |
| Rating | |
| License | GNU Lesser General Public License 2.1 |
Table of contents
Description
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
<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.
$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
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:
- Log in the wiki with a user having Administration rights
- Go to the Administration page and select the Import category
- Follow the on-screen instructions to upload the downloaded XAR
- Click on the uploaded XAR and follow the instructions
- 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)
