零、前情提要

  上个月开发了数据平台,用的框架是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. 大爽Python入门教程 1-5 答案

    大爽Python入门公开课教案 点击查看教程总目录 1 方向变换 >>> 51//4 12 >>> 51%4 3 答: 向左转51次之后, 小明面朝东方, 转过了1 ...

  2. java 获得 微信 UserId

    .... public String cs() throws Exception{ /*访问页面,服务器会得到 code(request.getParameter("code")) ...

  3. Json数据使用及学习方法

    以前对json的了解并不是很清楚,因为使用很少,所以也没有特意的研究.只知道json是轻量级的数据交换格式,可以被多种语言方便的处理,也是大型门户站接口使用的主要数据格式. 而最近做了个项目,涉及到j ...

  4. OpenShift 本地开发环境配置(基于 Minishift)

    本文要做什么? 很多为了验证应用在 OpenShift 平台的行为是否正常,或者组成一个简单的开发环境,直接搭建一个 OpenShift/Origin 环境可能太重了,而且运行在本机可能占用内存也太多 ...

  5. [hdu7042]二叉树

    考虑最后这棵二叉树的结构,不难发现被移动的点在原树或新树中构成的都是若干棵完整的子树 (若$x$被移动,则$x$在原树或新树的子树中所有点都会被移动) 先在原树中考虑此问题,对于每一棵由被移动的点所构 ...

  6. 洛谷 P7520 - [省选联考 2021 A 卷] 支配(支配树)

    洛谷题面传送门 真·支配树不 sb 的题. 首先题面已经疯狂暗示咱们建出支配树对吧,那咱就老老实实建呗.由于这题数据范围允许 \(n^2\)​ 算法通过,因此可以考虑 \(\mathcal O(n^2 ...

  7. P4497 [WC2011]拼点游戏

    P4497 [WC2011]拼点游戏 在我的 cnblogs 中查看 数据结构大杂烩 + 阿巴细节题. 调了三个小时. 首先考虑第一小问的答案. 注意到点数的计算方式是先负后正的形式,不妨看做选出 \ ...

  8. DirectX12 3D 游戏开发与实战第七章内容(上)

    利用Direct3D绘制几何体(续) 学习目标 学会一种无须每帧都要刷新命令队列的渲染流程,以此来优化性能 了解另外两种根签名参数类型:根常量和根描述符 探索如何在程序中生成和绘制常见的几何体:如栅格 ...

  9. MISA(在线)注释叶绿体基因组SSR

    SSR (Simple Sequence Repeat),即简单重复序列,是一种以PCR技术为核心的DNA分子标记技术,也称为微卫星序列或者串联重复. 简单重复顾名思义就是以很短的序列为一个单元,比如 ...

  10. dlang 字符串char[] 和string

    各个情况下数据类型异同 1 import std.stdio; 2 import std.string; 3 4 void main(){ 5 6 auto a="auto_a"; ...