Vue 中 (moment)操作日期的加减与展示 |
您所在的位置：网站首页 › 当前日期加一天 › Vue 中 (moment)操作日期的加减与展示 |
Vue 中 (moment)操作日期的加减与展示
|
目录 基本语法 ： 展示效果如下： 使用方式： 1、首先在 pacaage.json 中引入依赖 "moment": "^2.29.4" 2、然后命令行 install 安装 ： 3、最后，在使用的页面引入moment 4、data 中我定义了一个初始控制变量 ctrlEndDate ，用来控制可选择的截止时间为当前时间。 5、页面 view 编写时间选择器的元素 6、函数控制 总结 几种加日期的方法： 减日期时间 其他用法 基本语法 ：代码语言：javascript复制moment().add(Number, String);//通过类型添加 moment().add(Duration);//时间间隔duration moment().add(Object);//也可以使用对象展示效果如下： 使用方式：1、首先在 pacaage.json 中引入依赖 "moment": "^2.29.4" 2、然后命令行 install 安装 ：代码语言：javascript复制npm install moment3、最后，在使用的页面引入moment 代码语言：javascript复制import moment from "moment";4、data 中我定义了一个初始控制变量 ctrlEndDate ，用来控制可选择的截止时间为当前时间。代码语言：javascript复制ctrlEndDate: moment().format("YYYY-MM-DD"), 这里我在 data 内部还定义了一个变量，用来存放工作经历的数组变量 personJobList 代码语言：javascript复制personJobList:[{}],5、页面 view 编写时间选择器的元素代码语言：javascript复制 删除 职位 公司 开始时间 结束时间 添加工作经历这里我们主要关注以下时间选择器相关的内容即可 代码语言：javascript复制 开始时间 结束时间mode : 代表时间的展示格式，我这里需要的就是 date :start ：代表时间可选择的开始节点 :end ：代表时间可选择额截止节点（这里我控制的是当前时间，也就是 data 初始定义的变量ctrlEndDate） @change ：绑定的时间变化时的事件所触发的函数 6、函数控制bindStartDateChange 是开始时间绑定的函数 bindEndDateChange 是结束时间绑定的函数 代码语言：javascript复制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) }); },下面是我页面上添加工作履历和删除工作履历的函数 代码语言：javascript复制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 加一天 代码语言：javascript复制moment("2022-10-01").add(1, 'days').format("YYYY-MM-DD")我这里用到的是 days ,你可以根据自己的需求来加 x 天(days)，x 周（weeks）... moment() 如果不指定时间，那就是默认当前时间。 总结 几种加日期的方法：链式添加时间代码语言：javascript复制moment().add(7, 'days').add(1, 'months');使用对象添加时间代码语言：javascript复制moment().add({days:7,months:1});时间间隔 duration代码语言：javascript复制var duration = moment.duration({'days' : 1}); moment().add(duration); 指定特地日期时间代码语言：javascript复制moment("2018-01-28").add(1, 'months');减日期时间语法代码语言：javascript复制moment().subtract(Number, String); moment().subtract(Duration); moment().subtract(Object);用法，类似于添加日期 其他用法格式化时间以及获取时间戳方法代码语言：javascript复制moment(Date.now()).format("YYYY-MM-DD HH:mm:ss");//获取格式时间 moment(Date.now(), 'YYYY-MM-DD HH:mm:ss').valueOf();//获取时间戳 把服务器地址转化成本地地址代码语言：javascript复制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"); }; |
【本文地址】