自学鸿蒙HarmonyOS的ArkTS语言＜七＞各种日历日期时间picker|| CalendarPickerDialog/DatePickerDialog/TimePickerDialog

一、日历选择器弹窗

Button('点击我可以获取一个日历选择器弹窗')
    .onClick(() => {
      CalendarPickerDialog.show({
        selected: new Date(),
        onAccept: val => {
          console.log('onAccept', val)
        },
        onCancel: () => {
          console.log('点击取消')
        },
        onChange: val => {
          console.log('onChange', val)
        },
        onDidAppear: () => {
          console.log('onDidAppear')
        },
        onDidDisappear: () => {
          console.log('onDidDisappear')
        },
        onWillAppear: () => {
          console.log('onWillAppear')
        },
        onWillDisappear: () => {
          console.log('onWillDisappear')
        },
        // 按钮默认是文字按钮，可以设置背景的
        acceptButtonStyle: {
          type: ButtonType.Normal, // 按钮形状
          style: ButtonStyleMode.EMPHASIZED, // 按钮背景
          role: ButtonRole.NORMAL, // 按钮背景，有警告色红色
          backgroundColor: Color.Black, // 按钮背景，会覆盖上面两个背景
          borderRadius: 10 // 只能在type=normal时生效
        },
        cancelButtonStyle: {
          type: ButtonType.Capsule,
          style: ButtonStyleMode.NORMAL
        }
      })
    })

二、日期滑动选择器弹窗

Button('点击我可以获取一个日期滑动选择器弹窗')
    .onClick(() => {
      DatePickerDialog.show({
        start: new Date('2024-7-11'),
        end: new Date('2024-10-10'),
        selected: new Date('2024-7-12'),
        showTime: true, // 是否显示时间项
        useMilitaryTime: true, // 是否是24小时制
        lunar: false, // 是否为农历
        alignment: DialogAlignment.Center,
        disappearTextStyle: {
          color: Color.Orange,
          font: {
            size: 20,
            weight: FontWeight.Lighter
          }
        },
        textStyle: {
          color: Color.Black,
          font: {
            size: 20,
            weight: FontWeight.Normal
          }
        },
        selectedTextStyle: {
          color: Color.Green,
          font: {
            size: 30,
            weight: FontWeight.Bolder
          }
        },
        onDateAccept: val => {
          console.log('onDateAccept', val)
        },
        onCancel: () => {
          console.log('onCancel')
        },
        onDateChange: val => {
          console.log('onDateChange', val)
        },
        onDidAppear: () => {
          console.log('onDidAppear')
        },
        onDidDisappear: () => {
          console.log('onDidDisappear')
        },
        onWillAppear: () => {
          console.log('onWillAppear')
        },
        onWillDisappear: () => {
          console.log('onWillDisappear')
        },
        // 按钮默认是文字按钮，可以设置背景的  同日历选择器
        acceptButtonStyle: {xx: xx},
        cancelButtonStyle: {xx:xx}
      })
    })

三、时间滑动选择器弹窗

Button('点击我可以获取一个时间滑动选择器弹窗')
    .onClick(() => {
      TimePickerDialog.show({
        selected: new Date('2020-12-25T08:30:00'),
        useMilitaryTime: true, // 是否是24小时
        alignment: DialogAlignment.Center,
        disappearTextStyle: {
          color: Color.Orange,
          font: {
            size: 20,
            weight: FontWeight.Lighter
          }
        },
        textStyle: {
          color: Color.Black,
          font: {
            size: 20,
            weight: FontWeight.Normal
          }
        },
        selectedTextStyle: {
          color: Color.Green,
          font: {
            size: 30,
            weight: FontWeight.Bolder
          }
        },
        onAccept: val => {
          console.log('onAccept', JSON.stringify(val))
        },
        onCancel: () => {
          console.log('onCancel')
        },
        onChange: val => {
          console.log('onChange', JSON.stringify(val))
        },
        onDidAppear: () => {
          console.log('onDidAppear')
        },
        onDidDisappear: () => {
          console.log('onDidDisappear')
        },
        onWillAppear: () => {
          console.log('onWillAppear')
        },
        onWillDisappear: () => {
          console.log('onWillDisappear')
        },
        // 按钮默认是文字按钮，可以设置背景的  同日历选择器
        acceptButtonStyle: {xx: xx},
        cancelButtonStyle: {xx:xx}
      })
    })