Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >Vue学习笔记之moment.js日期处理控件

Vue学习笔记之moment.js日期处理控件

作者头像
Jetpropelledsnake21
发布于 2022-11-12 03:50:16
发布于 2022-11-12 03:50:16
13.6K00
代码可运行
举报
文章被收录于专栏：JetpropelledSnakeJetpropelledSnake
运行总次数：0
代码可运行

0x00 概述

本文主要记录moment.js日期控件在vue中的使用；

moment可以方便的计算自然月或者自然年份，避免使用固定天数或者月份计算导致结束日期错乱问题。

0x01 安装moment插件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
npm install moment --save

 在package.json中查看（moment插件安装成功）

在Vue的JS部分导入moment

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
import moment from 'moment'

0x01 moment在项目中的应用

1.1 以月份为周期计算

 需求：根据开始日期和周期计算下次到期事件

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>  
      <el-form-item label="检定时间" prop="fVerificationDate" >
          <el-date-picker
              v-model="dataForm.fVerificationDate"
              type="date"
              placeholder="选择日期" 
              @input="fVerificationCycleCalculate2" 
          >
          </el-date-picker>
      </el-form-item>
 
      <el-form-item label="检定周期/月" prop="fVerificationCycle">
        <el-input v-model="dataForm.fVerificationCycle" placeholder="检定周期" @input="fVerificationCycleCalculate2"></el-input>
      </el-form-item>
 
      <el-form-item label="下次检定日期" prop="fNextVerificationDate">
        <!-- <el-input v-model="dataForm.fNextVerificationDate" placeholder="下次检定日期"></el-input> -->
           <el-date-picker
            v-model="dataForm.fNextVerificationDate"
            type="date"
            placeholder="选择日期" disabled>    //disabled 去掉可修改
          </el-date-picker>
      </el-form-item>
</template>
 
<script>
 
//引入moment组件   注意最下面需要添加   components:{moment},
 import moment from 'moment'    
 
 export default {
    data () {
      return {
           dataForm{
              fVerificationCycle: '',
              fNextVerificationDate: '',
              fVerificationDate: '',
                  },
           }
        },
    methods：{
               //检定周期计算/月
      fVerificationCycleCalculate2(){
            //判断检定时间，和周期不为空
        if(this.dataForm.fVerificationDate != null&&this.dataForm.fVerificationCycle !=''){
          console.log(this.dataForm.fVerificationDate)
          var a=moment(this.dataForm.fVerificationDate)
          var b=parseInt(this.dataForm.fVerificationCycle)
 
          var y=a.get('years')
          var m=a.get('months')
          var d=a.get('dates')  //特别注意：这里获取天数用   get（"dates")
          // var d=moment.duration(a).asDays()
          //计算月份 获取月份+1加周期月份b
          var ms=m+1+b 
         
          if(parseInt(ms/12)>0){//大于12个月轮换一年
            y=y+(parseInt(ms/12))
            ms=ms-12*(parseInt(ms/12))
          }
          if(ms==0){//无0月，元月及1月。
            ms=1
          }
          var z =y + "-" + (ms < 10 ? ("0" + ms) : ms) + "-" + (d < 10 ? ("0" + d) : d) + '';
          this.dataForm.fNextVerificationDate=z
         
        }
      },
    },
   components:{moment},
}
 
</script>

1.2 以月份为周期计算

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<template>  
        <el-form-item label="检定时间" prop="fVerificationDate" >
          <el-date-picker
            v-model="dataForm.fVerificationDate"
            type="date"
            value-format="timestamp"
            placeholder="选择日期" 
            @input="fVerificationCycleCalculate2" 
          >
          </el-date-picker>
      </el-form-item>
 
      <el-form-item label="检定周期/月" prop="fVerificationCycle">
        <el-input v-model="dataForm.fVerificationCycle" placeholder="检定周期" @input="fVerificationCycleCalculate2"></el-input>
      </el-form-item>
 
      <el-form-item label="下次检定日期" prop="fNextVerificationDate">
        <!-- <el-input v-model="dataForm.fNextVerificationDate" placeholder="下次检定日期"></el-input> -->
           <el-date-picker
            v-model="dataForm.fNextVerificationDate"
            type="date"
            placeholder="选择日期" disabled>    //disabled 去掉可修改
          </el-date-picker>
      </el-form-item>
 
</template>
 
<script>
 
//引入moment组件   注意最下面需要添加   components:{moment},
 import moment from 'moment'    
 
 export default {
    data () {
      return {
           dataForm{
              fVerificationCycle: '',
              fNextVerificationDate: '',
              fVerificationDate: '',
                  },
           }
        },
    methods：{
               //检定周期计算/天
      fVerificationCycleCalculate(){      //日期传入格式为时间戳格式 value-format="timestamp"
        console.log("检定时间:"+this.dataForm.fVerificationDate) ;
        console.log("检定周期"+(this.dataForm.fVerificationCycle));
        if(this.dataForm.fVerificationDate != null&&this.dataForm.fVerificationCycle !=''){
          console.log("检定周期"+(this.dataForm.fVerificationCycle)*(24 * 60 * 60 * 1000));
 
              this.dataForm.fNextVerificationDate=this.dataForm.fVerificationDate+((this.dataForm.fVerificationCycle)*(24 * 60 * 60 * 1000))
              console.log("下次检定日期"+this.dataForm.fNextVerificationDate);
           }
      },
    },
   components:{moment},
}
 
</script>

0x02 moment的常规用法

日期格式化 官网给出的几种情况(都是当前日期，若指定日期date, moment(date).format())

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
# 精确到毫秒
moment().valueOf()
## 1584182611042 ；返回值为数值类型
moment().format('x') 
## 返回值为字符串类型

# 精确到秒 
moment().unix()
##  1584182618 精确到秒  返回值为数值类型

moment().fomoment().format('X') 
##  返回值为字符串类型

生成指定时间的moment
moment().format('MMMM Do YYYY, h:mm:ss a'); // 三月 18日 2020, 9:31:24 上午
moment().format('dddd');                    // 星期三
moment().format("MMM Do YY");               // 3月 18日 20
moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020
moment().format();                          // 2020-03-18T09:31:24+08:00

##  根据固定的值转化为时分秒 
let time = this.$moment.duration(val, 'seconds')  //得到一个对象，里面有对应的时分秒等时间对象值
let hours = time.hours()
 let minutes = time.minutes()
 let seconds = time.seconds()
 item.valueC = this.$moment({h:hours, m:minutes, s:seconds}).format('HH:mm:ss')

获取对象
moment().toObject();
# 返回一个包括：年、月、日、时、分、秒、毫秒的对象
# {
    years: 2020
    months: 2
    date: 14
    hours: 18
    minutes: 47
    seconds: 56
    milliseconds: 526
}
格式化：
moment().format();
# 2020-03-14T19:14:05+08:00

获取时间：
# 获取今天0时0分0秒
moment().startOf('day')

# 获取本周第一天(周日)0时0分0秒
moment().startOf('week')

# 获取本周周一0时0分0秒
moment().startOf('isoWeek')

# 获取当前月第一天0时0分0秒
moment().startOf('month')

# 获取指定日期的0时0分0秒
moment('2019-10-20').startOf('day')

# 获取今天23时59分59秒
moment().endOf('day')

# 获取本周最后一天(周六)23时59分59秒
moment().endOf('week')

# 获取本周周日23时59分59秒
moment().endOf('isoWeek')

# 获取当前月最后一天23时59分59秒
moment().endOf('month')

获取当月第一天是星期几：
# 用于设置星期几，其中星期日为 0、星期六为 6
moment().startOf('month').day()
获取前n天 / 后n天
moment().add(7, 'days');
moment().subtract(7, 'days')

比较两个时间的大小：
# 第二个参数用于确定精度，且不仅仅是要检查的单个值，因此使用 day 将会检查年份、月份、日期。

moment('2010-10-31').isBefore('2010-12-31', 'day');
# true

moment('2010-10-20').isBefore('2010-12-31', 'year');
# false

moment('2010-10-20').isAfter('2009-12-31', 'year'); 
# true

moment('2010-10-20').isSame('2009-12-31', 'year'); 
# 判断两个时间是否相等

# 需要注意的是， isBefore与isAfter 都是开区间，如果想使用闭区间，应使用
isSameOrBefore
isSameOrAfter

两个时间的相差几天：
moment([2008, 2, 27]).diff([2007, 0, 28], 'day');
# 424
是否是闰年：
moment().isLeapYear();
# true

moment([2001]).isLeapYear() 
# false

获取 月份和星期 枚举列表：
moment.months()

# ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

moment.monthsShort()
# ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

moment.weekdays()
# ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

moment.weekdaysMin()
# ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]


moment().format('YYYY-MM-DD HH:mm:ss');
# 2020-03-14 19:23:29

moment(date).format('YYYY-MM-DD HH:mm:ss')
moment(date).format('YYYY-MM-DD')
moment(date).format('YYYY~MM~DD HH:mm:ss')
moment(date).format('YYYY~MM~DD')

// 由此类推还可以自定义很多种格式，包括这种混合分隔符号也是可以的，当然现实中很少有这样的需求
moment(date).format('YYYY~MM~DD HH+mm:ss')

项目中日期快捷选择：今日、昨日、本周、 上周、 本月、 上月、 本年、 去年

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
//假设今天为2020.12.2号

//本月第一天
moment().startOf('month').format('YYYY-MM-DD'); //2020-12-01
//本月最后一天
moment().endOf('month').format('YYYY-MM-DD'); //2020-12-31

//上个月第一天
moment().subtract(1,'month').startOf('month').format('YYYY-MM-DD') //2020-11-01
//上月最后一天
moment().subtract(1,'month').endOf('month').format('YYYY-MM-DD') //2020-11-30

//今年第一天
moment().startOf('year').format('YYYY-MM-DD') //2020-01-01

//去年第一天
moment().subtract(1,'year').startOf('year').format('YYYY-MM-DD') //2019-01-01
//去年最后一天
moment().subtract(1,'year').endOf('year').format('YYYY-MM-DD') //2019-12-31

//一年前
moment().subtract(1,'year').format('YYYY-MM-DD'); //2019-12-02


//昨天
moment().subtract(1,'day').format('YYYY-MM-DD') //2020-12-01

//今天
moment().format('YYYY-MM-DD') //2020-12-02

// 本季度
const  start = moment().startOf('quarter').format('YYYY-MM-DD')   // 开始
const end = moment().endOf('quarter').format('YYYY-MM-DD')   // 结束

// 上季度
const start = moment().quarter(moment().quarter() - 1).startOf('quarter').format('YYYY-MM-DD')
const end = moment().quarter(moment().quarter() - 1).endOf('quarter').format('YYYY-MM-DD')

// 本周
 const start = moment().startOf('week') .add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
 const end = moment().endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')

// 上周
 const start = moment().subtract(weekOfDay + 7 - 1, 'days') .format('YYYY-MM-DD')
  const end  = moment().subtract(weekOfDay， 'days') .format('YYYY-MM-DD')

// 本年
 const start = moment() .year(moment().year()) .startOf('year') .format('YYYY-MM-DD')
 const end = moment() .year(moment().year())  .endOf('year').format('YYYY-MM-DD')

时间比较

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
// 获取当前时间
moment() // 获取当前时间
moment().diff(moment('2020-07-08'),'days') // 当前时间和指定时间对比

// 两个自定义的时间对比
moment('2020-08-09').diff(moment('2020-07-08'),'days') //32

let diff = moment(date1).format('x') - moment(date1).format('x');
let time = moment.duration(diff);
let days = time.days();//天数差
let hours = time.hours();//小时差
let minutes = time.minutes();//分钟差

时间加减法，根据当前日期(date)和给定差值(num),和要计算的类型(type,可以是years,months,weeks,days,hours,minutes,seconds)推算前多少个日期，如下:

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
moment(date).subtract(num, type).format('YYYY-MM-DD HH:mm:ss');
//推算（2020-03-25 00:00:00）前一年
moment("2020-03-25 00:00:00").subtract(1, "years").format('YYYY-MM-DD HH:mm:ss');//2019-03-25 00:00:00
//推算（2020-03-25 00:00:00）前5天
moment("2020-03-25 00:00:00").subtract(5, "days").format('YYYY-MM-DD HH:mm:ss');//2020-03-20 00:00:00


moment(date).add(num, type).format('YYYY-MM-DD HH:mm:ss');
//推算（2020-03-25 00:00:00）后一年
moment("2020-03-25 00:00:00").add(1, "years").format('YYYY-MM-DD HH:mm:ss');//2021-03-25 00:00:00
//推算（2020-03-25 00:00:00）后5天
moment("2020-03-25 00:00:00").add(5, "days").format('YYYY-MM-DD HH:mm:ss');//2020-03-30 00:00:00

js通过Moment.js让数值秒值和时分秒格式相互转化

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/ / 1、把时分秒格式转化为数值型的秒值
<script src="https://momentjs.com/downloads/moment.js"></script>
<script>
    let time=moment.duration('01:01:01').as('seconds')
    console.log(time)  //3661
</script>

//  2、把数值型的秒值转化为时分秒格式
<script src="https://momentjs.com/downloads/moment.js"></script>
<script>
  let time = moment.duration(3661, 'seconds')  //得到一个对象，里面有对应的时分秒等时间对象值
  let hours = time.hours() 
  let minutes = time.minutes()
  let seconds = time.seconds()
  console.log(moment({h:hours, m:minutes, s:seconds}).format('HH:mm:ss'))
  //01:01:01
</script>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-10-28，如有侵权请联系 cloudcommunity@tencent.com 删除
javascript
vue.js

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

javascript
vue.js
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
3406
Go 开发者必备：Protocol Buffers 入门指南
2002
10分钟带你彻底搞懂分布式链路跟踪
1404
moment.js使用详解
总结了关于moment.js库的常见用法，以功能为主线，实现相关代码，备忘备查。 const moment = require("moment"); let time = null; // 设置全局语言 moment.locale("zh-cn"); // 初始化当下时间 time = moment(); console.log(time); // 按照格式初始化 time = moment("2000-01-01", "YYYY-MM-DD"); console.log(time); //
心谭博客
2020/04/20
4.1K0
datetimerangepicker配置及默认时间段展示
bootstrap
<script type="text/javascript"> $(document).ready(function (){ //时间插件 $('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss')); $('#reportrange').daterangepicker( { sta
蓓蕾心晴
2018/04/12
2.2K0
Angular开发技巧
渲染容器表单技巧开发
npm install jquery -S npm install @types/jquery -D angular.json
世间万物皆对象
2024/03/20
920
【VIDEO_Parent】-创作者前端-条件查询
开源项目介绍2023腾讯·技术创作特训营 第三期
程序员NEO
2023/11/30
1730
【VIDEO_Parent】-创作者前端-条件查询
使用moment.js加减日期时间
addduration语法
创建Moment对象后，有时需要对其进行一些加减等操作，Moment中提供了一些方法来完成这些操作。
用户2323866
2021/06/23
9.1K0
moment格式化时间使用方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>moment格式化时间使用方法</title> <!-- 脚本 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script> <!-- 语言包 --> <scr
越陌度阡
2020/11/26
2.3K0
moment格式化时间使用方法
提升日期处理效率：day.js 实战经验分享
addformat插件工作效率
访问 https://www.jsdelivr.com/package/npm/dayjs 下载最新版本的 Day.js。
德育处主任
2023/05/31
2.4K0
提升日期处理效率：day.js 实战经验分享
Day.js 基本使用
consoleformatimport对象字符串
Day.js 是一个极简的 JavaScript 库，可以为现代浏览器解析、验证、操作和显示日期和时间。
訾博ZiBo
2025/01/06
1640
Vue+ElementUI 搭建后台管理系统（实战系列三）
https网络安全面向对象编程jquery uipython
使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的教程，可以留着以后来看。
王小婷
2021/11/24
1.9K0
Vue+ElementUI 搭建后台管理系统（实战系列三）
Easyui DataGrid DateRange Filter 漂亮实用的日期区间段筛选功能
数据处理
自定义扩展Jquery easyui datagrid filter组件实现对日期类型区间段的筛选功能。显示效果如一下 是不是非常实用 引用的jquery 组件是 Date Range Picker
阿新
2018/04/12
2K0
Easyui DataGrid DateRange Filter 漂亮实用的日期区间段筛选功能
Moment.js 写法示例
其他
Moment.js 是我用过的最好用的操作时间的工具库。它使得操作时间变得很简单。
前端GoGoGo
2018/08/24
4.6K0
Moment.js日期处理库的使用
javascripthttpc++yarnnode.js
Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。这个在一些金融保险公司会经常用到，比如一下时间的格式化处理，时间的选择等等。
孙叫兽
2021/12/20
5.6K0
Moment.js日期处理库的使用
momentjs使用指南
apinpm
momentjs是一个处理时间格式化的npm包，非常流行，这个包前后端通用，文档也很详细，但是他的api还是有点多，这里小编将其经常使用的api罗列出来，方便大家使用。
挥刀北上
2019/07/19
3.3K0
momentjs使用指南
前端如何借助 AI 工具提升开发效率
前端
大家好，我是喵喵侠。在日新月异的前端开发领域，开发效率的提升显得尤为重要。随着人工智能（AI）技术的不断进步，各种AI工具在前端开发中的应用也越来越广泛。目前市面上的 AI 工具有很多，但基本用法都大差不大。所以在这篇文章，我会告诉你 AI 工具的通用技巧，带你了解如何借助AI工具来提升前端开发效率，并通过实际的业务场景和案例展示这些工具的实际应用效果。
喵喵侠
2024/06/07
1.3K2
前端如何借助 AI 工具提升开发效率
Vant(Vue2)使用
javascript
官网 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
码客说
2022/06/04
1.5K0
Ant Design的DatePicker日期组件不可选日期实现，让New Bing优化代码太棒了
antdatepicker函数优化字符串
antd（Ant Design）是一个基于 React 的UI组件库，它提供了丰富的组件和设计规范，可以帮助开发者快速构建高质量的前端应用。
德顺
2023/08/25
2.6K0
js中moment方法_jquery 虚拟dom
pythonjavascriptvue.js
vue项目中，需要把 moment.js 挂载到全局上（即vue的原型链上），访问时直接使用 this.moment() ;
全栈程序员站长
2022/10/04
7.1K0
js中moment方法_jquery 虚拟dom
moment.js日期时间管理的常用方法详细教程
javascript
js原生获取时间，并对其格式化、计算，并不是那么的简单，moment.js的出现，对日期时间处理就方便了许多许多。
Javanx
2019/09/04
8.3K1
moment.js日期时间管理的常用方法详细教程
moment.js 获取某个日期当天的0点的时间缀和24点的时间缀
pythonunix
moment().startOf(‘day’).format(‘YYYY-MM-DD HH:mm:ss’) // 当天0点的时间格式
我乃小神神
2022/10/31
3.8K0
Momentjs常用用法整理总汇
formatmomentjs对象基础前端
Moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。对于前端开发者来说还是非常实用的，今天就整理一些 Moment.js 的常用用法，方便后期查阅：
德顺
2023/08/25
5770
Momentjs常用用法整理总汇
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
ES[7.6.x]学习笔记（八）数据的增删改 中有错误？C#零基础学习笔记001-数据类型和变量？关于视频服务流量消耗之问题。？
相关课程
Java前端TDSQL for PG训练营
moment.js使用详解
4.1K0
datetimerangepicker配置及默认时间段展示
2.2K0
Angular开发技巧
920
【VIDEO_Parent】-创作者前端-条件查询
1730
使用moment.js加减日期时间
9.1K0
moment格式化时间使用方法
2.3K0
提升日期处理效率：day.js 实战经验分享
2.4K0
Day.js 基本使用
1640
Vue+ElementUI 搭建后台管理系统（实战系列三）
1.9K0
Easyui DataGrid DateRange Filter 漂亮实用的日期区间段筛选功能
2K0
Moment.js 写法示例
4.6K0
Moment.js日期处理库的使用
5.6K0
momentjs使用指南
3.3K0
前端如何借助 AI 工具提升开发效率
1.3K2
Vant(Vue2)使用
1.5K0
Ant Design的DatePicker日期组件不可选日期实现，让New Bing优化代码太棒了
2.6K0
js中moment方法_jquery 虚拟dom
7.1K0
moment.js日期时间管理的常用方法详细教程
8.3K1
moment.js 获取某个日期当天的0点的时间缀和24点的时间缀
3.8K0
Momentjs常用用法整理总汇
5770
相关推荐
moment.js使用详解
更多 >
Jetpropelledsnake210
LV.0
这个人很懒，什么都没有留下～
文章
590
获赞
2K
专栏
1
作者相关精选
换一批
加入讨论
的问答专区 >
王新栋0
相关课程
一站式学习中心 >
Java
1962人在学
java
前端
1303人在学
前端
TDSQL for PG训练营
192人在学
分布式数据库 TDSQL
数据库
云数据库 PostgreSQL
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
2
本文部分代码块支持一键运行，欢迎体验
本文部分代码块支持一键运行，欢迎体验