<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p99287536614"><aname="p99287536614"></a><aname="p99287536614"></a>Dynamic modification is not supported. Available values include:</p>
<aname="ul17928553367"></a><aname="ul17928553367"></a><ulid="ul17928553367"><li><strongid="b184817616590"><aname="b184817616590"></a><aname="b184817616590"></a>text</strong>: text selector</li><li><strongid="b167181151523"><aname="b167181151523"></a><aname="b167181151523"></a>data</strong>: date selector</li><li><strongid="b116831455916"><aname="b116831455916"></a><aname="b116831455916"></a>time</strong>: time selector</li><li><strongid="b0802045135218"><aname="b0802045135218"></a><aname="b0802045135218"></a>datetime</strong>: date and time selector</li><li><strongid="b7992511155314"><aname="b7992511155314"></a><aname="b7992511155314"></a>multi-text</strong>: multi-column text selector</li></ul>
</td>
</tr>
</tbody>
</table>
### Text Selector<a name="section28061337142416"></a>
When **type** is set to **text**, a text selector is used.
<tdclass="cellrowborder"valign="top"width="49.4050594940506%"headers="mcps1.1.6.1.5 "><pid="p14907328610"><aname="p14907328610"></a><aname="p14907328610"></a>Value range of the common selector, for example, <strongid="b67251465227"><aname="b67251465227"></a><aname="b67251465227"></a>["15", "20", "25"]</strong>.</p>
<divclass="note"id="note4860842141115"><aname="note4860842141115"></a><aname="note4860842141115"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1386074271117"><aname="p1386074271117"></a><aname="p1386074271117"></a>Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable <strongid="b1056351631112"><aname="b1056351631112"></a><aname="b1056351631112"></a>data: ["15", "20", "25"]</strong> in the JavaScript.</p>
<tdclass="cellrowborder"valign="top"width="49.4050594940506%"headers="mcps1.1.6.1.5 "><pid="p649017329613"><aname="p649017329613"></a><aname="p649017329613"></a>Default value of the common selector. The value should be the index of <strongid="b1264831483012"><aname="b1264831483012"></a><aname="b1264831483012"></a>range</strong>.</p>
<tdclass="cellrowborder"valign="top"width="49.4050594940506%"headers="mcps1.1.6.1.5 "><pid="p04904325616"><aname="p04904325616"></a><aname="p04904325616"></a>Value of the common selector.</p>
</td>
</tr>
</tbody>
</table>
### Date Selector<a name="section194021642517"></a>
When **type** is set to **date**, a date selector is used.
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p87681568618"><aname="p87681568618"></a><aname="p87681568618"></a>Start date of the date selector, in the format of YYYY-MM-DD.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p1176915562611"><aname="p1176915562611"></a><aname="p1176915562611"></a>End date of the date selector, in the format of YYYY-MM-DD.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p17695564620"><aname="p17695564620"></a><aname="p17695564620"></a>Default value of the date selector, in format of YYYY-MM-DD.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p1855614200012"><aname="p1855614200012"></a><aname="p1855614200012"></a>Value of the date selector.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p14238195141316"><aname="p14238195141316"></a><aname="p14238195141316"></a>Whether the pop-up window displays the lunar calendar.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p9878910132617"><aname="p9878910132617"></a><aname="p9878910132617"></a>Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value <strongid="b1242195251513"><aname="b1242195251513"></a><aname="b1242195251513"></a>true</strong> means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value <strongid="b729391317186"><aname="b729391317186"></a><aname="b729391317186"></a>false</strong> means not to display the lunar calendar switch.</p>
<divclass="note"id="note799016359510"><aname="note799016359510"></a><aname="note799016359510"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p49901135165115"><aname="p49901135165115"></a><aname="p49901135165115"></a> When both <strongid="b66411209185"><aname="b66411209185"></a><aname="b66411209185"></a>lunarswitch</strong> and <strongid="b1364102010185"><aname="b1364102010185"></a><aname="b1364102010185"></a>lunar</strong> are set to <strongid="b665102015187"><aname="b665102015187"></a><aname="b665102015187"></a>true</strong>, the switch is selected.</p>
</div></div>
</td>
</tr>
</tbody>
</table>
### Time Selector<a name="section14386134222510"></a>
When **type** is set to **time**, a time selector is used.
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p13773101919719"><aname="p13773101919719"></a><aname="p13773101919719"></a>Whether seconds are contained.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p57739191974"><aname="p57739191974"></a><aname="p57739191974"></a>Default value of the time selector, in the format of HH:mm. If seconds are contained, the format is HH:mm:ss.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p117733191473"><aname="p117733191473"></a><aname="p117733191473"></a>Value of the time selector.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p1642114782010"><aname="p1642114782010"></a><aname="p1642114782010"></a>Time format used by the time selector. Available values include:</p>
<aname="ul174074428121"></a><aname="ul174074428121"></a><ulid="ul174074428121"><li><strongid="b793617752019"><aname="b793617752019"></a><aname="b793617752019"></a>12</strong>: displayed in 12-hour format and distinguished by a.m. and p.m.</li><li><strongid="b273115197214"><aname="b273115197214"></a><aname="b273115197214"></a>24</strong>: displayed in 24-hour format<divclass="note"id="note189471313104"><aname="note189471313104"></a><aname="note189471313104"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p9947193114104"><aname="p9947193114104"></a><aname="p9947193114104"></a>The default value is the most commonly-used hour format in the current locale. <supid="sup15655162732715"><aname="sup15655162732715"></a><aname="sup15655162732715"></a>5+</sup></p>
</div></div>
</li></ul>
</td>
</tr>
</tbody>
</table>
### Date and Time Selector<a name="section10180192513261"></a>
When **type** is set to **datetime**, a date and time selector is used.
<tdclass="cellrowborder"valign="top"width="8.63%"headers="mcps1.1.6.1.3 "><pid="p16887539111214"><aname="p16887539111214"></a><aname="p16887539111214"></a>Current date and time</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p177512214430"><aname="p177512214430"></a><aname="p177512214430"></a>Default value of the date and time selector. The value can be in either of the following formats:</p>
<pid="p192194417433"><aname="p192194417433"></a><aname="p192194417433"></a>If the year is not set, the current year is used by default. The value you set is the date selected by default in the pop-up window.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p1388773910128"><aname="p1388773910128"></a><aname="p1388773910128"></a>Value of the date and time selector.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p1314251932418"><aname="p1314251932418"></a><aname="p1314251932418"></a>Time format used by the date and time selector. Available values include:</p>
<aname="ul4189124631213"></a><aname="ul4189124631213"></a><ulid="ul4189124631213"><li><strongid="b113902010491"><aname="b113902010491"></a><aname="b113902010491"></a>12</strong>: displayed in 12-hour format and distinguished by a.m. and p.m.</li><li><strongid="b1676844709"><aname="b1676844709"></a><aname="b1676844709"></a>24</strong>: displayed in 24-hour format<divclass="note"id="note1563822112115"><aname="note1563822112115"></a><aname="note1563822112115"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1563882115113"><aname="p1563882115113"></a><aname="p1563882115113"></a>The default value is the most commonly-used hour format in the current locale. <supid="sup1719092182914"><aname="sup1719092182914"></a><aname="sup1719092182914"></a>5+</sup></p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p63124569165"><aname="p63124569165"></a><aname="p63124569165"></a>Whether the pop-up window displays the lunar calendar.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p134738505123"><aname="p134738505123"></a><aname="p134738505123"></a>Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value <strongid="b11888837151819"><aname="b11888837151819"></a><aname="b11888837151819"></a>true</strong> means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value <strongid="b454518384186"><aname="b454518384186"></a><aname="b454518384186"></a>false</strong> means not to display the lunar calendar switch.</p>
<divclass="note"id="note5428114735118"><aname="note5428114735118"></a><aname="note5428114735118"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1342819474512"><aname="p1342819474512"></a><aname="p1342819474512"></a>When both <strongid="b57802039111819"><aname="b57802039111819"></a><aname="b57802039111819"></a>lunarswitch</strong> and <strongid="b18781153991810"><aname="b18781153991810"></a><aname="b18781153991810"></a>lunar</strong> are set to <strongid="b4781173931813"><aname="b4781173931813"></a><aname="b4781173931813"></a>true</strong>, the switch is selected.</p>
</div></div>
</td>
</tr>
</tbody>
</table>
### Multi-Column Text Selector<a name="section18757165414262"></a>
When **type** is set to **multi-text**, a multi-column text selector is used.
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p1675884931313"><aname="p1675884931313"></a><aname="p1675884931313"></a>Number of columns in the multi-column text selector.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p139301644675"><aname="p139301644675"></a><aname="p139301644675"></a>Items of the multi-column text selector. <strongid="b74831653144819"><aname="b74831653144819"></a><aname="b74831653144819"></a>range</strong> is a two-dimensional array that indicates the number of columns. Each item in the array indicates the data of each column, for example, <strongid="b1751216441149"><aname="b1751216441149"></a><aname="b1751216441149"></a>[["a","b"], ["c","d"]]</strong>.</p>
<divclass="note"id="note0651143101220"><aname="note0651143101220"></a><aname="note0651143101220"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p15651335123"><aname="p15651335123"></a><aname="p15651335123"></a>Use the data binding mode, for example, range = {{data}}. Declare the corresponding variable <strongid="b4470649201410"><aname="b4470649201410"></a><aname="b4470649201410"></a>data: [["a","b"], ["c","d"]]</strong> in the JavaScript.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p12930144373"><aname="p12930144373"></a><aname="p12930144373"></a>Default value of the multi-column text selector, which is an array consisting of the indexes of the selected items in each column.</p>
<tdclass="cellrowborder"valign="top"width="49.410000000000004%"headers="mcps1.1.6.1.5 "><pid="p5930344474"><aname="p5930344474"></a><aname="p5930344474"></a>Value of the multi-column text selector, which is an array consisting of the values of the selected items in each column.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section1299175511712"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p761713528364"><aname="p761713528364"></a><aname="p761713528364"></a>Text color of the selector.</p>
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p186188525363"><aname="p186188525363"></a><aname="p186188525363"></a>Font size of the selector.</p>
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p106188526364"><aname="p106188526364"></a><aname="p106188526364"></a>Whether the font size changes with the system's font size settings.</p>
<divclass="note"id="note17618552143613"><aname="note17618552143613"></a><aname="note17618552143613"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p186187525369"><aname="p186187525369"></a><aname="p186187525369"></a>If the <strongid="b133885541595"><aname="b133885541595"></a><aname="b133885541595"></a>config-changes</strong> tag of <strongid="b103882542599"><aname="b103882542599"></a><aname="b103882542599"></a>fontSize</strong> is configured for abilities in the <strongid="b538965485919"><aname="b538965485919"></a><aname="b538965485919"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p3619852193615"><aname="p3619852193615"></a><aname="p3619852193615"></a>Letter spacing of the selector. For details, see <ahref="js-components-basic-text.md#section5775351116">letter-spacing</a> of the <strongid="b16466115785416"><aname="b16466115785416"></a><aname="b16466115785416"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p13619115293616"><aname="p13619115293616"></a><aname="p13619115293616"></a>Text decoration of the selector. For details, see <ahref="js-components-basic-text.md#section5775351116">text-decoration</a> of the <strongid="b3970995559"><aname="b3970995559"></a><aname="b3970995559"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p11619205253614"><aname="p11619205253614"></a><aname="p11619205253614"></a>Font style of the selector. For details, see <ahref="js-components-basic-text.md#section5775351116">font-style</a> of the <strongid="b270516223556"><aname="b270516223556"></a><aname="b270516223556"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p762025283614"><aname="p762025283614"></a><aname="p762025283614"></a>Font weight of the selector. For details, see <ahref="js-components-basic-text.md#section5775351116">font-weight</a> of the <strongid="b1825684285512"><aname="b1825684285512"></a><aname="b1825684285512"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p16620195219364"><aname="p16620195219364"></a><aname="p16620195219364"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> in the family is selected as the font for the text.</p>
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p1562017529368"><aname="p1562017529368"></a><aname="p1562017529368"></a>Text line height of the selector.</p>
<tdclass="cellrowborder"valign="top"width="52.274772522747725%"headers="mcps1.1.6.1.5 "><pid="p116215526369"><aname="p116215526369"></a><aname="p116215526369"></a>Height of the selector option list.</p>
<tdclass="cellrowborder"valign="top"width="50.41%"headers="mcps1.1.4.1.3 "><pid="p202450516358"><aname="p202450516358"></a><aname="p202450516358"></a>Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. <strongid="b13272174011538"><aname="b13272174011538"></a><aname="b13272174011538"></a>newSelected</strong> is the index.</p>
<tdclass="cellrowborder"valign="top"width="50.41%"headers="mcps1.1.4.1.3 "><pid="p1724618510355"><aname="p1724618510355"></a><aname="p1724618510355"></a>Triggered when the cancel button is clicked.</p>
</td>
</tr>
</tbody>
</table>
### Date Selector<a name="section161113322714"></a>
<tdclass="cellrowborder"valign="top"width="34.22%"headers="mcps1.1.4.1.2 "><pid="p8246185133519"><aname="p8246185133519"></a><aname="p8246185133519"></a>{ year: year, month: month, day: day }</p>
</td>
<tdclass="cellrowborder"valign="top"width="50.41%"headers="mcps1.1.4.1.3 "><pid="p192461451183514"><aname="p192461451183514"></a><aname="p192461451183514"></a>Triggered when a value is selected and the OK button is clicked in the displayed pop-up window.</p>
<divclass="note"id="note192461751103512"><aname="note192461751103512"></a><aname="note192461751103512"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p16246125163517"><aname="p16246125163517"></a><aname="p16246125163517"></a>The value of <strongid="b86982012556"><aname="b86982012556"></a><aname="b86982012556"></a>month</strong> ranges from 0 (January) to 11 (December). <supid="sup102461651123517"><aname="sup102461651123517"></a><aname="sup102461651123517"></a>5+</sup></p>
<tdclass="cellrowborder"valign="top"width="50.41%"headers="mcps1.1.4.1.3 "><pid="p172469518350"><aname="p172469518350"></a><aname="p172469518350"></a>Triggered when the cancel button is clicked.</p>
</td>
</tr>
</tbody>
</table>
### Date and Time Selector<a name="section15386114572710"></a>
<tdclass="cellrowborder"valign="top"width="50.41%"headers="mcps1.1.4.1.3 "><pid="p13247155111354"><aname="p13247155111354"></a><aname="p13247155111354"></a>Triggered when a value is selected and the OK button is clicked in the displayed pop-up window.</p>
<tdclass="cellrowborder"valign="top"width="50.41%"headers="mcps1.1.4.1.3 "><pid="p102472518354"><aname="p102472518354"></a><aname="p102472518354"></a>Triggered when the cancel button is clicked.</p>
</td>
</tr>
</tbody>
</table>
### Time Selector<a name="section17835159152813"></a>
<tdclass="cellrowborder"valign="top"width="50.41%"headers="mcps1.1.4.1.3 "><pid="p824811519353"><aname="p824811519353"></a><aname="p824811519353"></a>Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. If <strongid="b793820412016"><aname="b793820412016"></a><aname="b793820412016"></a>containsecond</strong> is set to true, value contains seconds.</p>
<tdclass="cellrowborder"valign="top"width="50.41%"headers="mcps1.1.4.1.3 "><pid="p1249145115358"><aname="p1249145115358"></a><aname="p1249145115358"></a>Triggered when the cancel button is clicked.</p>
</td>
</tr>
</tbody>
</table>
### Multi-Column Text Selector<a name="section126981922162818"></a>
<tdclass="cellrowborder"valign="top"width="49.13%"headers="mcps1.1.4.1.3 "><pid="p10250165119356"><aname="p10250165119356"></a><aname="p10250165119356"></a>Triggered when an item is selected and the OK button is clicked in the displayed pop-up window.</p>
<aname="ul1425045115352"></a><aname="ul1425045115352"></a><ulid="ul1425045115352"><li><strongid="b0626192372512"><aname="b0626192372512"></a><aname="b0626192372512"></a>newValue</strong> is an array consisting of the values of the selected items.</li><li><strongid="b1290181522710"><aname="b1290181522710"></a><aname="b1290181522710"></a>newSelected</strong> is an array consisting of the indexes of the selected items. The lengths of <strongid="b142032033192714"><aname="b142032033192714"></a><aname="b142032033192714"></a>newValue</strong> and <strongid="b131696406270"><aname="b131696406270"></a><aname="b131696406270"></a>newSelected</strong> are the same as the length of <strongid="b49772553275"><aname="b49772553275"></a><aname="b49772553275"></a>range</strong>.</li></ul>
<tdclass="cellrowborder"valign="top"width="49.13%"headers="mcps1.1.4.1.3 "><pid="p5250115112351"><aname="p5250115112351"></a><aname="p5250115112351"></a>Triggered when the value of a column in the multi-column selector changes.</p>
<aname="ul025095133520"></a><aname="ul025095133520"></a><ulid="ul025095133520"><li><strongid="b1266741291"><aname="b1266741291"></a><aname="b1266741291"></a>column</strong> indicates the column whose value has changed.</li><li><strongid="b1657817287298"><aname="b1657817287298"></a><aname="b1657817287298"></a>newValue</strong> indicates the selected value.</li><li><strongid="b0186105592917"><aname="b0186105592917"></a><aname="b0186105592917"></a>newSelected</strong> indicates the index of the selected value.</li></ul>
<tdclass="cellrowborder"valign="top"width="49.13%"headers="mcps1.1.4.1.3 "><pid="p325017519359"><aname="p325017519359"></a><aname="p325017519359"></a>Triggered when the cancel button is clicked.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section47669296127"></a>
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="45%"headers="mcps1.1.4.1.3 "><pid="p384919011103"><aname="p384919011103"></a><aname="p384919011103"></a>Displays the picker.</p>
</td>
</tr>
</tbody>
</table>
## Example Code<a name="section11956342165513"></a>
```
## Child Components
Not supported
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| type | string | - | No | Picker type. Dynamic modification is not supported. The options are as follows:<br>- **text**: text selector.<br>- **date**: date selector.<br>- **time**: time selector.<br>- **datetime**: date and time selector.<br>- **multi-text**: multi-column text selector.|
### Common Selector
When **type** is set to **text**, a common selector is used.
| Name | Type | Default Value | Mandatory | Description |
| range | Array | - | No | Value range of the common selector, for example, **["15", "20", "25"]**.<br>Use the data binding mode, for example, `range = {{data}}`. Declare the corresponding variable `data: ["15", "20", "25"]` in JavaScript.|
| selected | string | 0 | No | Default value of the common selector. The value should be the index of **range**.|
| value | string | - | No | Value of the common selector. |
### Date Selector
When **type** is set to **date**, a date selector is used.
| Name | Type | Default Value | Mandatory | Description |
| start | <time> | 1970-1-1 | No | Start date of the date selector, in the format of YYYY-MM-DD. |
| end | <time> | 2100-12-31 | No | End date of the date selector, in the format of YYYY-MM-DD. |
| selected | string | Current date | No | Default value of the date selector, in format of YYYY-MM-DD.|
| value | string | - | Yes | Value of the date selector. |
| lunar<sup>5+</sup> | boolean | false | No | Whether the pop-up window displays the lunar calendar. |
| lunarswitch | boolean | false | No | Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value **true** means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value **false** means not to display the lunar calendar switch.<br>When both **lunarswitch** and **lunar** are set to **true**, the switch is selected.|
### Time Selector
When **type** is set to **time**, a time selector is used.
| Name | Type | Default Value | Mandatory | Description |
| containsecond | boolean | false | No | Whether seconds are contained. |
| selected | string | Current time | No | Default value of the time selector, in format of HH:mm. If seconds are contained, the format is HH:mm:ss. |
| value | string | - | No | Value of the time selector. |
| hours | number | 24<sup>1-4</sup><br>-<sup>5+</sup> | No | Time format used by the time selector. Available values are as follows:<br>- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br>- **24**: displayed in 24-hour format.<br>Since API version 5, the default value is the most commonly-used hour format in the current locale.|
### Date and Time Selector
When **type** is set to **datetime**, a date and time selector is used.
| Name | Type | Default Value | Mandatory | Description |
| selected | string | Current date and time | No | Default value of the date and time selector. The value can be in either of the following formats:<br>- MM-DD-HH-mm<br>- YYYY-MM-DD-HH-mm<br>If the year is not set, the current year is used by default. The value you set is the date selected by default in the pop-up window.|
| value | string | - | Yes | Value of the date and time selector. |
| hours | number | 24<sup>1-4</sup><br>-<sup>5+</sup> | No | Time format used by the date and time selector. Available values are as follows:<br>- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.<br>- **24**: displayed in 24-hour format.<br>Since API version 5, the default value is the most commonly-used hour format in the current locale.|
| lunar<sup>5+</sup> | boolean | false | No | Whether the pop-up window displays the lunar calendar. |
| lunarswitch | boolean | false | No | Whether the date selector displays the lunar calendar switch, which is used to switch between the Gregorian calendar and lunar calendar. The value **true** means to display the lunar calendar switch for users to switch between the Gregorian calendar and lunar calendar. The value **false** means not to display the lunar calendar switch.<br>When both **lunarswitch** and **lunar** are set to **true**, the switch is selected.|
### Multi-Column Text Selector
When **type** is set to **multi-text**, a multi-column text selector is used.
| Name | Type | Default Value | Mandatory | Description |
| columns | number | - | Yes | Number of columns in the multi-column text selector. |
| range | Two-dimensional array| - | No | Items of the multi-column text selector. **range** is a two-dimensional array that indicates the number of columns. Each item in the array indicates the data of each column, for example, **[["a", "b"], ["c", "d"]]**.<br>Use the data binding mode, for example, `range = {{data}}`. Declare the corresponding variable `data: ["15", "20", "25"]` in JavaScript.|
| selected | Array | [0,0,0, ...]| No | Default value of the multi-column text selector, which is an array consisting of the indexes of the selected items in each column.|
| value | Array | - | No | Value of the multi-column text selector, which is an array consisting of the values of the selected items in each column. |
## Styles
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| text-color | <color> | - | No | Text color of the selector. |
| font-size | <length> | - | No | Font size of the selector. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
| letter-spacing | <length> | 0 | No | Letter spacing of the selector. For details, see **letter-spacing** in the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** component.|
| text-decoration | string | - | No | Text decoration of the selector. For details, see **text-decoration** in the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** component.|
| font-style | string | normal | No | Font style of the selector. For details, see **font-style** in the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** component.|
| font-weight | number \| string | normal | No | Font weight of the selector. For details, see **font-weight** in the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** component.|
| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| line-height | <length> | 0px | No | Text line height of the selector. |
| column-height<sup>5+</sup> | <length> | - | No | Height of the selector option list. |
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| change | { newValue: newValue, newSelected: newSelected } | Triggered when an item is selected and the OK button is clicked in the displayed pop-up window. **newSelected** is the index.|
| cancel | - | Triggered when the cancel button is clicked. |
| change | { year: year, month: month, day: day } | Triggered when an item is selected and the OK button is clicked in the displayed pop-up window.<br>The value of **month** ranges from **0** (January) to **11** (December) since API version 5.|
| cancel | - | Triggered when the cancel button is clicked. |
| change | { year: year, month: month, day: day, hour: hour, minute: minute} | Triggered when an item is selected and the OK button is clicked in the displayed pop-up window.|
| cancel | - | Triggered when the cancel button is clicked. |
| change | { hour: hour, minute: minute, [second: second] } | Triggered when an item is selected and the OK button is clicked in the displayed pop-up window. If **containsecond** is set to true, value contains seconds.|
| cancel | - | Triggered when the cancel button is clicked. |
| change | { newValue: [newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] } | Triggered when an item is selected and the OK button is clicked in the displayed pop-up window.<br>- **newValue** is an array consisting of the values of the selected items.<br>- **newSelected** is an array consisting of the indexes of the selected items. The lengths of **newValue** and **newSelected** are the same as the length of **range**.|
| columnchange | { column: column, newValue: newValue, newSelected: newSelected } | Triggered when the value of a column in the multi-column selector changes.<br>- **column**: column whose value has changed.<br>- **newValue**: selected value.<br>- **newSelected**: index of the selected value.|
| cancel | - | Triggered when the cancel button is clicked. |
## Methods
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| Name | Parameter | Description |
| ---- | ---- | --------------- |
| show | - | Shows the picker.|
## Example
```html
<!-- xxx.hml -->
<divclass="container">
<select@change="selectChange">
...
...
@@ -741,7 +188,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.
</div>
```
```
```css
/* xxx.css */
.container{
flex-direction:column;
...
...
@@ -768,7 +215,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.
