本章内容概要

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	日期是否显示农历。 - true：展示农历。 - false：不展示农历。 默认值：false

案例代码

@Entry
@Component
struct DatePickerNote {
  private  optionSelectDate:Date= new Date('2022-2-2')
  @State hasLanar:boolean = false
  @State datePickerData:object ={
  start:new Date('2020-1-1'),
  end: new Date('3040-1-1'),
  selected:new Date('2022-2-2')
}

  build() {
    Row() {
      Column({space:20}) {
        Button('日期选择').fontSize(25).onClick(()=>{
          this.hasLanar = !this.hasLanar
        })

        DatePicker({
           start:this.datePickerData['start'],
            end:this.datePickerData['end'],
           selected:this.datePickerData['selected']
        })
          .lunar(this.hasLanar)
          .onChange((value:DatePickerResult) => {
            this.optionSelectDate =new Date(`${value.year}- ${value.month} - ${value.day}`)

          })

      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
    .width('100%')
  }
}

点击按钮来进行 农历和阳历的切换， 同时 将变量定义到 代码的最上方

效果图

农历	阳历

注意： 点击onChange时的 callback对象DatePickerResult 的属性如下：

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

坑点

在 api9 这个版本中 ， 在onChange 中如果赋值是字符串的换 会有问题， 但是赋值Data 对象，如代码中那样，会出现数据无法及时更新的问题

日期滑动选择器弹窗

DatePickerDialogOptions参数

参数名	参数类型	必填	默认值	参数描述
start	Date	否	Date('1970-1-1')	设置选择器的起始日期。
end	Date	否	Date('2100-12-31')	设置选择器的结束日期。
selected	Date	否	当前系统日期	设置当前选中的日期。
lunar	boolean	否	false	日期是否显示为农历。
onAccept	(value: DatePickerResult) => void	否	-	点击弹窗中的“确定”按钮时触发该回调。
onCancel	() => void	否	-	点击弹窗中的“取消”按钮时触发该回调。
onChange	(value: DatePickerResult) => void	否	-	滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。

案例展示

代码展示

@Entry
@Component
struct DatePickerDialogNote {
  private  selectDate:Date = new Date('2024-1-1')
  @State selectDataShow:string =''
  build() {
    Row() {
      Column() {
        Text(this.selectDataShow).fontSize(20)
          Button('弹窗展示').onClick(()=>{
             DatePickerDialog.show({
                  start:new Date('2000-1-1'),
               end:new Date('3030-1-1'),
               onAccept:(val:DatePickerResult)=>{
//                 this.selectDate.setFullYear(val.year, val.month, val.day)
                 this.selectDataShow = `${val.year} - ${val.month + 1}- ${val.day}`
               },
               onCancel:()=>{
                 console.log('取消')
               }
             })
          })
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

注意：

this.selectDate.setFullYear(val.year, val.month, val.day) 时在api9 的接口中测试是无法正确回显的， 因此 案例中采用的是 字符串拼接的格式 用于时间的回显

但是 注意 month 是从 0 开始 的因此需要加一 ， 用来确保正确的时间范围

DatePickerResult 返回值

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

TimePicker

有日期选择器，自然就有时间选择器， 接下来我们一起看下时间选择器的使用。

时间选择组件，根据指定参数创建选择器，支持选择小时及分钟

参数

TimePicker(options?: {selected?: Date})

默认以24小时的时间区间创建滑动选择器。

参数名	参数类型	必填	参数描述
selected	Date	否	设置选中项的时间。 默认值：当前系统时间

属性

名称	参数类型	描述
useMilitaryTime	boolean	展示时间是否为24小时制，不支持动态修改。 默认值：false

代码展示

import router from '@ohos.router';
@Entry
    @Component
    struct TimePicekerCom {
        @State selectedTime:string = ''
        build() {
            Row() {
                Column({space:20}) {
                    Row(){
                        Text(`选择的时间是: ${this.selectedTime}`).fontSize(20)
                    }
                    Row(){
                        Button('返回').fontSize(20).onClick(()=>{
                            router.back()
                        })
                    }
                    Row(){
                        TimePicker().onChange((val:TimePickerResult)=>{
                            this.selectedTime= `${val.hour} - ${val.minute}`
                        })
                    }
                }
                .height('100%')
                    .width('100%')
            }
            .height('100%')
                .width('100%')
        }
    }

效果展示

TimePickerResult返回值

名称	参数类型	描述
hour	number	选中时间的时。 取值范围：[0-23]
minute	number	选中时间的分。 取值范围：[0-59]

时间滑动选择器弹窗

参数

定义时间滑动选择器弹窗并弹出。

参数名	参数类型	必填	参数描述
selected	Date	否	设置当前选中的时间。 默认值：当前系统时间
useMilitaryTime	boolean	否	展示时间是否为24小时制，默认为12小时制。 默认值：false
onAccept	(value: TimePickerResult) => void	否	点击弹窗中的“确定”按钮时触发该回调。
onCancel	() => void	否	点击弹窗中的“取消”按钮时触发该回调。
onChange	(value: TimePickerResult) => void	否	滑动弹窗中的选择器使当前选中时间改变时触发该回调。

代码展示

import router from '@ohos.router';
@Entry
    @Component
    struct MethodTimePickerNote {
        @State selectedTime:string = ''

        build() {
            Row() {
                Column({space:20}) {
                    Row(){
                        Text(`选择的时间是: ${this.selectedTime}`).fontSize(20)
                    }
                    Row(){
                        Button('返回').fontSize(20).onClick(()=>{
                            router.back()
                        })
                    }
                    Row() {
                        Button('选择时间').fontSize(20).onClick(()=>{
                            TimePickerDialog.show({
                                useMilitaryTime:true,
                                onAccept:(val:TimePickerResult)=>{
                                    this.selectedTime= `${val.hour} - ${val.minute}`
                                },
                                onCancel:()=>{
                                    console.log('取消')
                                }
                            })
                        })
                    }
                }
                .width('100%')
                    .height('100%')
            }
            .height('100%')
        }
    }

效果展示