《HarmonyOS应用开发基础》 课件知识点2-13-1 日期选择器与时间选择器

日期选择器与时间选择器日期选择器概述日期选择器DatePiker，是选择日期的滑动选择器组件。如右图所示。接口描述：DatePicker(options?:{start?:Date,end?:Date,selected?:Date})根据指定范围的Date创建可以选择日期的滑动选择器。DatePicker的参数参数说明：参数名参数类型必填参数描述startDate否指定选择器的起始日期。默认值：Date('1970-1-1')endDate否指定选择器的结束日期。默认值：Date('2100-12-31')selectedDate否设置选中项的日期。默认值：当前系统日期DatePicker的属性属性说明：名称参数类型描述lunarboolean日期是否显示农历。-true：展示农历。-false：不展示农历。默认值：falseDatePicker的事件事件说明：名称描述onChange(callback:(value:DatePickerResult)=>void)选择日期时触发该事件名称参数类型描述yearnumber选中日期的年。monthnumber选中日期的月(0~11)，0表示1月，11表示12月。daynumber选中日期的日。DatePickerResult对象说明：DatePicker使用示例@Entry@Componentstruct

DatePickerExample

{

@State

isLunar:

boolean

=

false

private

selectedDate:

Date

=

new

Date('2023-03-10')

build()

{

Column()

{

Button('切换公历农历')

.margin({

top:

30

})

.onClick(()

=>

{

this.isLunar

=

!this.isLunar

})

DatePicker({

start:

new

Date('1970-1-1'),

end:

new

Date('2100-1-1'),

selected:

this.selectedDate

})

.lunar(this.isLunar)

.onChange((value:

DatePickerResult)

=>

{

this.selectedDate.setFullYear(value.year,

value.month,

value.day)

console.info('select

current

date

is:

'

+

JSON.stringify(value))

})

}.width('100%')

}}时间选择器概述时间选择器TimePicker，是滑动选择时间的组件。如右图所示。接口描述：TimePicker(options?:{selected?:Date})默认以24小时的时间区间创建滑动选择器。TimePicker的参数参数说明：参数名参数类型必填参数描述selectedDate否设置选中项的时间。默认值：当前系统时间TimePicker的属性属性说明：名称参数类型描述useMilitaryTimeboolean展示时间是否为24小时制，不支持动态修改。默认值：falseTimePicker的事件事件说明：名称描述onChange(callback:(value:TimePickerResult)=>void)选择时间时触发该事件。名称参数类型描述hournumber选中时间的时。minutenumber选中时间的分。TimePickerResult对象说明：TimePicker使用示例@Entry@Componentstruct

TimePickerExample

{

@State

isMilitaryTime:

boolean

=

false

private

selectedTime:

Date

=

new

Date('2022-07-22T08:00:00')

build()

{

Column()

{

Button('切换12小时制/24小时制')

.margin({

top:

30

})

.onClick(()

=>

{

this.isMilitaryTime

=

!this.isMilitaryTime

})

TimePicker({

selected:

this.selectedTime,

})

.useMilitaryTime(this.isMilitaryTime)

.onChange((value:

TimePickerResult)

=>

{

this.selectedTime.setHours(value.hour,

value.