背景在项目中经常会使用要时间的格式转换,比如数据库返回一个Date数据,你需要转成2024-10-2的格式,鸿蒙的原生SDK中是没有办法实现的,因此,在这里介绍第三方封装好并且成熟使用的库Dayjs。 安装切换到Entry文件夹下安装dayjs库。cd . \entry\ohpm install dayjs查看oh-package.json5 文件,可以查看是否安装成功dayjs使用格式化基本格式化使用let time: Date = new Date() let time: Date = new Date(); this.message = dayjs(time).format("YYYY年MM月DD日");占位符格式化 支持以上的占位符 let time: Date = new Date(); this.message = dayjs(time).format("YYYY-MM-DD
除了 dayjs 之外,还有许多优秀的日期时间处理库,适用于不同场景和需求,以下是一些常用的选择:Moment.jsconst moment = require('moment');console.log
对于这种情况,我一般喜欢自己封装时间处理方法,但在发现有这么一个2K左右,出现不久瞬间飙涨到过千star的日期时间js库dayjs后,觉得值得去看看会不会对上眼。 按Github上说明,dayjs有如下特性: . ? Familiar Moment.js API & patterns . ? Immutable . ? Chainable . ? All browsers support 调用方式有: Via NPM: npm install dayjs --save var dayjs = require('dayjs'); dayjs().format(); Via CDN: <! <script> dayjs().format(); </script> 然后再从这么一段代码体验下其强大功能: dayjs().endOf('month').add(1, 'day
Dayjs介绍dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 Dayjs文档最早找到的一个算是中文的dayjs中文官网https://dayjs.uihtm.com使用场景Day.js 适用于各种需要处理日期和时间的场景,例如:在 Web 应用中显示和格式化日期处理用户输入的日期计算倒计时或时间间隔在日历应用中管理事件日期在数据可视化中处理时间序列数据安装 文件中引入 Day.js:<script src="https://unpkg.com/<em>dayjs</em>"></script>如何使用 Day.js基本用法首先,引入 Day.js:import dayjs from 'dayjs';然后,你可以使用 Day.js 来解析和格式化日期:const now = dayjs();console.log(now.format('YYYY-MM-DD')); // ';import relativeTime from 'dayjs/plugin/relativeTime';import 'dayjs/locale/zh-cn'; // 引入中文本地化dayjs.extend
安装 day.js npm 安装 npm install dayjs --save 使用 // 引入 dayjs import dayjs from 'dayjs' // 输出当前时间 console.log (dayjs()) </script> 格式化日期格式 前面我们使用 dayjs() 获取到当前的时间,但返回的格式不好看。 0 dayjs().format('h') // 返回小时 1-12 dayjs().format('hh') // 返回小时 01-12,1-9小时前面会补0 // 分钟 dayjs().format 规则:使用中文的“年”、“月”、“日”单位 */ dayjs().format('YYYY年MM月DD日') dayjs() 还接受传入时间参数,然后再使用 format() 进行格式化 dayjs(' 注意:月份从0开始,0表示1月,1表示2月... dayjs().month() // 设置月份 dayjs().month(10) // 设置完月份后格式化 dayjs().month(10).format
二、基本使用 1、安装 pnpm add dayjs 2、基本使用 https://dayjs.fenxianglu.cn/category/#typescript import dayjs from ("=====>", dayjs().year()); // =====> 2021 8、获取月份 import dayjs from "dayjs"; console.log("=====>", dayjs dayjs().valueOf()); // =====> 1632290171000 14、Dayjs 复制 import dayjs from "dayjs"; const dayjs1 = dayjs (); const dayjs2 = dayjs1.clone(); console.log("=====>", dayjs1 === dayjs2); // =====> false 是两个独立的 Day.js 对象 15、dayjs 对象设置年份 import dayjs from "dayjs"; console.log("=====>", dayjs().set("year", 2018).format
npm i dayjs 使用以下代码将 Day.js 作为 Node.js 项目的依赖项: const dayjs = require("dayjs"); 使用Babel或ES6: import Dayjs dayjs.extend(window.dayjs_plugin_relativeTime); var a = dayjs("2022-01-01"); console.log(dayjs("2020- dayjs.extend(window.dayjs_plugin_relativeTime); var a = dayjs("2022-01-01"); console.log(dayjs("2020- (window.dayjs_plugin_utc) dayjs.extend(window.dayjs_plugin_timezone); <script> 事例: dayjs.tz("2020 > 估计用户时区 dayjs.extend(window.dayjs_plugin_utc) dayjs.extend(window.dayjs_plugin_timezone); dayjs.tz.guess
-- 组件库依赖的脚本程序 --><script src="lib/<em>dayjs</em>@1.11.10/<em>dayjs</em>.min.js"></script><script src="lib/<em>dayjs</em>@1.11.10 define(['exports', 'san', '<em>dayjs</em>', '<em>dayjs</em>/plugin/utc', '<em>dayjs</em>/plugin/localeData', '<em>dayjs</em>/plugin/customParseFormat ', '<em>dayjs</em>/plugin/weekOfYear', '<em>dayjs</em>/plugin/weekYear', '<em>dayjs</em>/plugin/advancedFormat'], factory)上面是 Santd <em>dayjs</em>['default'] : <em>dayjs</em>;// 问题:对齐导出组件的名称,<em>dayjs</em> 没啥问题,主要是它组件加载出问题了utc = utc && Object.prototype.hasOwnProperty.call 想要让这个程序顺利的执行,我们只需要做一些字符串替换就够了:var <em>dayjs</em>__default = <em>dayjs</em>;<em>dayjs</em>.extend(window.<em>dayjs</em>_plugin_utc);<em>dayjs</em>.extend
你可以通过 npm 或 yarn 将其添加到你的项目中: npm install dayjs // 或 yarn add dayjs 导入 Day.js: import dayjs from 'dayjs '; 解析日期,格式化日期,操作日期: const date = dayjs('2021-09-01'); const formattedDate = dayjs('2021-09-01').format ().startOf('day'); // 今天的开始 const isBeforeToday = dayjs(inputDate).isBefore(today); console.log('Is the 如果想使用 UTC 时间,您可以调用 dayjs.utc() 而不是 dayjs()。 在 UTC 模式下,所有显示方法将会显示 UTC 时间而非本地时间。 // 默认是当地时间 dayjs().format() //2019-03-06T08:00:00+08:00 // UTC 时间 dayjs.utc().format() // 2019-03-06T00
推荐使用 dayjs 库(轻量级,API 友好)。 基本格式化函数 import dayjs from 'dayjs'; const formatDateTime = (timeStr) => { if (! timeStr) return '-'; // 空值返回占位符 return dayjs(timeStr).format('YYYY-MM-DD HH:mm:ss'); }; 说明: dayjs(timeStr 如果需要强制转换为特定时区(如 UTC),可以使用插件: npm install dayjs utc plugin import utc from 'dayjs/plugin/utc'; import timezone from 'dayjs/plugin/timezone'; dayjs.extend(utc); dayjs.extend(timezone); // 转换为北京时间 const
a-button>
Github 一个简单的用法示例: dayjs().startOf('month').add(1, 'day').set('year', 2018).format('YYYY-MM-DD HH:mm: 两位数 SSS 000-999 秒 三位数 Z +5:00 UTC 的偏移量 ZZ +0500 UTC 的偏移量,数字前面加上 0 A AM PM a am pm 这里是一些常用的参数 当我们引用了dayjs 之后,会有一个内置对象dayjs,直接使用即可。 /js/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/<em>dayjs</em>/1.11.0/<em>dayjs</em>.min.js">< mm:ss") } }, methods:{ getRealTime(){ return dayjs
import dayjs from "dayjs"; dayjs(new Date(2021, 10, 1)).diff(new Date(2021, 9, 17), "day"); 稍微看看语法 import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; dayjs.extend(relativeTime ); dayjs("2022-09-16 13:28:55").fromNow(); Moment.js Moment.js官网 是的,我最后还是喜欢选择Moment.js,语法写起来也顺手,虽然占用资源较大
时区展示固定时区展示固定时区适用于所有用户都需要查看相同时区的时间,以后端返回时间戳为例:const dayjs = require("dayjs");const utc = require("dayjs /plugin/utc");const timezone = require("dayjs/plugin/timezone");dayjs.extend(utc);dayjs.extend(timezone = require("dayjs");const utc = require("dayjs/plugin/utc");const timezone = require("dayjs/plugin/timezone = require("dayjs");const utc = require("dayjs/plugin/utc");const timezone = require("dayjs/plugin/timezone = require("dayjs/plugin/utc");const timezone = require("dayjs/plugin/timezone");dayjs.extend(utc);dayjs.extend
:string | number | Date | Dayjs):构造一个 dayjs 实例对象 克隆 clone() | dayjs(original: Dayjs):在已有 dayjs 实例对象的基础上克隆返回一个新的 ,dayjs也同样有。 函数,用于返回新的 Dayjs 实例对象的函数(工厂模式) var dayjs = (date, c) => { // 若date 为 Dayjs 的实例对象,则返回克隆的 Dayjs 实例对象( (cfg) } // Dayjs构造函数 var Dayjs = /*#__PURE__*/function () { function Dayjs(cfg) { this. return Dayjs; }(); 参数 c 其实是当 date 参数为 Dayjs 实例对象时,最后又会调用 dayjs() 函数,此时才会传入参数 c。
-- 组件库依赖的脚本程序 --> <script src="lib/<em>dayjs</em>@1.11.10/<em>dayjs</em>.min.js"></script> <script src="lib/<em>dayjs</em>@1.11.10 define(['exports', 'san', '<em>dayjs</em>', '<em>dayjs</em>/plugin/utc', '<em>dayjs</em>/plugin/localeData', '<em>dayjs</em>/plugin/customParseFormat ', '<em>dayjs</em>/plugin/weekOfYear', '<em>dayjs</em>/plugin/weekYear', '<em>dayjs</em>/plugin/advancedFormat'], factory) 上面是 Santd 中对 <em>dayjs</em> 的依赖引用,不过 <em>dayjs</em> 默认没有像 San 生态一样,推出符合 AMD 模块的浏览器可直接使用的程序格式。 想要让这个程序顺利的执行,我们只需要做一些字符串替换就够了: var <em>dayjs</em>__default = <em>dayjs</em>; <em>dayjs</em>.extend(window.<em>dayjs</em>_plugin_utc); <em>dayjs</em>.extend
使用Dayjs 此处需要用到第三方库dayjs 。熟悉momentjs的同学都应该知道,dayjs可以完美替代momentjs。优点官方有详细说明,可以在官网查看。 import dayjs from "dayjs"; import rt from "dayjs/plugin/relativeTime"; // 引入相对时间插件 import "dayjs/locale isNaN(time)) { time = parseInt(time) } return dayjs().locale("zh-cn").to(dayjs(val)); // 此处为核心使用方法 } 从上述例子可以看到,核心在于引入dayjs的「相对时间插件」和「汉化包」。 总结 本文简单的介绍了如何在页面中展示相对时间,主要是使用了dayjs 。总的来说还是非常简单的,小伙伴们赶紧使用起来。
为了验证第三方依赖问题,我特意加了一个date-utils.ts,这是一个基于dayjs的日期函数集合。 针对 ESM / CJS 情况,最好将第三方依赖作为 external 处理,因为除了我的函数库会依赖dayjs,项目中也可能会依赖dayjs,在构建工具的帮助下,能在 Dependency Graph ) external: Object.keys(pkgJson.dependencies), }) 重新打包会发现报了一个错, 'dayjs' is imported by packages/ /dayjs.min.js, imported by packages/utils/src/date-utils.ts 其实这是因为 dayjs 的 package.json 中只给出了main入口, 我当时还给 dayjs 提了一个PR[4]说明了这个问题,希望增加module入口优化这个问题,不过 dayjs 团队似乎不太在意这个问题,关闭了这个 PR,建议我改用 v2 alpha 版本,实际上
cnpm init yarn init 结果都是添加了一个package.json文件 安装包 步骤:在三个文件夹里分别用三种命令安装包,然后在不同文件夹换命令安装,查看文件变化情况 npm i dayjs 较其他两种方式速度慢些 自动生成了package-lock.json node_modules中只有一个dayjs包 dependencies依赖里有dayjs yarn add moment 安装成功,package-lock.json中没有moment版本锁 cnpm i dayjs 没有生成lock文件 node_modules里有两个包(不重要) dayjs没有加入到dependencies 中,使用cnpm i dayjs -S才能加进去 yarn add dayjs 生成了yarn.lock文件 node_modules里有dayjs包和.yarn-integrity文件(感觉是存储依赖版本的 hash值,yarn check --integrity可能会用到) dependencies依赖里有dayjs npm i moment 安装成功,yarn.lock中没有moment版本锁 删除包
('YYYY-MM-DD') // → 2025-02-28 4.2 工作日计算 // 导入dayjs及其插件 const dayjs = require('dayjs'); const isSameOrBefore 扩展dayjs功能 dayjs.extend(isSameOrBefore); dayjs.extend(weekOfYear); /** * 计算两个日期之间的工作日数量(排除周六和周日) * 及其插件 const dayjs = require('dayjs'); const quarterOfYear = require('dayjs/plugin/quarterOfYear'); dayjs.extend dayjs().endOf('quarter').format('YYYY-MM-DD'); // → 2025-09-30 4.4 设置为当月第一天 const dayjs = require('dayjs 4.5 设置为当周第一天(周一) // 导入dayjs及其插件 const dayjs = require('dayjs'); const weekOfYear = require('dayjs/plugin