Vue 中 (moment)操作日期的加减与展示

我不是女神ヾ 2023-09-24 15:06 141阅读 0赞

**目录**

基本语法 ：

展示效果如下：

使用方式：

1、首先在 pacaage.json 中引入依赖 "moment": "^2.29.4"

2、然后命令行 install 安装 ：

3、最后，在使用的页面引入moment

4、data 中我定义了一个初始控制变量 ctrlEndDate ，用来控制可选择的截止时间为当前时间。

5、页面 view 编写时间选择器的元素

6、函数控制

总结

几种加日期的方法：

减日期时间

其他用法

--------------------

### 基本语法 ： ###

moment().add(Number, String);//通过类型添加
    moment().add(Duration);//时间间隔duration
    moment().add(Object);//也可以使用对象

### 展示效果如下： ###

![97ac7d8d50034299bb7af42760f12feb.png][]

### 使用方式： ###

#### 1、首先在 pacaage.json 中引入依赖 *"moment": "^2.29.4"* ####

![2b6310296b9842c7a52987457ef209f7.png][]

#### 2、然后命令行 install 安装 ： ####

npm install moment

#### 3、最后，在使用的页面引入moment ####

import moment from "moment";

#### 4、data 中我定义了一个初始控制变量 ctrlEndDate ，用来控制可选择的截止时间为当前时间。 ####

ctrlEndDate: moment().format("YYYY-MM-DD"),

这里我在 data 内部还定义了一个变量，用来存放工作经历的数组变量 personJobList

personJobList:[{}],

#### 5、页面 **view** 编写时间选择器的元素 ####

<view class="mform" :hidden="tabbHidden" style="background: #d3e0ef;border-radius: 18px;margin-bottom:10px;"
    				v-for="(item,index) in personJobList" :key="index">
    					<view class="item">
    						<view class="t">删除</view>
    						<uni-icons type="minus" size="22" color="#4184ff" style="position:absolute;margin-top: 5px;right: 0;width: 5%;" @click="deleteJob(index)"></uni-icons>
    					</view>
    					<view class="item">
    						<view class="t must">职位</view>
    						<input v-model="item.position" class="m" placeholder="请输入职位"/>
    					</view>
    					<view class="item">
    						<view class="t must">公司</view>
    						<textarea v-model="item.company" class="m" placeholder="请输入公司"></textarea>
    					</view>
    					<view class="item">
    						<view class="t must">开始时间</view>
    						<picker class="m" mode="date" v-model="item.startDate" :start="item.ctrlEsstartDate" :end="ctrlEndDate" @change="bindStartDateChange($event,index)">
    							<input type="text" disabled="true" v-model="item.startDate" placeholder="请选择开始时间"/>
    						</picker>
    					</view>
    					<view class="item">
    						<view class="t must">结束时间</view>
    						<picker class="m" mode="date" v-model="item.endDate" :start="item.ctrlEestartDate" :end="ctrlEndDate" @change="bindEndDateChange($event,index)">
    							<input type="text" disabled="true" v-model="item.endDate" placeholder="请选择结束时间"/>
    						</picker>
    					</view>
    				</view>
    				<view style="text-align: center;color: #4184ff;padding: 10px 0 10px 0;" @tap="addJob()">添加工作经历</view>

这里我们主要关注以下时间选择器相关的内容即可

mode : 代表时间的展示格式，我这里需要的就是 date

:start ：代表时间可选择的开始节点

:end ：代表时间可选择额截止节点（这里我控制的是当前时间，也就是 data 初始定义的变量ctrlEndDate）

@change ：绑定的时间变化时的事件所触发的函数

#### 6、函数控制 ####

**bindStartDateChange** 是开始时间绑定的函数

**bindEndDateChange** 是结束时间绑定的函数

bindStartDateChange: function(e,index) {
    				this.$nextTick(() => {
    					setTimeout(() => {
    						this.personJobList[index].startDate = e.detail.value;
    						this.personJobList[index].ctrlEestartDate = moment(e.detail.value).add(1, 'days').format("YYYY-MM-DD");
    						this.$forceUpdate() //强制更新
    					}, 0)
    				});
    			},
    			bindEndDateChange: function(e,index) {
    				if(!Common.isExist(this.personJobList[index].startDate)){
    					Common.alert("清先选择开始时间");
    					return false;
    				}
    				this.$nextTick(() => {
    					setTimeout(() => {
    						this.personJobList[index].endDate = e.detail.value;
    						this.$forceUpdate() //强制更新
    					}, 0)
    				});
    			},

下面是我页面上添加工作履历和删除工作履历的函数

addJob(){
    				for (var i = 0; i < this.personJobList.length; i++) {
    					if(!Common.isExist(this.personJobList[i].position)){
    						Common.alert("第"+(i+1)+"个工作经历中职位不可为空!");
    						return false;
    					}
    					if(!Common.isExist(this.personJobList[i].position)){
    						Common.alert("第"+(i+1)+"个工作经历中公司不可为空!");
    						return false;
    					}
    					if(!Common.isExist(this.personJobList[i].startDate)){
    						Common.alert("第"+(i+1)+"个工作经历中开始时间不可为空!");
    						return false;
    					}
    					if(!Common.isExist(this.personJobList[i].endDate)){
    						Common.alert("第"+(i+1)+"个工作经历中结束时间不可为空!");
    						return false;
    					}
    				}
    				let tempObj = {};
    				if(this.personJobList.length>=1){
    					let prevJobObj = this.personJobList[this.personJobList.length-1];
    					tempObj = {"ctrlEsstartDate":moment(prevJobObj.endDate).add(1, 'days').format("YYYY-MM-DD")};
    					this.$nextTick(() => {
    						setTimeout(() => {
    							this.personJobList.push(tempObj);
    							this.$forceUpdate() //强制更新
    						}, 0)
    					});
    				}
    			},
    			deleteJob(index){
    				this.personJobList.splice(index,1);
    			},

以上函数内，我用到了指定日期加一天的操作，那么下面就是它的使用类型。

类型

<table> 
 <thead> 
  <tr> 
   <th>全(缩)写</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>years（y）</td> 
   <td>年</td> 
  </tr> 
  <tr> 
   <td>quarters（Q）</td> 
   <td>季度</td> 
  </tr> 
  <tr> 
   <td>months（M）</td> 
   <td>月</td> 
  </tr> 
  <tr> 
   <td>weeks（w）</td> 
   <td>周</td> 
  </tr> 
  <tr> 
   <td>days（d）</td> 
   <td>日</td> 
  </tr> 
  <tr> 
   <td>hours（h）</td> 
   <td>时</td> 
  </tr> 
  <tr> 
   <td>minutes（m）</td> 
   <td>分</td> 
  </tr> 
  <tr> 
   <td>seconds（s）</td> 
   <td>秒</td> 
  </tr> 
  <tr> 
   <td>milliseconds（ms）</td> 
   <td>毫秒</td> 
  </tr> 
 </tbody> 
</table>

比如：我要指定时间，2022-10-01 加一天

moment("2022-10-01").add(1, 'days').format("YYYY-MM-DD")

我这里用到的是 **days** ,你可以根据自己的需求来加 x 天(**days**)，x 周（**weeks**）...

moment() 如果不指定时间，那就是默认当前时间。

> ### **总结** ###

#### 几种加日期的方法： ####

*  链式添加时间

moment().add(7, 'days').add(1, 'months');

*  使用对象添加时间

moment().add({days:7,months:1});

*  时间间隔 duration

var duration = moment.duration({'days' : 1});
    moment().add(duration);

*  指定特地日期时间

moment("2018-01-28").add(1, 'months');

#### 减日期时间 ####

*  语法

moment().subtract(Number, String);
    moment().subtract(Duration);
    moment().subtract(Object);

用法，类似于添加日期

#### 其他用法 ####

*  格式化时间以及获取时间戳方法

moment(Date.now()).format("YYYY-MM-DD HH:mm:ss");//获取格式时间
    moment(Date.now(), 'YYYY-MM-DD HH:mm:ss').valueOf();//获取时间戳

*  把服务器地址转化成本地地址

import moment from "moment";
    import 'moment/src/locale/en-gb'
    
    parseDate = (date) => {
    //先确认是utc时间 
     date = date.replace(" ", "T");
      utcDate = date + "Z";
      moment.locale("en-GB");
      console.log(moment(localDate));
      return moment(utcDate).format("DD-MM-YYYY");
    };

[97ac7d8d50034299bb7af42760f12feb.png]: https://img-blog.csdnimg.cn/97ac7d8d50034299bb7af42760f12feb.png
[2b6310296b9842c7a52987457ef209f7.png]: https://img-blog.csdnimg.cn/2b6310296b9842c7a52987457ef209f7.png