Version 20.1 by Thomas Mortagne on 2011/10/27 18:01
 | Date Picker |
| Type | application |
| Category | |
| Developed by | Jerome Velociter |
| Rating | |
| License | Unknown |
Table of contents
Description
How to use
Including the proper resources
- For XWiki Enterprise versions < 1.8
$xwiki.jsx.use("XWiki.DatePickerExtension")
$xwiki.ssx.use("XWiki.DatePickerExtension")
$xwiki.ssx.use("XWiki.DatePickerExtension")
- Starting with XWiki Enterprise 1.8
$xwiki.jsfx.use("js/scriptaculous/scriptaculous.js")
$xwiki.jsx.use("XWiki.DatePickerExtension")
$xwiki.ssx.use("XWiki.DatePickerExtension")
$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")
$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>
<script type="text/javascript">
var dpicker = new DatePicker({
relative : 'mydate_id',
language: "$context.language",
dateFormat: [ ["dd","mm","yyyy"], "/" ]
});
</script>
for full reference, see http://code.google.com/p/prototype-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
$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
