时间选择 - timepicker
# 时间选择控件: timepicker
用户可以选择24小时内的任意时间，呈现内容为上午/下午 XX（时）：XX（分）。
## timePickerMode
{string}
时间选择界面的呈现模式。若用户在timePicker控件中未指定timePickerMode，则默认使用时钟样式clock时间选择。
- spinner 滑动样式时间选择模式。
- clock 时钟样式
例子：
```
<linear orientation="horizontal" marginTop="-5">
<text id="timePickerModeText" text="滑动选择开始时间: " textColor="black" textSize="16sp" marginTop="2" />
<text id="timePickerModeText" text="滑动选择结束时间: " textColor="black" textSize="16sp" marginTop="2" marginLeft="35" />
</linear>
<linear orientation="horizontal">
<timepicker timePickerMode="spinner" id="startTime" h="120" w="200" marginLeft="-25" marginTop="-20"></timepicker>
<timepicker timePickerMode="spinner" id="endTime" h="120" w="200" marginLeft="-15" marginTop="-20"></timepicker>
</linear>
ui.startTime.setIs24HourView(true);//设置当前时间控件为24小时制
ui.startTime.setOnTimeChangedListener({
onTimeChanged: function (v, h, m) {
//h 获取的值 为24小时格式
let time = h + ":" + m;
toastLog("滑动时间当前选择\n" + time);
}
});
ui.endTime.setIs24HourView(true);//设置当前时间控件为24小时制
ui.endTime.setOnTimeChangedListener({
onTimeChanged: function (v, h, m) {
//h 获取的值 为24小时格式
let time = h + ":" + m;
toastLog("滑动时间当前选择\n" + time);
}
});
```
```
//时间日期选择
"ui";
ui.layout(
<scroll>
<vertical padding="16">
<text text="日历样式日期选择" textColor="black" textSize="16sp" marginTop="16"/>
<datepicker />
<text text="滑动日期选择" textColor="black" textSize="16sp" marginTop="16"/>
<datepicker datePickerMode="spinner"/>
<text text="时钟样式时间选择" textColor="black" textSize="16sp" marginTop="16"/>
<timepicker />
<text text="滑动时间选择" textColor="black" textSize="16sp" marginTop="16"/>
<timepicker timePickerMode="spinner"/>
</vertical>
</scroll>
)
```