零、前情提要

  上个月开发了数据平台,用的框架是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. Java 多线程 - 总结概述

    概述 菜鸟教程: Java 给多线程编程提供了内置的支持. 一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务. 多线程是多任务的一种特别的形式,但多线程 ...

  2. 利用Fastjson注入Spring内存马

    此篇文章在于记录自己对spring内存马的实验研究 一.环境搭建 搭建漏洞环境,利用fastjson反序列化,通过JNDI下载恶意的class文件,触发恶意类的构造函数中代码,注入controller ...

  3. [atAGC050A]AtCoder Jumper

    考虑二叉树的结构,但并不容易构造从叶子返回的边 (以下为了方便,将所有点编号为$[0,n)$) 对于$i$,选择$2i\ mod\ n$和$(2i+1)\ mod\ n$这两条出边 从二叉树的角度并不 ...

  4. [atARC109F]1D Kingdom Builder

    考虑最终有石子的位置的状态,判断一种状态是否可行 反过来,依次删除石子,删除条件是:当删除的石子是该段最后一个(即其两边都没有石子了),要求除其以外,每个连续段旁边的两个点都与其颜色不同 构造一种删除 ...

  5. Java遍历map的五种方式

    使用For-Each迭代entries 这是最常见的方法,并在大多数情况下更可取的.当你在循环中需要使用Map的键和值时,就可以使用这个方法 Map<Integer, Integer> m ...

  6. Sentry 监控 - Snuba 数据中台架构(SnQL 查询语言简介)

    本文描述了 Snuba 查询语言 (SnQL). 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒 ...

  7. Codeforces 772D - Varying Kibibits(高维差分+二项式定理维护 k 次方和)

    Codeforces 题目传送门 & 洛谷题目传送门 首先很容易注意到一件事,那就是对于所有 \(f(S)\) 可能成为 \(x\) 的集合 \(S\),必定有 \(\forall y\in ...

  8. 你不知道的iostat

    1.       作用 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况 ...

  9. java 按内容拆分文件

    文件内容为: BC************* **************** *************** BC************* **************** *********** ...

  10. Hosts文件详解

    一.缘由 关于我们工作室项目配置过程中,有一个重要但却容易被忽略的环节 - hosts文件的修改. 之前配置hosts文件的时候,只知道那么做就可以了,但并不知道其中的原因,由于开发任务的急迫,也就未 ...