《HarmonyOS應用開發(fā)基礎》 課件知識點2-13-1 日期選擇器與時間選擇器

日期選擇器與時間選擇器日期選擇器概述日期選擇器DatePiker，是選擇日期的滑動選擇器組件。如右圖所示。接口描述：DatePicker(options?:{start?:Date,end?:Date,selected?:Date})根據(jù)指定范圍的Date創(chuàng)建可以選擇日期的滑動選擇器。DatePicker的參數(shù)參數(shù)說明：參數(shù)名參數(shù)類型必填參數(shù)描述startDate否指定選擇器的起始日期。默認值：Date('1970-1-1')endDate否指定選擇器的結束日期。默認值：Date('2100-12-31')selectedDate否設置選中項的日期。默認值：當前系統(tǒng)日期DatePicker的屬性屬性說明：名稱參數(shù)類型描述lunarboolean日期是否顯示農歷。-true：展示農歷。-false：不展示農歷。默認值：falseDatePicker的事件事件說明：名稱描述onChange(callback:(value:DatePickerResult)=>void)選擇日期時觸發(fā)該事件名稱參數(shù)類型描述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小時的時間區(qū)間創(chuàng)建滑動選擇器。TimePicker的參數(shù)參數(shù)說明：參數(shù)名參數(shù)類型必填參數(shù)描述selectedDate否設置選中項的時間。默認值：當前系統(tǒng)時間TimePicker的屬性屬性說明：名稱參數(shù)類型描述useMilitaryTimeboolean展示時間是否為24小時制，不支持動態(tài)修改。默認值：falseTimePicker的事件事件說明：名稱描述onChange(callback:(value:TimePickerResult)=>void)選擇時間時觸發(fā)該事件。名稱參數(shù)類型描述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.