HarmonyOS 如何自定义时间选择器

HarmonyOS
2024-12-20 17:33:56
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可以参考如下demo:

let anmDuration: number = 200;
@Entry
@Component
struct TextPickerExample1 {
  @State firstDate: string = '2024-06-19'
  @State date: string = '2024年06月19号'
  controller: CustomDialogController = new CustomDialogController({
    builder: TextPicker1({
      cancel: (date: string) => {
        this.onCancel(date)
      },
      confirm: (date: string, date1: Date) => {
        this.onAccept(date, date1)
      },
      date: this.firstDate,
    }),
    autoCancel:false,
    cornerRadius: 0,
    customStyle: true,
    alignment: DialogAlignment.BottomEnd
  })

  onCancel(date: string) {

  }

  onAccept(date: string, date1: Date) {
    let year: string = date1.getFullYear().toString();
    let month: string = (date1.getMonth() + 1) < 10 ? ('0' + (date1.getMonth() + 1)).toString() : (date1.getMonth() + 1).toString();
    let day: string = date1.getDate().toString();
    this.date = year + '年' + month + '月' + day + '日'
    this.firstDate = year + '-' + month + '-' + day + '-'
  }

  build() {
    Column() {
      Text(this.date)
      Text('日期').onClick(() => {
        this.controller.open()
      })
    }
  }
}

@CustomDialog
struct TextPicker1 {
  aboutToAppear(): void {
    this.selectedDate = new Date(this.date)
  }

  @State date: string = '2026-08-08'
  controller: CustomDialogController
  //起始年份
  @State startYear: number = 1970
  @State isLunar: boolean = false
  @State showFlag: Visibility = Visibility.Visible;
  @State isAutoCancel: boolean = false;
  @State selectedDate: Date = new Date(this.date)
  cancel?: (date: string) => void
  confirm?: (date: string, date1: Date) => void
  // 延迟关闭弹窗,让自定义的出场动画显示

  @State nowDate: Date = new Date()

  destroy() {
    this.showFlag = Visibility.Hidden
    setTimeout(() => {
      this.controller.close()
    }, anmDuration)
  }

  build() {
    Column() {
      Column() {
        Row() {
          Button('取消', { type: ButtonType.Normal }).backgroundColor(Color.White).fontColor(Color.Gray)
            .onClick(() => {
              if (this.cancel) {
                this.destroy();
                this.cancel(this.date)
              }
            })
          Button('确定', { type: ButtonType.Normal }).backgroundColor(Color.White).fontColor("#fff5b6dd")
            .onClick(() => {
              if (this.confirm) {
                this.destroy();
                this.date = this.nowDate.toString()
                this.confirm(this.date, this.nowDate)
              }
            })
        }.width('100%').justifyContent(FlexAlign.SpaceBetween)

        DatePicker({
          start: new Date('1970-1-1'),
          end: new Date('2100-1-1'),
          selected: this.selectedDate
        })
          .disappearTextStyle({ color: Color.Gray, font: { size: '16fp', weight: FontWeight.Bold } })
          .textStyle({ color: '#ff182431', font: { size: '16', weight: FontWeight.Normal } })
          .selectedTextStyle({ color: "#fff5b6dd", font: { size: '22fp', weight: FontWeight.Regular } })
          .lunar(this.isLunar)
          .onDateChange((value: Date) => {
            this.nowDate = value
            console.info('select current date is: ' + value.toString())
          })
      }
    }.width('100%').backgroundColor(Color.White).visibility(this.showFlag)
    // 定义进场出场转场动画效果
    .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration })
      .combine(TransitionEffect.translate({ y: 100 })))
  }
}
分享
微博
QQ
微信
回复
2024-12-20 20:16:40
相关问题
自定义日期滑动选择器弹窗
674浏览 • 1回复 待解决
TimePicker如何设置时间选择器的范围?
7388浏览 • 1回复 待解决
HarmonyOS 日期/日历/时间选择器开发
979浏览 • 1回复 待解决
HarmonyOS 图库选择器
349浏览 • 1回复 待解决
HarmonyOS 自定义弹窗选择
777浏览 • 1回复 待解决
HarmonyOS web如何拉起图库选择器
487浏览 • 1回复 待解决
HarmonyOS 图片选择器怎么实现
372浏览 • 1回复 待解决
HarmonyOS 有状态选择器
331浏览 • 1回复 待解决
HarmonyOS 自定义图片选择界面
488浏览 • 1回复 待解决
HarmonyOS图片选择器相关的问题
867浏览 • 1回复 待解决
HarmonyOS 地区选择器多级列表效果
744浏览 • 1回复 待解决
HarmonyOS自定义相册选择页面咨询
749浏览 • 1回复 待解决