鸿蒙实现年月日十分选择框，支持年月日、月日、日、年月日时分、时分切换

import DateTimeUtils from './DateTimeUtils';

@CustomDialog
export default struct RQPickerDialog {
  controller: CustomDialogController
  title: string = '这是标题'
  TAG: string = 'RQPickerDialog'
  // 0 - 日期类型（年月日）    1 - 时间类型（时分）    2 - 日期+时间类型    3 - 日期类型2（月日）    4-日期类型3（日）
  @State type: string = '4'
  private dateFormat: string = 'yyyy-MM-dd HH:mm'
  monthList: string[] = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  arr: number[] = [1, 3, 5, 7, 8, 10, 12] // 含有31天的月份
  @State dayList: string[] = []
  minimumDate: Date = new Date()
  maximumDate: Date = new Date()
  currentDate: Date = new Date()
  selectedTime: Date = new Date()
  @State @Watch('monthChange') selectedMonth: number = 0;
  selectedDay: number = 0;

  monthChange() {
    let year = this.currentDate.getFullYear()
    let dayOfMonth = this.arr.some(v => v === (this.selectedMonth + 1)) ? 31 : ((this.selectedMonth + 1) === 2 ? ((year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) ? 29 : 28) : 30)
    console.log(this.TAG, year + "-" + this.selectedMonth + "----有多少天 " + dayOfMonth)
    this.dayList = []
    for (let i = 0; i < dayOfMonth; i++) {
      this.dayList.push((i + 1) + "日")
    }
    console.log(this.TAG, this.dayList.join(','))
  }

  aboutToAppear() {
    this.minimumDate = new Date('1999-1-1 00:00');
    this.maximumDate = new Date('2124-1-1 00:00');
    this.currentDate = new Date('2016-2-27 10:00');
    this.selectedTime = this.currentDate;
    //月份本来就是从0开始的
    this.selectedMonth = this.currentDate.getMonth()
    this.selectedDay = this.currentDate.getDate() - 1

    console.log(this.TAG, this.selectedMonth + "----" + this.selectedDay)
  }

  build() {
    Column() {
      Text(this.title + this.type)
        .fontSize(25)
        .textAlign(TextAlign.Center)
        .margin({ top: 10, bottom: 10 });
      Row() {
        if (this.type == '0') {
          DatePicker({
            start: new Date(this.minimumDate),
            end: new Date(this.maximumDate),
            selected: this.currentDate,
          }).lunar(false)
            .onChange((value: DatePickerResult) => {
              this.currentDate.setFullYear(value.year, value.month, value.day)
              console.info('select current date is: ' + JSON.stringify(value))
            }).width('100%')
        } else if (this.type == '1') {
          TimePicker({ selected: this.selectedTime })
            .useMilitaryTime(true)
            .onChange((date: TimePickerResult) => {
              this.currentDate.setHours(date.hour, date.minute)
              console.info('select current date is: ' + JSON.stringify(date))
            }).width('100%')
        } else if (this.type == '2') {
          DatePicker({
            start: new Date(this.minimumDate),
            end: new Date(this.maximumDate),
            selected: this.currentDate,
          }).lunar(false)
            .onChange((value: DatePickerResult) => {
              this.currentDate.setFullYear(value.year, value.month, value.day)
              console.info('select current date is: ' + JSON.stringify(value))
            }).width('66%')
          TimePicker({ selected: this.selectedTime })
            .useMilitaryTime(true)
            .onChange((date: TimePickerResult) => {
              this.currentDate.setHours(date.hour, date.minute)
              console.info('select current date is: ' + JSON.stringify(date))
            }).width('34%')
        } else if (this.type == '3') { //月日
          TextPicker({ range: this.monthList, selected: this.selectedMonth })
            .onChange((value: string, index: number) => {
              this.selectedMonth = index
              let month = ~~value.substring(0, value.length - 1)
              this.currentDate.setMonth(month - 1)
              console.info(this.TAG, 'month value is ' + value + "==" + month)
            }).width('50%')
          TextPicker({ range: this.dayList, selected: this.selectedDay })
            .onChange((value: string, index: number) => {
              this.selectedDay = index
              let day = ~~value.substring(0, value.length - 1)
              this.currentDate.setDate(day)
              console.info(this.TAG, 'day value is ' + value + "==" + day)
            }).width('50%')
        } else if (this.type == '4') { //日
          TextPicker({ range: this.dayList, selected: this.selectedDay })
            .onChange((value: string, index: number) => {
              this.selectedDay = index
              let day = ~~value.substring(0, value.length - 1)
              this.currentDate.setDate(day)
              console.info(this.TAG, 'day value is ' + value)
            }).width('100%')
        } else {
          DatePicker({
            start: new Date(this.minimumDate),
            end: new Date(this.maximumDate),
            selected: this.currentDate,
          }).lunar(false)
            .onChange((value: DatePickerResult) => {
              this.currentDate.setFullYear(value.year, value.month, value.day)
              console.info('select current date is: ' + JSON.stringify(value))
            }).width('100%')
        }
      }

      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        Button('取消', { type: ButtonType.Normal })
          .onClick(() => {
            // this.that.sendDialogEventToJsApi(this.dialogId, "cancel", { ok: false,
            //   dismissByClickBg: false,
            //   inputContent: '' })
            // this.that.closeH5Dialog(this.dialogId)
            this.controller.close()
          })
          .backgroundColor(0xffffff)
          .fontColor(Color.Black)
          .layoutWeight(1)
          .height('100%')
        Divider()
          .vertical(true)
          .strokeWidth(1)
          .color('#F1F3F5')
          .opacity(1)
          .height('100%')
        Button('确认', { type: ButtonType.Normal })
          .onClick(() => {
            this.controller.close()
            var formatResult = DateTimeUtils.dateFormat(this.currentDate, this.dateFormat)
            console.info(this.TAG, "select current date is: " + formatResult)
          })
          .backgroundColor(0xffffff)
          .fontColor(Color.Blue)
          .layoutWeight(1)
          .height('100%')
      }.height(50)
    }
  }
}

日期格式化工具

/*
  timestamp: 13位时间戳 | new Date() | Date()
  console.log(dateFormat(1714528800000, 'YY-MM-DD HH:mm:ss'))
  format => YY：年，M：月，D：日，H：时，m：分钟，s：秒，SSS：毫秒
*/
export default class DateTimeUtils {
  static fixedTwo(value: number): string {
    return value < 10 ? '0' + value : String(value)
  }

  static dateFormat(timestamp: number | string | Date, format = 'yyyy-MM-dd HH:mm:ss'): string {
    var date = new Date(timestamp)
    var showTime = format
    if (showTime.includes('SSS')) {
      const S = date.getMilliseconds()
      showTime = showTime.replace('SSS', '0'.repeat(3 - String(S).length) + S)
    }
    if (showTime.includes('yy')) {
      const Y = date.getFullYear()
      showTime = showTime.includes('yyyy') ? showTime.replace('yyyy', String(Y)) : showTime.replace('yy', String(Y)
        .slice(2, 4))
    }
    if (showTime.includes('M')) {
      const M = date.getMonth() + 1
      showTime = showTime.includes('MM') ? showTime.replace('MM', this.fixedTwo(M)) : showTime.replace('M', String(M))
    }
    if (showTime.includes('d')) {
      const D = date.getDate()
      showTime = showTime.includes('dd') ? showTime.replace('dd', this.fixedTwo(D)) : showTime.replace('d', String(D))
    }
    if (showTime.includes('H')) {
      const H = date.getHours()
      showTime = showTime.includes('HH') ? showTime.replace('HH', this.fixedTwo(H)) : showTime.replace('H', String(H))
    }
    if (showTime.includes('m')) {
      var m = date.getMinutes()
      showTime = showTime.includes('mm') ? showTime.replace('mm', this.fixedTwo(m)) : showTime.replace('m', String(m))
    }
    if (showTime.includes('s')) {
      var s = date.getSeconds()
      showTime = showTime.includes('ss') ? showTime.replace('ss', this.fixedTwo(s)) : showTime.replace('s', String(s))
    }
    return showTime
  }
}