#HDC2024 心得分享# HarmonyOS 鸿蒙时间格式化

HDC2024 心得分享 HarmonyOS 鸿蒙时间格式化

时间格式化有很多方式，本文将使用轻量级的dayjs实现时间格式化，废话不多说，直接看下边样例

HarmonyOS 鸿蒙时间格式化使用方法：

第一步、下载依赖

ohpm i dayjs

还有更多好用的第三方库，可以在这里面找 https://ohpm.openharmony.cn/#/cn/home

第二步、引用资源

import dayJs from 'dayjs’

第三步、使用

Text(<span class="javascript"><span class="javascript">${dayJs(</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.time).format(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'MM/DD hh:mm'</span></span></span><span class="javascript">)}</span></span>)
.fontSize(24)
.margin({ top: 46 })
Text(<span class="javascript"><span class="javascript">${dayJs(</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.time).format(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'YYYY/MM/DD'</span></span></span><span class="javascript">)}</span></span>)
.fontSize(24)
.margin({ top: 46 })
Text(<span class="javascript"><span class="javascript">${dayJs(</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.time).format(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'YYYY-MM-DD'</span></span></span><span class="javascript">)}</span></span>)
.fontSize(24)
.margin({ top: 46 })
Text(<span class="javascript"><span class="javascript">${dayJs(</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.time).format(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'YYYY-MM-DD hh:mm:ss'</span></span></span><span class="javascript">)}</span></span>)
.fontSize(24)
.margin({ top: 46 })

完整代码

import dayJs from ‘dayjs’

@Entry
@Component
@Preview
struct Index {
@State time: number = 1716168928000
@State nowTime: number = Date.now()


build() {
Column() {
Text(<span class="javascript"><span class="javascript">${dayJs(</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.time).format(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'MM/DD hh:mm'</span></span></span><span class="javascript">)}</span></span>)
.fontSize(24)
.margin({ top: 46 })
Text(<span class="javascript"><span class="javascript">${dayJs(</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.time).format(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'YYYY/MM/DD'</span></span></span><span class="javascript">)}</span></span>)
.fontSize(24)
.margin({ top: 46 })
Text(<span class="javascript"><span class="javascript">${dayJs(</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.time).format(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'YYYY-MM-DD'</span></span></span><span class="javascript">)}</span></span>)
.fontSize(24)
.margin({ top: 46 })
Text(<span class="javascript"><span class="javascript">${dayJs(</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.time).format(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'YYYY-MM-DD hh:mm:ss'</span></span></span><span class="javascript">)}</span></span>)
.fontSize(24)
.margin({ top: 46 })
Text(<span class="javascript"><span class="javascript">${dayJs(</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">this</span></span></span><span class="javascript">.nowTime).format(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'YYYY-MM-DD hh:mm:ss'</span></span></span><span class="javascript">)}</span></span>)
.fontSize(24)
.margin({ top: 46 })
}
.backgroundImageSize({ height: ‘100%’, width: ‘100%’ })
.height(‘100%’)
.width(‘100%’)
}
}

样例图

更多用法，还请看官方文档Day.js中文网 https://dayjs.fenxianglu.cn/