HarmonyOS 实战：自定义时间选择器

作者：IT小码哥

2025-05-27
北京
本文字数：1611 字
阅读完需：约 5 分钟

前言

最近在日常鸿蒙开发过程中，经常会使用一些时间选择器，鸿蒙官方提供的时间选择器满足不了需求，所以自己动手自定义一些经常会使用到的时间选择器，希望能帮到你，建议点赞收藏！

实现效果

需求分析

默认选中日期为当前时间。
支持精确到时分。
注意闰年的计算。

技术实现

首先要想实现时间选择器，需要使用一个上下可以滚动的控件，这里使用鸿蒙官方提供的 TextPicker,TextPicker 控件支持内容的上下滚动，可以用来显示年月日的选择器，确定了控件后，先计算日期。

 new Promise<string[]>(async (resolve: (data: Array<string>) => void, reject) => {      let list: Array<string> = []      for (let start = this.currentYear; start <= this.currentYear + 1; start++) {        //月份        for (let i = (start == this.currentYear?this.startMonth:1); i < 13; i++) {          let day: number = 0          if (i == 1 || i == 3 || i == 5 || i == 7 || i == 8 || i == 10 || i == 12) {            day = 31          } else if (i == 2) {            //闰年            if (start % 400 == 0 || (start % 4 == 0 && start % 100 > 0)) {              day = 29            }            // //平年            else {              day = 28            }          } else {            day = 30          }          for (let j = ((start == this.currentYear&& i == this.startMonth)?this.startDay:1); j <= day; j++) {            list.push(start + "-" + (i).toString().padStart(2,"0") + "-" + j.toString().padStart(2,"0"))          }        }      }      resolve(list)    }).then((result: Array<string>) => {      this.timeList = result    })

复制代码

由于计算日期是比较耗时的操作，这里使用 Pormise 处理日期的计算，特别需要注意闰年的日期计算，这里以 1 年为周期。

根据计算得到的日期数据集合，使用 TextPicker 显示年月日，同时默认选中当前时间 choseDay。

 TextPicker({ range: this.timeList, value: this.choseDay })            .pickerStyle()            .onChange((value, index) => {              this.choseDay = value.toString()            })            .width(105)

复制代码

计算时分数据。

 for (let i = 0; i < 60; i=i+this.skipMinute) {      this.minuteList.push((i<10?"0"+i:i).toString().concat(this.isShowUnit?"分":""))    }    for (let i = 0; i < 24; i++) {      this.hourList.push((i<10?"0"+i:i).toString().concat(this.isShowUnit?"时":""))    }

复制代码

分别使用 TextPicker 显示时分。

 TextPicker({        range: this.hourList,        value:this.currentHour+""      }).pickerStyle()        .onChange((value,index)=>{          this.selectHour = value+""          this.onChange(this.selectHour.concat(":"+this.selectMinute))
        })      TextPicker({        range: this.minuteList,        value:this.currentMinute+""      }).pickerStyle()        .onChange((value,index)=>{          this.selectMinute = value.toString()          this.onChange(this.selectHour+":"+value)        })

复制代码

要让时间选择器默认选择当前时间时，需要注意选择器的格式为"2012-01-01",需要在计算时不足 10 时补 0。否则时间选择器不会默认选中当前时间。
鸿蒙官方的 Date 类默认提供的月份是从 0 开始的，也就是说通过 data.getUTCMoth()获取的月份默认范围为 [0,11],而选择器需要显示的是 [1,12],这里需要手动处理。

总结

自定义时间选择器看似简单，其实需要注意的地方不少，时间的计算，时间的显示格式，默认选中当前时间等。都需要开发者在日常开发中注意计算细节。看到这里相信你已经学会了怎么自定义一个时间选择器了，快去动手试试吧！

发布于: 1 小时前阅读数: 8

IT小码哥

关注

还未添加个人签名 2021-04-29 加入

还未添加个人简介

发布

暂无评论

创作场景

HarmonyOS 实战：自定义时间选择器

前言

实现效果

需求分析

技术实现

总结

IT小码哥

评论