探索moment.js

最新推荐文章于 2025-03-31 09:12:28 发布

木木格里

最新推荐文章于 2025-03-31 09:12:28 发布

阅读量559

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_36545656/article/details/88527716

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在项目中使用moment.js进行时间处理的经验，包括安装、引入、设置时间区域及基础和具体使用案例。重点讨论了如何实现上架时间和开奖时间的选择规则，确保上架时间在今天或之后，开奖时间在上架时间后的6天内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写这篇文章主要是因为最近写的一个项目用到了moment，除了我们平时用来转化时间格式外，还用了进行时间段的截取。在用的时候也是尝试了很多次，才选对时间段。虽然不多，内容也不深，但在工作中还算是很常用的。

安装：

npm install moment

项目中引入：

//require 方式
var moment=require('moment');

//import 方式
import moment from 'moment';

设定时间区域:

//require 方式
require('moment/locale/zh-cn')
moment.locale('zh-cn'); 
//import 方式
import 'moment/locale/zh-cn'
moment.locale('zh-cn');

基础使用例子：

1、时间戳转换为以 YYYY-MM-DD 形式显示。（在以下的例子中转换的格式统一都为 “YYYY-MM-DD" 的形式，如果大家想要其他形式，修改下format('')格式就好）

 var timeOne = moment(1411641720000).format('YYYY-MM-DD')

2、字符串’1994-07-20'转化

 var timeOne = moment('1997-07-12').format('YYYY-MM-DD')

3、获取今天的时间

var timeToday = moment().format('YYYY-MM-DD')

4、获取昨天/明天时间

/* 方式一：使用 add */
var timeYestday = moment().add(-1, 'days').format('YYYY-MM-DD')  // 昨天
var timeTomorrow = moment().add(1, 'days').format('YYYY-MM-DD')  // 明天

/* 方式二：使用subtract */
let timeYestday = moment(new Date()).subtract(1, 'day').format('YYYY-MM-DD') //昨天
let timeTomorrow = moment(new Date()).subtract(-1, 'day').format('YYYY-MM-DD')  // 明天

具体使用案例：

前提：上面的时间选择用的是antDesign中的 a-date-picker

// 时间选择元素 上架时间选择
<a-date-picker
          class="input-short"
          showTime
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择上架时间"
          :disabledDate="disabledDateShelf"
          @change="onChange"
          v-model="activityAddInfoParam.activityAutoActiveTime"
          v-decorator="formDecorator.activityAutoActiveTime"/>

// 开奖时间
<a-date-picker
            class="input-short"
            showTime
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择开奖时间"
            :disabled="!activityAddInfoParam.activityAutoActiveTime"
            :disabledDate="disabledDate"
            @change="onChange"
            v-model="activityAddInfoParam.activityLotteryTime"
            v-decorator="formDecorator.activityLotteryTime"
          />

上面有两个时间：上架时间和开奖时间

实现要求：1、上架时间只能选择从今天起以后的时间（不包括今天和包括今天两种情况）；

2、开奖时间必须在上架时间之后的6天之内；

解：

// 设置上架禁用日期
  disabledDateShelf (current) {
    // return current && current < moment().endOf('day') // 不包括今天
    // return current && current < moment().subtract(0, 'days')) // 不包括今天
       
    return current && current < moment().subtract(1, 'days') // 包括今天
  },
// 设置禁用日期开奖日期
disabledDate (current) {
  let time = this.activityAddInfoParam.activityAutoActiveTime.format('YYYY-MM-DD HH:mm:ss')
  return current && (current > moment(time).add(6, 'days') || current < moment(time))
},

哈哈哈前面都不是重点，后面才是