【HarmonyOS】鸿蒙 TextPicker 日期选择
作者：zhongcx
- 2024-10-10 广东
本文字数：1769 字
阅读完需：约 6 分钟
利用 TextPicker 实现日期选择框只有【年】或者【年月】或【月日】
generateYearMonthRange
这个函数生成一个包含年份和对应月份的级联选择器数据。它接受起始年份和结束年份作为参数，并返回一个包含年份及其对应的月份的数组。
generateMonthDayRange
这个函数针对特定年份生成包含月份和对应天数的级联选择器数据。它接受一个年份参数，并返回一个包含月份及其对应天数的数组。
generateYearRange
这个函数仅生成一个包含指定范围内年份的简单列表。
@Entry@Componentstruct 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%') }}复制代码
划线
评论
复制
发布于: 刚刚阅读数: 6
zhongcx
关注
还未添加个人签名 2024-09-27 加入
还未添加个人简介
评论