《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識(shí)點(diǎn)2-13-1 日期選擇器與時(shí)間選擇器

日期選擇器與時(shí)間選擇器日期選擇器概述日期選擇器DatePiker，是選擇日期的滑動(dòng)選擇器組件。如右圖所示。接口描述：DatePicker(options?:{start?:Date,end?:Date,selected?:Date})根據(jù)指定范圍的Date創(chuàng)建可以選擇日期的滑動(dòng)選擇器。DatePicker的參數(shù)參數(shù)說(shuō)明：參數(shù)名參數(shù)類型必填參數(shù)描述startDate否指定選擇器的起始日期。默認(rèn)值：Date('1970-1-1')endDate否指定選擇器的結(jié)束日期。默認(rèn)值：Date('2100-12-31')selectedDate否設(shè)置選中項(xiàng)的日期。默認(rèn)值：當(dāng)前系統(tǒng)日期DatePicker的屬性屬性說(shuō)明：名稱參數(shù)類型描述lunarboolean日期是否顯示農(nóng)歷。-true：展示農(nóng)歷。-false：不展示農(nóng)歷。默認(rèn)值：falseDatePicker的事件事件說(shuō)明：名稱描述onChange(callback:(value:DatePickerResult)=>void)選擇日期時(shí)觸發(fā)該事件名稱參數(shù)類型描述yearnumber選中日期的年。monthnumber選中日期的月(0~11)，0表示1月，11表示12月。daynumber選中日期的日。DatePickerResult對(duì)象說(shuō)明：DatePicker使用示例@Entry@Componentstruct

DatePickerExample

{

@State

isLunar:

boolean

=

false

private

selectedDate:

Date

=

new

Date('2023-03-10')

build()

{

Column()

{

Button('切換公歷農(nóng)歷')

.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%')

}}時(shí)間選擇器概述時(shí)間選擇器TimePicker，是滑動(dòng)選擇時(shí)間的組件。如右圖所示。接口描述：TimePicker(options?:{selected?:Date})默認(rèn)以24小時(shí)的時(shí)間區(qū)間創(chuàng)建滑動(dòng)選擇器。TimePicker的參數(shù)參數(shù)說(shuō)明：參數(shù)名參數(shù)類型必填參數(shù)描述selectedDate否設(shè)置選中項(xiàng)的時(shí)間。默認(rèn)值：當(dāng)前系統(tǒng)時(shí)間TimePicker的屬性屬性說(shuō)明：名稱參數(shù)類型描述useMilitaryTimeboolean展示時(shí)間是否為24小時(shí)制，不支持動(dòng)態(tài)修改。默認(rèn)值：falseTimePicker的事件事件說(shuō)明：名稱描述onChange(callback:(value:TimePickerResult)=>void)選擇時(shí)間時(shí)觸發(fā)該事件。名稱參數(shù)類型描述hournumber選中時(shí)間的時(shí)。minutenumber選中時(shí)間的分。TimePickerResult對(duì)象說(shuō)明：TimePicker使用示例@Entry@Componentstruct

TimePickerExample

{

@State

isMilitaryTime:

boolean

=

false

private

selectedTime:

Date

=

new

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

build()

{

Column()

{

Button('切換12小時(shí)制/24小時(shí)制')

.margin({

top:

30

})

.onClick(()

=>

{

this.isMilitaryTime

=

!this.isMilitaryTime

})

TimePicker({

selected:

this.selectedTime,

})

.useMilitaryTime(this.isMilitaryTime)

.onChange((value:

TimePickerResult)

=>

{

this.selectedTime.setHours(value.hour,

value.