Show last authors
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.
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}}

Get Connected