Vue 中 (moment)操作日期的加减与展示
目录
1、首先在 pacaage.json 中引入依赖 "moment": "^2.29.4"
4、data 中我定义了一个初始控制变量 ctrlEndDate ，用来控制可选择的截止时间为当前时间。
基本语法 ：
moment().add(Number, String);//通过类型添加
moment().add(Duration);//时间间隔duration
moment().add(Object);//也可以使用对象
展示效果如下：
使用方式：
1、首先在 pacaage.json 中引入依赖 "moment": "^2.29.4"
2、然后命令行 install 安装 ：
npm install moment3、最后，在使用的页面引入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>这里我们主要关注以下时间选择器相关的内容即可
<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>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);
},以上函数内，我用到了指定日期加一天的操作，那么下面就是它的使用类型。
类型
| 全(缩)写 | 描述 |
|---|---|
| years（y） | 年 |
| quarters（Q） | 季度 |
| months（M） | 月 |
| weeks（w） | 周 |
| days（d） | 日 |
| hours（h） | 时 |
| minutes（m） | 分 |
| seconds（s） | 秒 |
| milliseconds（ms） | 毫秒 |
比如：我要指定时间，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");
};