Pickers
Last modified by Vincent Massol on 2022/03/04
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 (e.g. Page picker, Attachment picker, Users picker, Groups picker, Property Values picker, etc).
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}}
