HarmonOS 日期选择组件(DatePicker)

本文我们一起来看基础组件中的
DatePicker
这就是日程开发中的日期组件
他可以创建一个日期的范围并创建一个日期的滑动选择器
这里我们先写一个组件的骨架

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        
      }
      .width('100%')
    }
    .height('100%')
  }
}

然后我们先在Column组件下写一个

DatePicker()

就会出现这样一个日期选择组件
我们也可以对它进行一个上下滑动
在这里插入图片描述
但这里有个问题
我们组件上的日期是 2024 1 31

但我现在的时间是 2024 1 8

这个问题官方回应是修复了但可能我们的版本不对这是一个官方认可的BUG

但可以给个默认时间我们鼠标贴到组件上出现提示后进入API文档
在这里插入图片描述
根据文档描述这个组件有三个参数

start 开始时间默认值 Date(‘1970-1-1’)
end 结束时间默认值 Date(‘2100-12-31’)
selected 默认选中的时间默认值说是系统当前日期但我们刚才也看了这个是有问题的
在这里插入图片描述
然后往下拉有一个 lunar 类型 boolean
如果是 true 表示用农历 false 表示用阳历

我们可以直接这样

@Entry
@Component
struct Index {

  @State tiwe:Date = new Date("2024-01-08");

  build() {
    Row() {
      Column() {
          DatePicker({
            start: new Date("2023-12-01"),
            end: new Date("2025-01-03"),
            selected: this.tiwe
          }).lunar(false)
      }
      .width('100%')
    }
    .height('100%')
  }
}

直接创建一个 @State 修饰的 date时间类型数据通过 new Date函数来讲字符串转为正规时间格式
然后作为 selected值就是默认选中的时间然后设置了 start 最早可以选择到 2023-12-01 end 最晚可以选择到 2025-01-03

运行结果如下
在这里插入图片描述
这里告诉大家一个很奇葩的事 start end selected 只要你有一个没设置其他的就都不会生效
希望官方早点修复

然后我们可以通过 lunar 控制他是用阳历还是农历例如我们这里改成 true 用农历的
在这里插入图片描述
然后我们可以通过 onChange 监听时间改变并输出改变的值

DatePicker({
	start: new Date("2023-12-01"),
	end: new Date("2025-01-03"),
	selected: this.tiwe
})
.lunar(false)
.onChange((value:object)=> {
    console.log(JSON.stringify(value));
})

onChange的参数是一个JSON对象我们通过 js的JSON.stringify将它转字符串
此时我们拖动修改时间就会输出
在这里插入图片描述
但这里值得一提的是不要想什么响应式 HarmonyOS 的表单是没有双向绑定的也就是说 DatePicker的选项时间改变了绑定给selected的响应式数据是不会改变的你要想办法通过这个json赋值给 selected绑定的属性