正文

在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理，对比Moment.js和day.js的处理

IP云
IP云V管理员/5 阅读
08/04
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js。简单地说，只要你会Moment.js，那么你就会Day.js!

但是我们知道的，Moment.js 的大小是200多KB,而Day.js的大小却是2 KB，瘦身很多但却几乎拥有同样强大的 API。

现在框架基本上都是多端应用的了，所以在ABP框架中整合Winform管理端、Vue&element的BS前端，以及公司动态网站用于发布产品和网站信息等都是常见的应用，有时候，我们还需要根据功能的需要，增加一些小程序的支持，这些对于Web API后端来说，都是很容易接入的应用处理。

而基于Vue + Element 的前端界面，前端功能模块包括用户管理、组织机构管理、角色管理、菜单管理、功能管理及权限分配，日志管理、字典管理、产品管理等管理功能，可实现用户的功能及数据权限进行控制管理。

公司动态门户网站，有时候用于我们发布网站信息和产品信息的一个门户网站，采用了Bootstrap-Vue界面组件，由于大多数门户网站都是基于Bootstrap栅格系统的，因此基于最新Bootstrap-Vue界面组件也就是最佳选择的了，而且可以重用很多Bootstrap的网站模板案例。这样也同时保持了前端模块同时也是基于Vue的，摒弃了以前基于JQuery的繁琐操作DOM处理。

由于现在微信小程序的广泛应用，有时候我们针对一些业务模块功能，可以根据需要推出一些小程序应用场景，这些对接我们的统一授权系统，以及统一的WebAPI调用机制即可满足。

而这些基于Vue的前端，采用类库对日期格式化，或者进行转换的需求场景很多，因此我们我们需要借助JS类库进行日期的处理，比较好的推荐使用day.js的处理。

1、day.js的安装和使用

安装day.js

npm install dayjs -s

然后在项目代码中引入即可：

import dayjs from "dayjs"; // 导入日期js
或者
var dayjs = require('dayjs')

import * as dayjs from 'dayjs'
import * as isLeapYear from 'dayjs/plugin/isLeapYear' // 导入插件
import 'dayjs/locale/zh-cn' // 导入本地化语言dayjs.extend(isLeapYear) // 使用插件
dayjs.locale('zh-cn') // 使用本地化语言

详细了解可以参考地址：https://dayjs.fenxianglu.cn/ 或者 https://dayjs.gitee.io/zh-CN/ 或者 https://github.com/iamkun/dayjs

Day.js 支持几十个国家语言，但除非手动加载，多国语言默认是不会被打包到工程里。但你可以随意在各个语言之间自由切换：

dayjs('2018-05-05').locale('zh-cn').format() // 在这个实例上使用简体中文

直接调用 dayjs() 将返回一个包含当前日期和时间的 Day.js 对象。

var now = dayjs()

可以对调用dayjs对格式进行处理或者转换。

dayjs("12-25-1995", "MM-DD-YYYY")
dayjs('2018 三月 15', 'YYYY MMMM DD', 'zh-cn')dayjs('1970-00-00', 'YYYY-MM-DD').isValid() // true
dayjs('1970-00-00', 'YYYY-MM-DD', true).isValid() // false
dayjs('1970-00-00', 'YYYY-MM-DD', 'es', true).isValid() // false

默认情况下，Day.js 只包含核心的代码，并没有安装任何插件.

您可以加载多个插件来满足您的需求，例如官方提供的插件就有：

  • AdvancedFormat 扩展了 dayjs().format API 以支持更多模版
  • RelativeTime 增加了 .from .to .fromNow .toNow 4个 API 来展示相对的时间 (e.g. 3 小时以前).
  • IsLeapYear 增加了 .isLeapYear API 返回一个 boolean 来展示一个 Dayjs's 的年份是不是闰年.
  • WeekOfYear 增加了 .week() API 返回一个 number 来表示 Dayjs 的日期是年中第几周.
  • IsSameOrAfter 增加了 .isSameOrAfter() API 返回一个 boolean 来展示一个时间是否和一个时间相同或在一个时间之后.
  • IsSameOrBefore 增加了 .isSameOrBefore() API 返回一个 boolean 来展示一个时间是否和一个时间相同或在一个时间之前.

Day.js 支持像这样的链式调用：

dayjs().add(7, 'day')
dayjs('2019-01-25').add(1, 'day').subtract(1, 'year').year(2009).toString()

Day.js 对象还有很多查询的方法。

Is Before表示 Day.js 对象是否在另一个提供的日期时间之前。

dayjs().isBefore(dayjs('2011-01-01')) // 默认毫秒

dayjs().isBefore('2011-01-01', 'year')

Is Same 检查一个 Dayjs 对象是否和另一个 Dayjs 对象时间相同。

Is After 表示 Day.js 对象是否在另一个提供的日期时间之后。

还有其他查询时间区间的函数，如下所示。

如下面一个应用代码函数:

/**
* 当前日期gantt状态
* row: object 当前行信息
* date: string 当前格子日期
* unit: string 时间单位，以天、月、年计算
*/
dayGanttType(row, date, unit = "days") {
let start_date = row.startTime;
let end_date = row.endTime;
let between = dayjs(date).isBetween(start_date, end_date, unit);
if (between) {
return "item-on";
}
let start = dayjs(start_date).isSame(date, unit);
let end = dayjs(end_date).isSame(date, unit);
if (start && end) {
return "item-on item-full";
}
if (start) {
return "item-on item-start";
}
if (end) {
return "item-on item-end";
}
},

2、Moment.js的安装和使用

Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。 moment.js作为日期处理工具，虽然它和day.js对比显得有点笨重，不过依旧很多项目在广泛的使用者。

npm的安装如下处理。

npm install moment --save

实例代码

var now = moment(); //取当前时间
now.format('YYYY-MM-DD'); //格式化输出
var day = moment("9/12/2010 19:05:25", "MM/DD/YYYY HHss"); //字符串转换成时间格式

详细的官方提供案例如下所示。

日期格式化

moment().format('MMMM Do YYYY, h:mm:ss a'); // 三月 14日 2022, 3:23:46 下午
moment().format('dddd'); // 星期一
moment().format("MMM Do YY"); // 3月 14日 22
moment().format('YYYY [escaped] YYYY'); // 2022 escaped 2022
moment().format(); // 2022-03-14T15:23:46+08:00

相对时间

moment("20111031", "YYYYMMDD").fromNow(); // 10 年前
moment("20120620", "YYYYMMDD").fromNow(); // 10 年前
moment().startOf('day').fromNow(); // 15 小时前
moment().endOf('day').fromNow(); // 9 小时内
moment().startOf('hour').fromNow(); // 24 分钟前

日历时间

moment().subtract(10, 'days').calendar(); // 2022/03/04
moment().subtract(6, 'days').calendar(); // 上星期二15:23
moment().subtract(3, 'days').calendar(); // 上星期五15:23
moment().subtract(1, 'days').calendar(); // 昨天15:23
moment().calendar(); // 今天15:23
moment().add(1, 'days').calendar(); // 明天15:23
moment().add(3, 'days').calendar(); // 下星期四15:23
moment().add(10, 'days').calendar(); // 2022/03/24

多语言支持

moment.locale(); // zh-cn
moment().format('LT'); // 15:23
moment().format('LTS'); // 15:23:46
moment().format('L'); // 2022/03/14
moment().format('l'); // 2022/3/14
moment().format('LL'); // 2022年3月14日
moment().format('ll'); // 2022年3月14日
moment().format('LLL'); // 2022年3月14日下午3点23分
moment().format('lll'); // 2022年3月14日 15:23
moment().format('LLLL'); // 2022年3月14日星期一下午3点23分
moment().format('llll'); // 2022年3月14日星期一 15:23

虽然moment 的功能强大但是体积也最大，moment.min.js 的体积为51K，dayjs.min.js 体积为7K，dayjs 和 moment 的接口几乎完全一致，相互切换的学习成本极低，如果新项目使用，可以优先考虑dayjs。dayjs的API和moment几乎一模一样，所以如果想要替换到现有的momentjs代码，直接替换为dayjs即可，调用语句绝大部分情况下可以一字不改。

在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理，对比Moment.js和day.js的处理的更多相关文章

  1. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  2. 在基于ABP框架的前端项目Vue&amp&semi;Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  3. 使用代码生成工具快速生成基于ABP框架的Vue&plus;Element的前端界面

    世界上唯一不变的东西就是变化,我们通过总结变化的规律,以规律来应付变化,一切事情处理起来事半功倍.我们在开发后端服务代码,前端界面代码的时候,界面都是依照一定的规律进行变化的,我们通过抽取数据库信息, ...

  4. 循序渐进VUE&plus;Element 前端应用开发&lpar;12）--- 整合ABP框架的前端登录处理

    VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...

  5. 基于abp框架的数据库种子数据初始化

    目录 基于abp框架的数据库种子数据初始化 1.背景 2.参照 3.解决方案 3.1 初始化数据 3.2 依赖注入方法容器里获取数据库上下文 3.3 封装创建初始化数据列表方法 3.4 数据库中没有的 ...

  6. 利用代码生成工具生成基于ABP框架的代码

    在前面随笔,我介绍了整个ABP优化过框架的分层模型,包括尽量简化整个ABP框架的各个层的关系,以及纳入一些基类的辅助处理,使得我们对应业务分层类或者接口尽可能减少代码,并具有生产环境所需要的基类接口, ...

  7. 新书上线：《Spring Boot&plus;Spring Cloud&plus;Vue&plus;Element项目实战：手把手教你开发权限管理系统》，欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  8. Vue&amp&semi;Element开发框架中增加工作流处理，查看申请单中整合多个处理类型的处理

    关于我在Winform框架.混合框架.Bootstrap开发框架中的简易审批性工作流模块,我写过不少文章,有兴趣可以参考<工作流模块>的随笔进行了解,本篇随笔在完成了Vue&Ele ...

  9. Vue&amp&semi;Element开发框架中增加工作流处理，工作流的各个管理页面的界面处理

    我在起前面的几篇随笔中,大概介绍了工作流的一些场景化处理,包括如何把具体业务表单组件化,并在查看和编辑界面中,动态加载组件内容,以及对于查看申请单的主页面,把审批.取消.发起会签.会签.批示分阅.阅办 ...

随机推荐

  1. iptables实现负载均衡

    例子: iptables -t nat -A PREROUTING -d 10.192.0.65/32 -p tcp -m tcp --dport 8080 -m statistic --mode n ...

  2. Android&colon; Dragging Popup Window 可移动浮动View

    final View cv = new View(this); setContentView(cv); TextView tv = new TextView(this); tv.setBackgrou ...

  3. ios 字符串替换方法

    string=[string stringByReplacingOccurrencesOfString:@"-"withString:@"/"];

  4. kafka-manager安装

    代码地址: https://github.com/yahoo/kafka-manager 注意只能使用 Java 7!Java 6 编译不通过,Java 8 在运行的时候会报错:java.lang.U ...

  5. 转让malloc&lpar;&rpar;该功能后，发生了什么事内核？附malloc&lpar;&rpar;和free&lpar;&rpar;实现源

    特此声明:在本文中,引用另一篇文章和帖子,结合的概括的理解malloc()函数的实现机制. 我们常常会在C程序中调用malloc()函数动态分配一块连续的内存空间并使用它们.那么,这些用户空间发生的事 ...

  6. 关于SQLServer数据库中字段值为NULL&comma;取出来该字段放在DataTable中，判断datatable中该字段值是否为NULL的三种方法

    1. DataTable dt;                               //假设字段为name, dt已经保存了数据dt.rows[0]["name"] == ...

  7. &lbrack;Spark&rsqb;如何设置使得spark程序不输出 INFO级别的内容

    Spark程序在运行的时候,总是输出很多INFO级别内容 查看了网上的一些文章,进行了试验. 发现在 /etc/spark/conf 目录下,有一个 log4j.properties.template ...

  8. 前端 javascript

    ---恢复内容开始--- JavaScript  JavaScript:是一门编译型的语言,比python语言还要弱类型的语言 JavaScript 分为三个部分:Ecmascript.dom.bom ...

  9. hdu1081 DP类最大子段和（二维压缩&plus;前缀和数组&sol;树状数组计数）

    题意:给出一个 n * n 的数字矩阵,问最大子矩阵和是多少. 由于和最长子段和问题类似,一开始想到的就是 DP ,一开始我准备用两个循环进行 DP ,对于每一个 (i,j) ,考察(i - 1,j) ...

  10. 爬虫开发12&period;selenium在scrapy中的应用

    selenium在scrapy中的应用阅读量: 370 1 引入 在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生,如果直接使用scrapy对其url发请求,是绝 ...