• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# \<picker> Development
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @luoying_ace_admin-->
5<!--Designer: @weixin_52725220-->
6<!--Tester: @xiong0104-->
7<!--Adviser: @HelloCrease-->
8
9The **\<picker>** component supports common, date, time, date and time, and multi-column text selectors. For details, see [picker](../reference/apis-arkui/arkui-js/js-components-basic-picker.md).
10
11
12## Creating a \<picker> Component
13
14Create a **\<picker>** component in the .hml file under **pages/index**.
15
16```html
17<!-- xxx.hml -->
18<div class="container">
19  <picker>    picker  </picker>
20</div>
21```
22
23```css
24/* xxx.css */
25.container {
26  width: 100%;
27  height: 100%;
28  flex-direction: column;
29  justify-content: center;
30  align-items: center;
31  background-color: #F1F3F5;
32}
33```
34
35![en-us_image_0000001223287716](figures/en-us_image_0000001223287716.gif)
36
37
38## Setting the Picker Type
39
40Set the **type** attribute of the **\<picker>** component. For example, set it to **date**.
41
42```html
43<!-- xxx.hml -->
44<div class="container">
45  <picker id="picker_text" type="text" value="{{textvalue}}"range="{{rangetext}}" class="pickertext" ></picker>
46  <picker id="picker_date" type="date" value="{{datevalue}}" lunarswitch="true" start="2002-2-5" end="2030-6-5" class="pickerdate"></picker>
47</div>
48```
49
50```css
51/* xxx.css */
52.container {
53  width: 100%;
54  height: 100%;
55  flex-direction: column;
56  justify-content: center;
57  align-items: center;
58  background-color: #F1F3F5;
59}
60.pickertext{
61  margin-bottom: 30px;
62}
63```
64
65```js
66// xxx.js
67export default {
68  data: {
69    rangetext:['15', "20", "25"],
70    textvalue:'Select text',
71    datevalue:'Select date',
72  }
73}
74```
75
76![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif)
77
78> **NOTE**
79>
80> When setting the value range of a common selector, you must use the data binding mode.
81
82
83## Setting the Time Format
84
85Set the **hours** attribute to specify the time format used by the time picker. Available values include **12** and **24**, indicating the 12-hour format and 24-hour format, respectively.
86
87```html
88<!-- xxx.hml -->
89<div class="container">
90  <picker id="picker_time" type="time" value="12-hour format" hours="12" onchange="timeonchange"  class="pickertime"></picker>
91  <picker id="picker_time" type="time" value="24-hour format" hours="24" onchange="timeonchange"  class="pickertime"></picker>
92</div>
93```
94
95```css
96/* xxx.css */
97.container {
98  width: 100%;
99  height: 100%;
100  flex-direction: column;
101  justify-content: center;
102  align-items: center;
103  background-color: #F1F3F5;
104}
105.pickertime {
106  margin-bottom:50px;
107  width: 300px;
108  height: 50px;
109}
110```
111
112![en-us_image_0000001222807808](figures/en-us_image_0000001222807808.gif)
113
114> **NOTE**
115> - When **hours** is set to **12**, the time is displayed in 12-hour format and distinguished by a.m. and p.m.
116>
117> - When **hours** is set to **24**, the time is displayed in 24-hour format.
118
119
120## Adding Response Events
121
122Add the **change** event to confirm selection and the **cancel** event to cancel selection.
123
124```html
125<!-- xxx.hml -->
126<div class="container">
127  <picker id="picker_multi" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="
128     {{multitextselect}}" onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl"></picker>
129</div>
130```
131
132```css
133/* xxx.css */
134.container {
135  width: 100%;
136  height: 100%;
137  flex-direction: column;
138  justify-content: center;
139  align-items: center;
140  background-color: #F1F3F5;
141}
142.pickermuitl {
143  margin-bottom:20px;
144  width: 600px;
145  height: 50px;
146  font-size: 25px;
147  letter-spacing:15px;
148}
149```
150
151```js
152// xxx.js
153import promptAction from '@ohos.promptAction';
154export default {
155  data: {
156    multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"]],
157    multitextvalue:'Select multi-line text',
158    multitextselect:[0,0,0],
159  },
160  multitextonchange(e) {
161    this.multitextvalue=e.newValue;
162    promptAction.showToast({ message:"Multi-column text changed to:" + e.newValue })
163  },
164  multitextoncancel() {
165    promptAction.showToast({ message:"multitextoncancel" })
166  },
167}
168```
169
170![en-us_image_0000001223127748](figures/en-us_image_0000001223127748.gif)
171
172
173## Example Scenario
174
175
176Implement a health check-in application by using the **\<picker>** component.
177
178
179```html
180<!-- xxx.hml -->
181<div class="doc-page">
182  <text class="title">Health check-in</text>
183  <div class="out-container">
184    <text class="txt">Office:</text>
185    <picker class="pick" focusable="true" type="text" value="{{pos}}" range="{{posarr}}" onchange="setPos"></picker>
186  </div>
187  <divider class="dvd"></divider>
188  <div class="out-container">
189    <text class="txt">Office hours:</text>
190    <picker class="pick" type="date" value="{{datevalue}}"  start="2002-2-5" end="2030-6-5" selected="{{dateselect}}"
191      lunarswitch="true" onchange="dateonchange"></picker>
192  </div>
193  <divider class="dvd"></divider>
194  <div class="out-container">
195    <text class="txt">Having fever or cold symptoms</text>
196    <picker class="pick" type="text" value="{{yorn1}}" range="{{yesno}}" selected="1" onchange="isFever"></picker>
197  </div>
198  <divider class="dvd"></divider>
199  <div class="out-container">
200    <text class="txt">Close contact with someone with COVID-19</text>
201    <picker class="pick" type="text" value="{{yorn2}}" range="{{yesno}}" selected="1" onchange="isTouch"></picker>
202  </div>
203  <div class="out-container">
204    <button value="Submit" style="margin-top:100px;width:50%;font-color:#0000ff;height:80px" onclick="showtoast"></button>
205  </div>
206</div>
207```
208
209
210```css
211/* xxx.css */
212.doc-page {
213  flex-direction: column;
214  background-color: #F1F3F5;
215}
216.title {
217  margin-top: 30px;
218  margin-bottom: 30px;
219  margin-left: 50px;
220  font-weight: bold;
221  color: #0000ff;
222  font-size: 38px;
223}
224.out-container {
225  flex-direction: column;
226  align-items: center;
227}
228.pick {
229  width: 80%;
230  height: 76px;
231  border: 1px solid #0000ff;
232  border-radius: 20px;
233  padding-left: 12px;
234}
235.txt {
236  width: 80%;
237  font-size: 18px;
238  text-align: left;
239  margin-bottom: 12px;
240  margin-left: 12px;
241}
242.dvd {
243  margin-top: 30px;
244  margin-bottom: 30px;
245  margin-left: 80px;
246  margin-right: 80px;
247  color: #6495ED;
248  stroke-width: 6px;
249}
250```
251
252
253```js
254// xxx.js
255import promptAction from '@ohos.promptAction'
256export default {
257  data: {
258    yorn1:'No',
259    yorn2:'No',
260    pos:'Home',
261    yesno:['Yes', 'No'],
262    posarr:['Home', 'Company'],
263    datevalue:'Select time',
264    datetimeselect:'2012-5-6-11-25',
265    dateselect:'2021-9-17',
266    showbuild:true
267  },
268  onInit() {
269  },
270  isFever(e) {
271    this.yorn1 = e.newValue
272  },
273  isTouch(e) {
274    this.yorn2 = e.newValue
275  },
276  setPos(e) {
277    this.pos = e.newValue
278    if (e.newValue === 'Non-research center') {
279      this.showbuild = false
280    } else {
281      this.showbuild = true
282    }
283  },
284  setbuild(e) {
285    this.build = e.newValue
286  },
287  dateonchange(e) {
288    e.month=e.month+1;
289    this.datevalue = e.year + "-" + e.month + "-" + e.day;
290    promptAction.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day })
291  },
292  showtoast() {
293    promptAction.showToast({
294      message: 'Submitted.',
295      duration: 2000,
296      gravity: 'center'
297    })
298  }
299}
300```
301
302
303![en-us_image_0000001267887877](figures/en-us_image_0000001267887877.gif)
304