ArkTS-日期滑动选择器弹窗

最新推荐文章于 2024-07-11 14:42:45 发布

永不满足的求知者

最新推荐文章于 2024-07-11 14:42:45 发布

阅读量728

点赞数 10

分类专栏：鸿蒙ArkTS 文章标签：鸿蒙前端

本文链接：https://blog.csdn.net/qq_41154522/article/details/134710966

版权

鸿蒙ArkTS 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

在这里插入图片描述

日期滑动选择器弹窗

根据指定的日期范围创建日期滑动选择器，展示在弹窗上。

示例

lunar：接受一个boolean值，日期是否显示为农历。

@Entry
@Component
struct DatePickerDialogExample {
  selectedDate: Date = new Date("2010-1-1")
  @State lunarValue: boolean = false

  build() {
    Column() {

      Button(this.lunarValue ? '当前为农历，点击切换为阳历' : '当前为阳历，点击切换为农历')
        .fontSize(20)
        .type(ButtonType.Normal)
        .margin(20)
        .onClick(() => {
          this.lunarValue = !this.lunarValue
        })

      Button("日历弹窗")
        .margin(20)
        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectedDate,
            lunar: this.lunarValue,
            onAccept: (value: DatePickerResult) => {
              // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
              this.selectedDate.setFullYear(value.year, value.month, value.day)
              console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("DatePickerDialog:onCancel()")
            },
            onChange: (value: DatePickerResult) => {
              console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
            }
          })
        })
    }.width('100%')
  }
}