HarmonyOS-UIAbitity-DatePicker——【坚果派-红目香薰】

红目香薰

发布于 2024-01-31 10:03:18

850

发布于 2024-01-31 10:03:18

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

摘要

作者：红目香薰团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。

HarmonyOS-UIAbitity-DatePicker

选择日期的滑动选择器组件。

接口

DatePicker(options?: {start?: Date, end?: Date, selected?: Date})

根据指定范围的Date创建可以选择日期的滑动选择器。

参数:

参数名	参数类型	必填	默认值	参数描述
start	Date	否	Date('1970-1-1')	指定选择器的起始日期。
end	Date	否	Date('2100-12-31')	指定选择器的结束日期。
selected	Date	否	当前系统日期	设置选中项的日期。

属性

名称	参数类型	默认值	描述
lunar	boolean	false	日期是否显示农历。 - true：展示农历。 - false：不展示农历。

事件

名称	功能描述
onChange(callback: (value: DatePickerResult) => void)	选择日期时触发该事件。

DatePickerResult对象说明

名称	参数类型	描述
year	number	选中日期的年。
month	number	选中日期的月(0~11)，0表示1月，11表示12月。
day	number	选中日期的日。

示例代码

 @Entry
 @Component
 struct Index {
   @State isLunar: boolean = false
   private selectedDate: Date = new Date('2021-08-08')
   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%')
   }
 }