全局UI方法-弹窗四-日期滑动选择器弹窗(DatePickerDialog)

1、描述

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

2、接口

        DatePickerDialog.show(options?: DatePickerDialogOptions)

3、DatePickerDialogOptions

参数名称

参数类型

必填

默认值

参数描述

start

Date

Date("1970-1-1")

设置选择器的起始日期。

endDateDate("2100-12-31")设置选择器的结束日期。
selectedDate当前系统日期设置当前选中的日期。
lunarbooleanfalse日期是否显示为农历。
onAccept

(value:DatePickResult) => void

-点击弹窗中的“确定”按钮时触发该回调。
onCancel() => void-点击弹窗中的“取消”按钮时触发该回调。
onChange(value:DatePickResult) => void-滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。

4、DatePickResult对象说明

名称

参数类型

描述

year

number

选中日期的年。

month

number

选中日期的月(0~11),0表示1月,11表示12月。

day

number

选中日期的日。

5、示例

@Entry
@Component
struct DatePickerDialogPage {
  @State message: string = '定义日期滑动选择器弹窗并弹出'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .width("96%")
          .margin({ top: 12 })

        Button("DatePickerDialog.show Default")
          .width("96%")
          .fontSize(20)
          .margin({ top: 12 })
          .onClick(() => {
            DatePickerDialog.show({
              onAccept: (result: DatePickerResult) => {
                console.info("DatePickerDialog Default onAccept result = " + JSON.stringify(result));
              },
              onCancel: () => {
                console.info("DatePickerDialog Default onCancel");
              },
              onChange: (result: DatePickerResult) => {
                console.info("DatePickerDialog Default onChange result = " + JSON.stringify(result));
              }
            })
          })

        Button("DatePickerDialog.show selected")
          .width("96%")
          .fontSize(20)
          .margin({ top: 12 })
          .onClick(() => {
            DatePickerDialog.show({
              start: new Date("2010-1-1"),
              end: new Date("2050-12-13"),
              selected: new Date(),
              onAccept: (result: DatePickerResult) => {
                console.info("DatePickerDialog selected onAccept result = " + JSON.stringify(result));
              },
              onCancel: () => {
                console.info("DatePickerDialog selected onCancel");
              },
              onChange: (result: DatePickerResult) => {
                console.info("DatePickerDialog selected onChange result = " + JSON.stringify(result));
              }
            })
          })

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

6、效果图

默认:

selected: new Date():
start: new Date("2010-1-1"),
end: new Date("2050-12-13"),

  • 17
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yyxhzdm

你的鼓励是我创作的最大动力!!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值