moment的安装和常见使用

cy199706

已于 2025-03-27 11:33:11 修改

阅读量520

点赞数 2

文章标签： javascript 前端

于 2025-01-02 16:49:12 首次发布

本文链接：https://blog.youkuaiyun.com/cy199706/article/details/144888738

版权

1.安装（以vue项目为例全局引用）

Moment.js 中文网

第一步：安装

npm install moment --save

第二步：在main.js应用

import moment from "moment"; //导入文件

Vue.prototype.moment = moment; //赋值使用格式化时间插件

第三步：在页面中使用

<template>
  <div>

  </div>
</template>
<script>
export default {
  name: 'APP',
  data () {
    return {
    }
  },
  methods: {
  },
  created () {
    this.moment()
  },
  mounted () {
  },
}
</script>
<style lang="less" scoped>

</style>

2.常见用例

1.格式化代码

   let date = this.moment();
   console.log(date.format('YYYY-MM-DD')); // 示例输出: "2025-01-02"

2.显示今天或者昨天或者某个日期

moment().subtract(Number, String);

 let aaaText = moment(new Date()).subtract(1,"days").format("YYYY-MM-DD");
 let showData = aaaText == moment(new Date()).format("YYYY-MM-DD")?'今天':aaaText == moment(new Date()).subtract(1,"days").format("YYYY-MM-DD")?'昨天':aaaText;
console.log('777',showData);

3.表单校验时开始日期必须在结束日期之前，否则不通过

if(this.moment(endDate).isBefore(this.moment(startDate))){
       this.$dialog.alert({message:"结束时间不能早于开始时间！"});
       return;
}

4.表单校验的时候最大查询时间不能超过多少天

 if (this.moment(endDate).diff(startDate, "day") > 30) {
        this.$dialog.alert({message:"最大查询区间为30天！"});
        return;
 }