Pickers
Version 8.1 by Marius Dumitru Florea on 2020/04/29
The goal of this page is to list the default pickers available in XWiki and to provide information on how to use them.
Suggest-based Pickers
This type of pickers help you pick a value by providing suggestions as you type in a text input. Checkout the Suggest Widget documentation page for the list of suggest-based pickers available by default in XWiki.
Location Picker
See the Location Picker Macro documentation for more information.
Date Time Picker
{{velocity}}
{{html clean="false"}}
<form class="xform">
<dl>
<dt><label for="myDateTime">Date & Time</label></dt>
<dd>
#set ($dateTimePickerParams = {
'id': 'myDateTime',
'name': 'date',
'data-format': 'dd/MM/yyyy HH:mm:ss',
'placeholder': 'Select the date and time'
})
#dateTimePicker($dateTimePickerParams)
</dd>
</dl>
</form>
{{/html}}
{{/velocity}}
{{html clean="false"}}
<form class="xform">
<dl>
<dt><label for="myDateTime">Date & Time</label></dt>
<dd>
#set ($dateTimePickerParams = {
'id': 'myDateTime',
'name': 'date',
'data-format': 'dd/MM/yyyy HH:mm:ss',
'placeholder': 'Select the date and time'
})
#dateTimePicker($dateTimePickerParams)
</dd>
</dl>
</form>
{{/html}}
{{/velocity}}
Color Picker
{{velocity}}
{{html clean="false"}}
<dl>
<dt><label for="myColor">Color</label></dt>
<dd>
#set ($colorPickerParams = {
'id': 'myColor',
'name': 'color',
'value': '#85d4a9'
})
#colorPicker($colorPickerParams)
</dd>
</dl>
{{/html}}
{{/velocity}}
{{html clean="false"}}
<dl>
<dt><label for="myColor">Color</label></dt>
<dd>
#set ($colorPickerParams = {
'id': 'myColor',
'name': 'color',
'value': '#85d4a9'
})
#colorPicker($colorPickerParams)
</dd>
</dl>
{{/html}}
{{/velocity}}
Locale (Language) Picker
{{velocity}}
{{html clean="false"}}
#set ($discard = $xwiki.jsfx.use('localePicker.js', true))
<input type="text" data-type="locale" value="fr"/>
{{/html}}
{{/velocity}}
{{html clean="false"}}
#set ($discard = $xwiki.jsfx.use('localePicker.js', true))
<input type="text" data-type="locale" value="fr"/>
{{/html}}
{{/velocity}}
