HarmonyOS鸿蒙Next中有没有时间选择的组件(包含日期+时间的选择)

HarmonyOS鸿蒙Next中有没有时间选择的组件(包含日期+时间的选择) 有没有时间选择的组件(包含日期+时间的选择)

3 回复

可以使用三方库PickerView实现日期+时间的选择器

ohpm install @ohos/pickerview

具体代码使用说明可以参考文档:https://gitee.com/openharmony-sig/ohos-PickerView#%E6%8E%A5%E5%8F%A3%E8%AF%B4%E6%98%8E

日期+时间也可使用TextPicker自定义实现,demo参考:

class bottom {
    bottom: number = 50
}
let bott: bottom = new bottom()
@Entry
@Component
struct TextPickerExample {
    private select: number = 1
    private apfruits: string[] = ['apple1', 'apple2', 'apple3', 'apple4']
    private orfruits: string[] = ['orange1', 'orange2', 'orange3', 'orange4']
    private pefruits: string[] = ['peach1', 'peach2', 'peach3', 'peach4']
    private multi: string[][] = [this.apfruits, this.orfruits, this.pefruits]
    private cascade: TextCascadePickerRangeContent[] = [
        {
            text: '辽宁省',
            children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] },
            { text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }]
        },
        {
            text: '吉林省',
            children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] },
            { text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }]
        },
        {
            text: '黑龙江省',
            children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] },
            { text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }]
        }
    ]
    build() {
        Column() {
            TextPicker({ range: this.apfruits, selected: this.select })
                .onChange((value: string | string[], index: number | number[]) => {
                    console.info('Picker item changed, value: ' + value + ', index: ' + index)
                }).margin(bott)
            TextPicker({ range: this.multi })
                .onChange((value: string | string[], index: number | number[]) => {
                    console.info('TextPicker 多列:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index))
                }).margin(bott)
            TextPicker({ range: this.cascade })
                .onChange((value: string | string[], index: number | number[]) => {
                    console.info('TextPicker 多列联动:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index))
                })
        }
    }
}

更多关于HarmonyOS鸿蒙Next中有没有时间选择的组件(包含日期+时间的选择)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,提供了DatePickerTimePicker组件,分别用于日期和时间的选择。DatePicker组件允许用户选择年、月、日,而TimePicker组件则允许用户选择小时和分钟。这两个组件可以单独使用,也可以结合使用来实现日期和时间的完整选择。开发者可以通过设置组件的属性来定制日期和时间的显示格式,以及选择范围等。这些组件支持多种交互方式,包括滑动选择、点击选择等,能够满足应用中对日期和时间选择的需求。

在HarmonyOS鸿蒙Next中,提供了DatePickerTimePicker组件分别用于选择日期和时间。你可以通过组合这两个组件来实现日期+时间的选择功能。DatePicker用于选择年、月、日,TimePicker用于选择时、分。开发者可以根据需求自定义样式和交互逻辑,实现灵活的时间选择功能。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!