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开始这一常见陷阱。

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

相关推荐

未来展望：GitHub 加速计划的完整 roadmap 与新功能规划

3分钟掌握Wallpaper Engine壁纸资源提取：RePKG终极指南

PowerMenu：终极Android弹出菜单库的完整指南

更多资讯

Unity UI Overdraw优化实战：从GPU发烫到帧率稳定

突破认知局限：神经可塑性训练与职场成长策略

Swift 中的 REINFORCE Leave-One-Out (RLOO)：原理、参数配置与源码实现解析

CMS还是SAAS建站？一文讲透技术选型、成本与SEO那把账

军工信创环境下基于国产PHP框架的视频分片秒传实战

MCP Toolbox for Databases 的 Couchbase 数据源配置详解：从连接串到参数化 SQL 工具

今日更新

51单片机开环控制磁阻传感器的硬件匹配与代码实现

AI Agent安全操作数据库：SQL注入防御与参数化查询实战

Android逆向实战：还原激励类App签到接口的签名算法

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？