零、前情提要

  上个月开发了数据平台,用的框架是vue + Ant Design of Vue,其中用了组件[range-picker]日期选择框,涉及到时间方法就去看了momentJS,以此记录~

  如有写的不好地方,请多多指教~(●'◡'●)

一、导入使用

    import moment from 'moment';

    import 'moment/locale/zh-cn';

    moment.locale('zh-cn'); // 语言:中文,默认en-US

  文档:http://momentjs.cn/

  antdv已全局化配置    Vue.user(ConfigProvider);

二、使用方法

// 获取昨天的日期,format格式化,n=1,指定单位‘days=天’
moment().subtract(1, 'days').format('YYYY-MM-DD');

// 当前日期往后加n天,n=30
moment().add(30, "days").format('YYYY-MM-DD HH:mm:ss')

moment(Array|String|Object|Number|Number[], format); // 获取当前日期和时间,带格式

const appointDays=moment('2021-07-25');
const todays=moment(); // 今天(结束时间)
todays.diff(appointDays, 'days'); // 计算时间差

Moment([2021,7,25]); //
moment().endOf('day'); // 到今天之前
moment().startOf('day'); // 今天之后

moment("时间戳").add(30, "days"); // 传入日期往后+n

moment().days(Number|String); // 获取或设置星期几。

moment().format(X); // X时间戳,x时间戳毫秒

  **subtract(减去)

  注意:moment 是可变的。 调用任何一种操作方法都会改变原始的 moment。

常用格式:
'YYYY-MM-DD',
'MM-DD',
'YYYY-MM-DD HH:mm:ss'
指定时间单位:
['days','hour','years',minute]

三、应用代码示例

  1、获取昨天日期

  

  2、日期区间选择,限制今天及以后不可点击

  

  3、获取日期区间(默认7天)

  

  返回的是一组对象,所以result数组分开赋值了。

  

  4、计算时间差,做日期区间数据改造

  

  根据result数据改造,部分代码截图如下:

  

Moment.js使用笔记的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  3. js读书笔记

    js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...

  4. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  7. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

  8. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  9. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  10. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

随机推荐

  1. 我罗斯方块第二次作业(Player类)

    我罗斯方块第二次作业 我的任务 完成player类的编写 player类的测试 我的计划 类的设计: Player类作为一个玩家类,需要处理和玩家有关的所有信息,以及维护玩家的游戏页面map.关于玩家 ...

  2. 大爽Python入门教程 总目录

    作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 大爽Python入门公开课教案 本篇博客为公开课教案目录,正文内容在目录章节链接的博客里 除目录本身外,没有链接的章节, ...

  3. 本机不安装Oracle客户端,使用instantclient_11_2和PLSQL Developer连接Oracle远程数据库步骤

     前言:由于Orcale客户端,占用空间太大,我们选择安装installclient\PLSQL客户端对orcale进行数据库连接. 安装要求.installClient要与PLSQL的安装位数一致, ...

  4. [hdu7022]Jsljgame

    先考虑$x=y$的情况,此时即是一个平等博弈,因此考虑$sg$函数 具体的,有$sg(n)=\begin{cases}0&(n=0)\\mex(\{sg(n-i)\mid 1\le i\le ...

  5. [nowcoder5667H]Happy Triangle

    可以发现合法的答案有两种可能: 1.询问的$x$即为最大值(或之一),那么只需要找到x前两个数并判断即可 2.询问的$x$不是最大值,那么就要保证另外两边之差小于$x$,维护后缀中$的前驱k-k的前驱 ...

  6. 手动实现一个vue cli

    目录 手动实现一个vue cli 1. 思考准备 2. 我们组织源码将会放在名为src的目录,webpack 打包需要一个入口文件,我们取作 main.js 3. 先预想以下会用到哪些基本依赖,第一个 ...

  7. 解决springboot启动日志异常问题

    问题描述:springboot启动异常,启动后没有日志打印. 问题原因:slf4j日志实现重复,找不到对应实现类. 问题应对: 1. 是不是项目没起来---->打印的日志数据,到这里就不打印了, ...

  8. ElasticJob分布式任务调度应用v2.5.2

    为何要使用分布式任务调度 **本人博客网站 **IT小神 www.itxiaoshen.com 演示项目源码地址** https://gitee.com/yongzhebuju/spring-task ...

  9. Atcoder Grand Contest 021 F - Trinity(dp+NTT)

    Atcoder 题面传送门 & 洛谷题面传送门 首先我们考虑设 \(dp_{i,j}\) 表示对于一个 \(i\times j\) 的网格,其每行都至少有一个黑格的合法的三元组 \((A,B, ...

  10. 关于单倍型和Phasing

    单倍型,即单倍体基因型,概念很好理解. 单倍型分型的过程就称之Phasing,定相或基因分型. Phasing的意义,在人类疾病遗传和动植物群体遗传中非常重要.也是imputation的必经过程. v ...