moment:JavaScript 日期处理类库,主要用于处理日期、时间,可以进行所需要的日期格式化,也可以按所需获取相应的时间。

此次我们来简单介绍下在vue项目使用moment,以及一些常规操作。

安装依赖:

npm install moment --save

引入(可以直接main.js引入,也可以考虑新建个插件的文件夹,然后写到一个moment.js文件中):

import Vue from 'vue';
import moment from 'moment';
import 'moment/locale/zh-cn'; // 获取中国标准时间,避免出现utc时间

如果全局基本格式化都是完整日期格式,可以考虑写个vue过滤器:
根据传入的时间默认格式化参数为YYYY-MM-DD HH:mm:ss的格式,如果日期参数本身有问题,作出校验按 ’ - - ’ 处理

Vue.filter('dateFormat', function filter(dateStr, pattern = 'YYYY-MM-DD HH:mm:ss') {return dateStr ? moment(dateStr).format(pattern) : '- -';
});

常用的格式化操作可以参考官网,我就不cv官网了(手动滑稽)
附上官网地址:moment.js官网

这里说下比较有争议的点,举个例子,我们有个日期选项卡(分别是日、周、月、季、半年、年),起初做的是按近期时间计算的,如近一天、近一周,但是后期又改为自然日、自然周。
所以如何获取自然时间和近期时间就是我们需要考虑的问题。
格式化操作如下:

  • 自然时间(分为起始时间和结束时间构成的时间段,结束时间是当前的时间):

    • 自然日:
    moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') // 起始时间(当前的00:00:00点)
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    
    • 自然周:
    moment().startOf('week').format('YYYY-MM-DD HH:mm:ss') // 起始时间(当前周周一的00:00:00点)
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    
    • 自然月:
    moment().startOf('months').format('YYYY-MM-DD HH:mm:ss') // 起始时间(当前月1号的00:00:00点)
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    
    • 自然季:
    moment().startOf('quarters').format('YYYY-MM-DD HH:mm:ss') // 起始时间(当前季度1号的00:00:00点)
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    
    • 自然半年(比较特殊,需要区分上半年或者下半年):
    moment().get('month') + 1 <= 6? moment().format(`${moment().get('year')}-01-01 00:00:00`): moment().format(`${moment().get('year')}-07-01 00:00:00`)
    // 获取当前月+1然后和6进行比较区分上下半年,上半年就计算1月1号的00点,下半年就计算7月1号的00点
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    
    • 自然年:
    moment().startOf('years').format('YYYY-MM-DD HH:mm:ss') // 起始时间(当前年1号的00:00:00点)
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    

    其实可以看到,基本都是通过startOf的不同参数来获取的,唯一需要注意的可能就是半年的概念了。

  • 近期时间(分为起始时间和结束时间构成的时间段,结束时间是当前的时间):

    • 日(近一天):
    moment().day(moment().day() - 1).format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推一天的时间
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    
    • 周(近一周):
    moment().day(moment().day() - 6).format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推一周的时间
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    
    • 月(近一个月):
    moment().subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推一个月的时间
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    
    • 季(近三个月):
    moment().subtract(1, 'quarters').format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推三个月的时间
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    
    • 半年(近六个月):
    moment().subtract(6, 'months').format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推六个月的时间
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    
    • 年(近一年):
    moment().subtract(1, 'years').format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推一年的时间
    moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间(当前系统的时间)
    

    以上就是获取自然时间和近期时间的方法。
    期待能够对你有所帮助~~~
    如有问题,请指出,接受批评。


    个人微信公众号:

moment获取自然时间和近期时间相关推荐

  1. java localdate获取自然周

    ISO8601自然周 自然周的标准很多.其中以ISO8601 为准. 可以看到一年的第一个自然周应当满足: 有第一个星期四 包含1月4号 第一个自然周应当有4个或者4个以上的天数 这个星期开始的时间( ...

  2. PHP获取自然周始末时间

    之前做了一个项目做抽奖的,里面有个需求,每个用户每个自然周能抽中一次指定产品. 自然周指的是:从周一到周日算作一个自然周. 但是作为PHP中的lower,还是能力捉急,只好百度 还挺多的嘛!想也不想先 ...

  3. java 获取当前时间所在自然周起止时间及自然周中的每一天

    有的时候需要获取当前时间所在自然周中的起始和截止时间,或者某个时间段内里的每一天的日期 1.先来解决获取自然周中的起止时间 /*** 获取当前时间所在自然周的起止日期** @return*/publi ...

  4. js moment.js 给定时间 获取自然月、周的时间轴

    1.需求 要实现这个时间轴的自然周.自然月的选择功能,需要思考两个问题 处理给定时间的本周与本月时间的显示,如输入 2021-07-29,最后一个月就是 2021-07-01 - 2021-07-29 ...

  5. moment获取近期时间

    moment官网地址:http://momentjs.cn/docs/#/parsing/now/ 在日常的开发中,日期选择器的使用频率很高.对于日.周.月.季.半年.年等时间使用率特别高.如近一天. ...

  6. PHP获取当前时间戳,当前时间、及解决时区问题

    PHP获取当前时间戳,当前时间.及解决时区问题 参考文章: (1)PHP获取当前时间戳,当前时间.及解决时区问题 (2)https://www.cnblogs.com/daochong/p/99578 ...

  7. sas时间和Linux时间转化,尝试在SAS中获取文件属性(文件大小,创建日期时间和上次修改日期时间)...

    我正在使用以下宏来使用SAS获取 Linux文件属性.我正在获取大小和上次修改时间的值,但没有获得"创建日期时间"的任何值.%macro FileAttribs(filename) ...

  8. VC++ 获取文件属性创建时间、修改时间和访问时间

    转载:http://blog.sina.com.cn/s/blog_66bf8d8301014ikd.html WIN32_FIND_DATA结构 关于文件的全部属性信息,总计有以下以下9 种:文件的 ...

  9. html页面获取服务器时间,[html]定时获取服务器时间和本地时间

    [html]定时获取服务器时间和本地时间 2018-11-1 萧 写技术 .time_div{width:100%; padding:10px; text-align:center; margin:5 ...

最新文章

  1. Ants UVA - 1411(km板题竟然让我换了个板子)
  2. TCP 滑动窗口协议
  3. @scheduled 执行一次_springboot 定时任务Scheduled(注解方式实现)参数 说明
  4. Jpgraph php怎么变异,php使用Jpgraph绘制3D饼状图的方法
  5. BZOJ-2005能量采集-数论函数
  6. Mybatis的Mapper代理
  7. 计算机电缆静电,ZR-DJFPVP计算机电缆
  8. 蚂蚁课堂视频笔记思维导图-4期 四、微服务安全
  9. 从零开始学GIMP:一.从基本图形开始
  10. SpringMVC整合activiti Modeler
  11. android lut格式文件下载,一键调色?教你用Lut直接调出电影色调(内含下载)
  12. xcode和macos对应版本参考
  13. 【Qt开发笔记】Qt设置生成的exe文件图标
  14. 【Practical】蒙特卡罗法及其应用
  15. 用delphi编写医院的复杂报表
  16. css内边距属性、外边距属性
  17. ffmpeg中合并音频文件
  18. 【机器学习】--机器学习之朴素贝叶斯从初始到应用
  19. 智能车K60学习笔记
  20. linux 创建dat文件‘,DAT 文件是什么

热门文章

  1. 图的深度优先遍历DFS(JAVA)
  2. Sqlite delete语句使用注意点
  3. 客房管理实时房态图布局
  4. 学习使用templete.js
  5. 优图实验室升级为腾讯计算机视觉研发中心,与 Science 期刊达成战略合作
  6. 电脑上python实现多开微信
  7. matlab QR分解
  8. 先序遍历和后序遍历为什么不能唯一地确定一棵树?
  9. 7千8百多条成语填空选字ACCESS\EXCEL
  10. BZOJ 1778: [Usaco2010 Hol]Dotp 驱逐猪猡 [高斯消元 概率DP]