前言

最近在日常鴻蒙開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)使用一些時(shí)間選擇器，鴻蒙官方提供的時(shí)間選擇器滿足不了需求，所以自己動(dòng)手自定義一些經(jīng)常會(huì)使用到的時(shí)間選擇器，希望能幫到你，建議點(diǎn)贊收藏！

實(shí)現(xiàn)效果

需求分析

1. 默認(rèn)選中日期為當(dāng)前時(shí)間。
2. 支持精確到時(shí)分。
3. 注意閏年的計(jì)算。

技術(shù)實(shí)現(xiàn)

1. 首先要想實(shí)現(xiàn)時(shí)間選擇器，需要使用一個(gè)上下可以滾動(dòng)的控件，這里使用鴻蒙官方提供的 TextPicker,TextPicker 控件支持內(nèi)容的上下滾動(dòng)，可以用來(lái)顯示年月日的選擇器，確定了控件后，先計(jì)算日期。

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
    })

由于計(jì)算日期是比較耗時(shí)的操作，這里使用 Pormise 處理日期的計(jì)算，特別需要注意閏年的日期計(jì)算，這里以 1 年為周期。

2. 根據(jù)計(jì)算得到的日期數(shù)據(jù)集合，使用 TextPicker 顯示年月日，同時(shí)默認(rèn)選中當(dāng)前時(shí)間 choseDay。

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

3. 計(jì)算時(shí)分?jǐn)?shù)據(jù)。

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?"時(shí)":""))
    }

4. 分別使用 TextPicker 顯示時(shí)分。

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)
        })

5. 要讓時(shí)間選擇器默認(rèn)選擇當(dāng)前時(shí)間時(shí)，需要注意選擇器的格式為"2012-01-01",需要在計(jì)算時(shí)不足 10 時(shí)補(bǔ) 0。否則時(shí)間選擇器不會(huì)默認(rèn)選中當(dāng)前時(shí)間。
6. 鴻蒙官方的 Date 類(lèi)默認(rèn)提供的月份是從 0 開(kāi)始的，也就是說(shuō)通過(guò) data.getUTCMoth()獲取的月份默認(rèn)范圍為 [0,11],而選擇器需要顯示的是 [1,12],這里需要手動(dòng)處理。

總結(jié)

自定義時(shí)間選擇器看似簡(jiǎn)單，其實(shí)需要注意的地方不少，時(shí)間的計(jì)算，時(shí)間的顯示格式，默認(rèn)選中當(dāng)前時(shí)間等。都需要開(kāi)發(fā)者在日常開(kāi)發(fā)中注意計(jì)算細(xì)節(jié)?？吹竭@里相信你已經(jīng)學(xué)會(huì)了怎么自定義一個(gè)時(shí)間選擇器了，快去動(dòng)手試試吧！

審核編輯 黃宇