HarmonyOS DatePicker和TimePicker自定义需求？

Question

DatePicker和TimePicker支持更多UI自定义，具体如下：

需求1：时间选中这一栏的背景色支持修改

需求2：

时间选择器年月日，小时分钟可以限制范围，如小时可以只展示9时\~16时，其余时间不展示

需求3：

选中的数字后面可以加单位，小时显示时，分钟后面显示分等单位

Answer 1

PikcerDialog类的组件是和HarmonyOS系统色保持一致的，并不支持自定义；所以，请使用Picker弹窗的时候优先考虑自己使用Picker类组件自行封装。

主要方案就是使用全局自定义弹窗PromptAction.openCustomDialog封装TextPicker组件，然后达成像TextPickerDialog同样的功能，但是拥有更高的自定义程度。

可以参考代码：

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Faq_240813144721023Page {
  @State message: string = 'Hello World';

  private customDialogComponentId: number = 0
  private selectDialogIn: number = 0
  private daysDialogIn: string[] = Array(31).fill(0).map((v: string, i) => i + 1).map(n => n.toString());
  @State showDayDialogIn: string = ''

  @Builder
  customDialogComponent() {
    Column() {
      //orange area
      Row() {
        Text(this.showDayDialogIn).fontColor('#FF9A3C').fontSize(15).margin({ left: 10 })
        Text('天以后可以修改').fontColor('#FF9A3C').fontSize(15)
      }
      .height(50).width('100%').alignItems(VerticalAlign.Center).backgroundColor('#FEF2E5')

      // cancal area
      Row() {
        Text('取消').fontColor('#9C9C9C').fontSize(20).margin({ left: 10 })
          .onClick(() => {
            promptAction.closeCustomDialog(this.customDialogComponentId)
            this.showDayDialogIn = ''
          })
        Text('选择持续天数').fontColor('#2D2D2D').fontSize(17)
        Text('确定')
          .fontColor('#507DAF')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .margin({ right: 10 })
          .onClick(() => {
            this.showDayDialogIn = ''
            promptAction.closeCustomDialog(this.customDialogComponentId)
          })
      }
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .height(60)

      // textpicker area
      Row() {
        TextPicker({ range: this.daysDialogIn, selected: this.selectDialogIn })
          .onChange((value: string | string[], index: number | number[]) => {
            this.showDayDialogIn = value.toString()
            console.info('Picker item changed, value: ' + value + ', index: ' + index)
          })
          .canLoop(false)
          .divider({
            strokeWidth: '2px',
            startMargin: 20,
            endMargin: 20,
            color: '#33000000'
          })
          .gradientHeight('60%')
          .disappearTextStyle({ color: Color.Black, font: { size: 20, weight: FontWeight.Lighter } })
          .textStyle({ color: Color.Black, font: { size: 20, weight: FontWeight.Lighter } })
          .selectedTextStyle({ color: Color.Black, font: { size: 20, weight: FontWeight.Normal } })
        Text('天').fontSize(20).fontColor(Color.Black)
      }.width('100%').alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).margin({ top: 10 })
    }.width('100%').height(360)
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('Faq_240813144721023PageHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(()=>{
          promptAction.openCustomDialog({
            builder: () => {
              this.customDialogComponent()
            },
            onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
              console.info("reason" + JSON.stringify(dismissDialogAction.reason))
              console.log("dialog onWillDismiss")
              if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
                dismissDialogAction.dismiss()
              }
              if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
                dismissDialogAction.dismiss()
              }
            }
          }).then((dialogId: number) => {
            this.customDialogComponentId = dialogId
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}