零、前情提要

  上个月开发了数据平台,用的框架是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. gorm框架表名自动加s问题

    查看日志会发现表名自动加了s 在model实现以下方法即可解决 type UsUser struct { ID int64 `gorm:"column:id" db:"c ...

  2. 我個人喜歡的一些Ubuntu的相關配置

    1.vim vim安裝: sudo apt-get install vim-gtk vim美化:刚安装的VIM,可能界面并不是十分友好,我们可以更改vim的配置文件,按照我们的需求去修改它.在命令行下 ...

  3. [loj539]旅游路线

    考虑枚举加油的位置,当确定某次在第$i$个位置加油后,且下一次到$j$加油,那么$i$到$j$必然会选择不超过$c_{i}$条边且最长的路径,记作$d_{i,j}$ 如果能求出$d_{i,j}$,再设 ...

  4. [atARC085F]NRE

    令$(S_{a},S_{b})$表示$a_{i}\in S_{a}$且$b_{i}\in S_{b}$的i个数,那么答案相当于$S(0,1)+S(1,0)=S(0,1)+S(\{0,1\},0)-S( ...

  5. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

  6. js offset系列属性

    offsetParent:返回该元素有定位的父级,如果父级都没有定位则返回body offsetTop:返回元素相对父级(带有定位的父级)上方的偏移 offsetLeft:返回元素相对父级(带有定位的 ...

  7. CF1418G Three Occurrences

    统计满足某些性质的区间个数. 我们考虑移动 \(r\) 指针. 然后考虑把不能选的区间 \(ban\)掉. 具体看下细节吧. #include<iostream> #include< ...

  8. [NOI2020] 超现实树

    我们定义链树为:在该树上的任意节点,左右子树大小的最小值小于2. 举个例子: 那么我们思考,链树显然可以在叶子节点任意替换成其他子树. 那么在主链上,我们可以做到生成任意深度大于主链长度的树. 反过来 ...

  9. Atcoder Grand Contest 022 E - Median Replace(dp)

    Atcoder 题面传送门 & 洛谷题面传送门 首先考虑对于固定的 01 串怎样计算它是否可以通过将三个连续的 \(0\) 或 \(1\) 替换为其中位数得到.我们考虑单调栈,新建一个栈,栈底 ...

  10. NOIP2021 游记

    不要挂分不要挂分不要挂分不要挂分不要挂分不要挂分不要挂分不要挂分不要挂分不要挂分不要挂分不要挂分不要挂分不要挂分不要挂分不要挂分释迦牟尼脚绽莲花菩提达摩你真伟大天上天下唯我独尊如来佛祖太上老君耶稣耶稣 ...