代码拉取完成,页面将自动刷新
本示例介绍DatePicker组件实现不循环滚动,支持选择日期和时间。
DateTimePicker组件本身不支持不循环滚动,通过TextPicker组件实现,通过设置canLoop
属性来实现不循环滚动,通过timeFormat
属性控制组件展示列数
@Builder
function CustomPicker($$: PickerClass) {
TextPicker({ range: $$.range, selected: $$.selected })
.layoutWeight(1)
.canLoop($$.option?.isLoop ?? false)
.visibility(isVisibility($$.dateIndex, $$.option?.timeFormat))
.onChange((value: string | string[], index: number | number[]) => {
$$.callback($$.dateIndex, value, index)
})
}
嵌入到页面中,返回值通过传入的resultCb
返回
Column({ space: 24 }) {
Text(this.selectDate.toString() + '\n' + Lunar.fromDate(this.selectDate).toString())
.fontSize(20)
.fontColor(Color.Red)
.textAlign(TextAlign.Center)
Column({ space: 12 }) {
Text('页面形式展示日期时间选择器')
.fontSize(20)
.fontWeight(FontWeight.Bold)
// 直接在页面上调用该组件
DateTimePicker({
data: {
startYear: 2000,
endYear: 2050,
resultCb: this.updateSelectData,
},
option: {
timeFormat: this.timeFormat
}
})
}
.borderWidth(2)
.borderColor(Color.Gray)
.borderRadius(8)
Button('点击底部弹窗形式唤起日期时间选择器')
.onClick(this.openDateTimePicker)
}
通过PromptAction
弹窗形式展示,返回值通过传入的resultCb
返回。弹窗形式目前仅支持设置DateTimePickerStyle
接口中的样式
export function DateTimePickerDialog(uiContext: UIContext, param: DateTimePickerParam,
dialogOptions?: promptAction.BaseDialogOptions) {
const now: number = Date.now();
let contentNode = new ComponentContent(uiContext, wrapBuilder(DateTimePickerDialogBuilder), {
node: now,
param: param
} as DateTimePickerDialogParam);
uiContext.getPromptAction().openCustomDialog(contentNode, dialogOptions);
mapContext.set(now, { context: uiContext, content: contentNode });
}
DateTimePickerDialog(this.getUIContext(), {
data: {
startYear: 2000,
endYear: 2050,
selectedDate: this.selectDate,
resultCb: this.updateSelectData,
},
option: {
timeFormat: TimeFormat.Second
},
style: {
backgroundColor: Color.White,
borderRadius: 8,
borderColor: Color.Orange,
borderWidth: 2,
margin: 4
}
} as DateTimePickerParam, {
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -40 },
});
DatePickerNoCycle // entry类型
|---pages
| |---Index // 入口页面
dateTimePicker // har包类型
|---common
| |---Constants // 常量定义
|---interface
| |---DateTimePickerInterface // 日期时间选择器参数接口
|---pages
| |---DateTimePicker // 日期时间选择器
|---utils
| |---DateTimeBase // 日期时间基类
| |---DateTimeLunar // 日期时间农历类
| |---DateTimeRange // 日期时间范围
| |---DateTimeSolar // 日期时间公历类
亲爱的Harmony Next开发者,您好!
为了协助您高效开发,提高鸿蒙场景化示例的质量,希望您在浏览或使用后抽空填写一份简单的问卷,我们将会收集您的宝贵意见进行优化
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。