HarmonyOs应用《日记本》开发第20篇 - 日期选择器 DatePicker 使用

本篇详细讲解鸿蒙 ArkUI 中日期选择器组件的使用方法结合日记应用中的实际场景进行分析。一、DatePicker 概述在日记应用中用户需要为每条日记选择日期。鸿蒙提供了DatePicker组件和DatePickerDialog弹窗两种方式来选择日期。二、DatePicker 组件2.1 基本用法DatePicker({start:newDate(2020-01-01),end:newDate(2030-12-31),selected:newDate()}).width(100%).height(180).onDateChange((value:Date){console.log(选中的日期:${value})})2.2 参数说明参数类型说明startDate可选范围的起始日期endDate可选范围的结束日期selectedDate默认选中的日期2.3 事件回调DatePicker({start:newDate(2020-01-01),end:newDate(),selected:this.selectedDate}).onDateChange((value:Date){this.selectedDatevaluethis.diary.datethis.formatDate(value)})三、DatePickerDialog 弹窗3.1 基本用法在日记应用中使用弹窗形式更加友好privateshowDatePickerDialog(){DatePickerDialog.show({start:newDate(2020-01-01),end:newDate(),selected:this.selectedDate,onAccept:(value:DatePickerResult){constdatenewDate(value.year,value.month,value.day)this.selectedDatedatethis.diary.datethis.formatDate(date)},onCancel:(){console.log(用户取消了日期选择)},onChange:(value:DatePickerResult){console.log(当前选中:${value.year}-${value.month1}-${value.day})}})}3.2 回调函数说明回调触发时机参数类型onAccept用户点击确认DatePickerResultonCancel用户点击取消无onChange滚动选择变化DatePickerResult3.3 DatePickerResult 结构interfaceDatePickerResult{year:number// 选中的年份month:number// 选中的月份0-11day:number// 选中的日期}重要提醒month字段的范围是 0-111月为012月为11。使用时需要 1 转换。四、日记应用中的日期选择4.1 日期选择行 UIBuilderDateRow(){Row({space:8}){Image($r(app.media.calendar)).width(20).height(20).fillColor(#666)Text(this.formatDisplayDate(this.selectedDate)).fontSize(16).layoutWeight(1)Image($r(app.media.arrow_right)).width(16).height(16).fillColor(#CCC)}.width(100%).padding(16).backgroundColor(#FFFFFF).borderRadius(12).onClick((){this.showDatePickerDialog()})}4.2 日期格式化// 存储格式YYYY-MM-DDprivateformatDate(date:Date):string{constyeardate.getFullYear()constmonth(date.getMonth()1).toString().padStart(2,0)constdaydate.getDate().toString().padStart(2,0)return${year}-${month}-${day}}// 展示格式YYYY年MM月DD日privateformatDisplayDate(date:Date):string{return${date.getFullYear()}年${date.getMonth()1}月${date.getDate()}日}4.3 解析存储的日期字符串privateparseDate(dateStr:string):Date{constpartsdateStr.split(-)constyearparseInt(parts[0])constmonthparseInt(parts[1])-1// 月份减1constdayparseInt(parts[2])returnnewDate(year,month,day)}五、日期范围限制5.1 限制未来日期DatePickerDialog.show({start:newDate(2020-01-01),end:newDate(),// 不能选择未来日期selected:this.selectedDate})5.2 限制特定范围// 只能选择最近30天conststartnewDate()start.setDate(start.getDate()-30)DatePickerDialog.show({start:start,end:newDate(),selected:this.selectedDate})六、TextPickerDialog 时间选择除了日期有时也需要选择时间TextPickerDialog.show({range:[上午,下午,晚上],selected:0,onAccept:(value:TextPickerResult){console.log(选中:${value.value})}})七、日期计算工具7.1 获取星期几privategetWeekday(date:Date):string{constweekdays[周日,周一,周二,周三,周四,周五,周六]returnweekdays[date.getDay()]}7.2 计算日期差privatedaysBetween(date1:Date,date2:Date):number{constmsPerDay24*60*60*1000constdiffMath.abs(date1.getTime()-date2.getTime())returnMath.floor(diff/msPerDay)}7.3 获取当月天数privategetDaysInMonth(year:number,month:number):number{returnnewDate(year,month1,0).getDate()}八、日期验证8.1 验证日期有效性privateisValidDate(dateStr:string):boolean{constdatenewDate(dateStr)return!isNaN(date.getTime())}8.2 验证日期范围privateisDateInRange(date:Date,start:Date,end:Date):boolean{returndatestartdateend}九、国际化日期9.1 使用系统格式constdatenewDate()constformatteddate.toLocaleDateString(zh-CN,{year:numeric,month:long,day:numeric})// 输出2026年7月24日9.2 相对时间privategetRelativeTime(date:Date):string{constnownewDate()constdiffnow.getTime()-date.getTime()constdaysMath.floor(diff/(24*60*60*1000))if(days0)return今天if(days1)return昨天if(days2)return前天if(days7)return${days}天前if(days30)return${Math.floor(days/7)}周前returnthis.formatDisplayDate(date)}十、总结DatePicker 在日记应用中的使用要点弹窗形式DatePickerDialog.show()是最常用的方式月份处理month范围是 0-11必须注意 1/-1 转换日期格式化存储用YYYY-MM-DD展示用本地化格式范围限制通过start和end控制可选范围回调处理onAccept获取确认结果onCancel处理取消日期工具封装日期计算和验证方法提高复用性正确处理日期是应用开发的基础技能特别是在涉及日期选择、格式化和存储时需要特别注意月份从0开始这一常见陷阱。