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

dateTimePicker.png

{{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

colorPicker.png

{{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

localePicker.png

{{velocity}}
{{html clean="false"}}
#set ($discard = $xwiki.jsfx.use('localePicker.js', true))
<input type="text" data-type="locale" value="fr"/>
{{/html}}
{{/velocity}}

Get Connected