HarmonyOS 鸿蒙Next利用TextPicker实现日期选择框只有【年】或者【年月】或【月日】

HarmonyOS 鸿蒙Next利用TextPicker实现日期选择框只有【年】或者【年月】或【月日】

看到好多人在问这个问题，写个例子集中回复

@Entry
@Component
struct Page39 {
  @State generateYearMonth: TextCascadePickerRangeContent [] = []
  @State generateMonthDay: TextCascadePickerRangeContent [] = []
  @State generateYear: TextCascadePickerRangeContent [] = []

  generateYearMonthRange(startYear: number, endYear: number): TextCascadePickerRangeContent[] {
    const range: TextCascadePickerRangeContent[] = [];

    for (let year = startYear; year <= endYear; year++) {
      const months: TextCascadePickerRangeContent[] = [];
      for (let month = 1; month <= 12; month++) {
        months.push({
          text: `${month.toString().padStart(2, '0')}月` // 确保月份是两位数
        });
      }
      // 只有当月份数组不为空时，才添加到range中
      if (months.length > 0) {
        range.push({
          text: `${year}年`, // 使用年份作为文本
          children: months // 只有当月份不为空时，才设置children属性
        });
      }
    }

    return range; // 返回一维数组
  }

  generateMonthDayRange(year: number): TextCascadePickerRangeContent[] {
    const range: TextCascadePickerRangeContent[] = [];

    // 生成月份
    for (let month = 1; month <= 12; month++) {
      const days: TextCascadePickerRangeContent[] = [];

      // 计算每个月的天数
      let daysInMonth = new Date(year, month, 0).getDate();
      for (let day = 1; day <= daysInMonth; day++) {
        days.push({
          text: `${day.toString().padStart(2, '0')}日` // 确保天数是两位数
        });
      }

      range.push({
        text: `${month.toString().padStart(2, '0')}月`, // 使用月份作为文本
        children: days
      });
    }

    return range;
  }

  generateYearRange(startYear: number, endYear: number): TextCascadePickerRangeContent[] {
    const range: TextCascadePickerRangeContent[] = [];

    for (let year = startYear; year <= endYear; year++) {
      range.push({
        text: `${year}年`
      });
    }

    return range;
  }

  aboutToAppear(): void {
    this.generateYear = this.generateYearRange(2000, 2024);
    this.generateYearMonth = this.generateYearMonthRange(2000, 2024);
    this.generateMonthDay = this.generateMonthDayRange(2024);
  }

  build() {
    Column() {
      Button('指定【年】区间列表')
      TextPicker({ range: this.generateYear })
        .onChange((value: string | string[], index: number | number[]) => {
          console.info('TextPicker 多列联动:onChange ' + JSON.stringify(value) + ', ' + 'index: ' +
          JSON.stringify(index))
        })
      Button('指定【年】【月】区间列表')
      TextPicker({ range: this.generateYearMonth })
        .onChange((value: string | string[], index: number | number[]) => {
          console.info('TextPicker 多列联动:onChange ' + JSON.stringify(value) + ', ' + 'index: ' +
          JSON.stringify(index))
        })
      Button('【月】【日】区间列表')
      TextPicker({ range: this.generateMonthDay })
        .onChange((value: string | string[], index: number | number[]) => {
          console.info('TextPicker 多列联动:onChange ' + JSON.stringify(value) + ', ' + 'index: ' +
          JSON.stringify(index))
        })
    }
    .height('100%')
    .width('100%')
  }
}