Wiki source code of Pickers
Last modified by Vincent Massol on 2022/03/04 14:41
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | The goal of this page is to list the default pickers available in XWiki and to provide information on how to use them. | ||
| 2 | |||
| 3 | {{toc start="2"/}} | ||
| 4 | |||
| 5 | == Suggest-based Pickers == | ||
| 6 | |||
| 7 | This type of pickers help you pick a value by providing suggestions as you type in a text input. Checkout the [[Suggest Widget>>Documentation.DevGuide.FrontendResources.AutoSuggestWidget.WebHome]] 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). | ||
| 8 | |||
| 9 | == Location Picker == | ||
| 10 | |||
| 11 | See the [[Location Picker Macro>>extensions:Extension.Document Picker||anchor="HLocationPickerMacro"]] documentation for more information. | ||
| 12 | |||
| 13 | == Date Time Picker == | ||
| 14 | |||
| 15 | {{image reference="dateTimePicker.png" /}} | ||
| 16 | |||
| 17 | {{code language="none"}} | ||
| 18 | {{velocity}} | ||
| 19 | {{html clean="false"}} | ||
| 20 | <form class="xform"> | ||
| 21 | <dl> | ||
| 22 | <dt><label for="myDateTime">Date & Time</label></dt> | ||
| 23 | <dd> | ||
| 24 | #set ($dateTimePickerParams = { | ||
| 25 | 'id': 'myDateTime', | ||
| 26 | 'name': 'date', | ||
| 27 | 'data-format': 'dd/MM/yyyy HH:mm:ss', | ||
| 28 | 'placeholder': 'Select the date and time' | ||
| 29 | }) | ||
| 30 | #dateTimePicker($dateTimePickerParams) | ||
| 31 | </dd> | ||
| 32 | </dl> | ||
| 33 | </form> | ||
| 34 | {{/html}} | ||
| 35 | {{/velocity}} | ||
| 36 | {{/code}} | ||
| 37 | |||
| 38 | == Color Picker == | ||
| 39 | |||
| 40 | {{image reference="colorPicker.png" /}} | ||
| 41 | |||
| 42 | {{code language="none"}} | ||
| 43 | {{velocity}} | ||
| 44 | {{html clean="false"}} | ||
| 45 | <dl> | ||
| 46 | <dt><label for="myColor">Color</label></dt> | ||
| 47 | <dd> | ||
| 48 | #set ($colorPickerParams = { | ||
| 49 | 'id': 'myColor', | ||
| 50 | 'name': 'color', | ||
| 51 | 'value': '#85d4a9' | ||
| 52 | }) | ||
| 53 | #colorPicker($colorPickerParams) | ||
| 54 | </dd> | ||
| 55 | </dl> | ||
| 56 | {{/html}} | ||
| 57 | {{/velocity}} | ||
| 58 | {{/code}} | ||
| 59 | |||
| 60 | == Locale (Language) Picker == | ||
| 61 | |||
| 62 | {{image reference="localePicker.png" /}} | ||
| 63 | |||
| 64 | {{code language="none"}} | ||
| 65 | {{velocity}} | ||
| 66 | {{html clean="false"}} | ||
| 67 | #set ($discard = $xwiki.jsfx.use('localePicker.js', true)) | ||
| 68 | <input type="text" data-type="locale" value="fr"/> | ||
| 69 | {{/html}} | ||
| 70 | {{/velocity}} | ||
| 71 | {{/code}} |
