vue 获取上一年今年下一年上一月本月下一月昨天今天明天

年

月

日

用vue moment获取时间
index.vue

<template><div><div><a-button @click="getBtnType(0)" type="primary" style="margin-right: 20px;">年</a-button><a-button @click="getBtnType(1)" type="primary" style="margin-right: 20px;">月</a-button><a-button @click="getBtnType(2)" type="primary" style="margin-right: 20px;">日</a-button></div><div><input-past-now-future ref="timeInput" @timeData="timeData" @timeSlot="timeSlot" /></div><div>{{ time }}</div></div>
</template><script>
import inputPastNowFuture from './input-past-now-future.vue'export default {name: 'InputPastNowFuture',components: { inputPastNowFuture },props: {},data() {return {time: ''}},filters: {},computed: {},watch: {},created() {},mounted() {},beforeDestroy() {},methods: {getBtnType(val) {this.$refs.timeInput.handleElectric(val)},timeData(val) {this.time = val},timeSlot(val) {console.log(val)},}
}
</script><style scoped lang="less">
</style>

input-past-now-future.vue

<template><div><div style="display: flex;align-items: center;"><a-date-pickerdropdownClassName="pickerClass":mode="mode":placeholder="placeholder":format='format':valueFormat="valueFormat"v-model="timeData":open="open"@openChange="openChange"@panelChange="panelChange"@change="onChange"style="margin-right: 10px;"/><div v-if="mode === 'year'" class="timeBtn"><a-button @click="getYear('pastYear', 1)" type="primary">上一年</a-button><a-button @click="getYear('nowYear', 1)" type="primary">本年</a-button><a-button :disabled="disabled" @click="getYear('futureYear', 1)" type="primary">下一年</a-button></div><div v-if="mode === 'month'" class="timeBtn"><a-button @click="getMonth('pastMonth', 1)" type="primary">上一月</a-button><a-button @click="getMonth('nowMonth', 1)" type="primary">本月</a-button><a-button :disabled="disabledMonth" @click="getMonth('futureMonth', 1)" type="primary">下一月</a-button></div><div v-if="mode === 'date'" class="timeBtn"><a-button @click="getDay('pastDay', 1)" type="primary">昨天</a-button><a-button @click="getDay('nowDay', 1)" type="primary">今天</a-button><a-button :disabled="disabledDay" @click="getDay('futureDay', 1)" type="primary">明天</a-button></div></div></div>
</template><script>
import moment from 'moment'export default {name: '',components: {},props: {},data() {return {timeObj: {},buttonType: 'year',disabled: true,disabledMonth: true,disabledDay: true,nowYearTime: moment(new Date()).format('YYYY-01-01 00:00:00'),nowMonthTime: moment(new Date()).format('YYYY-MM-01 00:00:00'),nowDayime: moment(new Date()).format('YYYY-MM-DD 00:00:00'),// 时间框timeData: null,open: false,mode: 'year',format: 'YYYY',valueFormat: 'YYYY',placeholder: '请选择年份',}},filters: {},computed: {},watch: {},created() {},mounted() {},beforeDestroy() {},methods: {// 时间框// 打开下拉框openChange(open) {this.open =  open},// 关闭下拉框panelChange(value) {this.electricJudgeTime(value)if (this.mode !== 'date') {this.$emit('timeData', this.timeData)this.$emit('timeSlot', this.timeObj)}this.open = false},// 情况选择框onChange(val) {if (this.mode !== 'date') {this.reset()}this.electricJudgeTime(val)this.timeData = valif (this.mode === 'date') {this.$emit('timeData', this.timeData)this.$emit('timeSlot', this.timeObj)}if (val === null) {this.disabled = truethis.disabledMonth = truethis.disabledDay = true}},// 选择状态electricJudgeTime(val) {let changeTime = moment(val).format('YYYY-MM-DD HH:mm:ss')if (this.mode === 'year') {this.compare(changeTime, 'year')this.timeData = moment(val).format('YYYY')this.format = 'YYYY'this.valueFormat = 'YYYY'} else if (this.mode === 'month') {this.compare(changeTime, 'month')this.timeData = moment(val).format('YYYY-MM')this.format = 'YYYY-MM'this.valueFormat = 'YYYY-MM'} else if (this.mode === 'date') {this.compare(changeTime, 'date')this.timeData = moment(val).format('YYYY-MM-DD')this.format = 'YYYY-MM-DD'this.valueFormat = 'YYYY-MM-DD'}},// 选择状态初始handleElectric(val) {let days = val === 0 ? 'year' : val === 1 ? 'month' : 'date'this.mode = daysthis.reset()if (this.mode === 'year') {this.placeholder = '请选择年份'}if (this.mode === 'month') {this.placeholder = '请选择月份'}if (this.mode === 'date') {this.placeholder = '请选择日期'}},// 快捷按钮// 判断是否有下年compare(time, type) {this.timeData = timeif (type === 'year') {this.disabled = this.compareDate(time, this.nowYearTime)} else if (type === 'month') {this.disabledMonth = this.compareDate(time, this.nowMonthTime)} else {this.disabledDay = this.compareDate(time, this.nowDayime)}},// 重置reset() {this.getYear('nowYear')this.getMonth('nowMonth')this.getDay('nowDay')this.timeObj = {}this.timeData = nullthis.disabled = truethis.disabledMonth = truethis.disabledDay = truethis.$emit('timeData', this.timeData)this.$emit('timeSlot', this.timeObj)},// 比较时间compareDate(d1, d2) {let reg = new RegExp('-', 'g')return ((new Date(d1.replace(reg, '/'))) >= (new Date(d2.replace(reg, '/'))))},// 获取年getYear(tit, clickType) {if (tit === 'nowYear') {this.timeData = ''}this.timeObj = this.getTime(tit, this.timeData)this.timeData = this.timeObj.starttimethis.disabled = this.compareDate(this.timeObj.starttime, this.nowYearTime)this.electricJudgeTime(this.timeObj.starttime)if (clickType === 1) {this.$emit('timeData', this.timeData)this.$emit('timeSlot', this.timeObj)}},// 获取月getMonth(tit, clickType) {if (tit === 'nowMonth') {this.timeData = ''}this.timeObj = this.getTime(tit, this.timeData)this.timeData = this.timeObj.starttimethis.disabledMonth = this.compareDate(this.timeObj.starttime, this.nowMonthTime)this.electricJudgeTime(this.timeObj.starttime)if (clickType === 1) {this.$emit('timeData', this.timeData)this.$emit('timeSlot', this.timeObj)}},// 获取天getDay(tit, clickType) {if (tit === 'nowDay') {this.timeData = ''}this.timeObj = this.getTime(tit, this.timeData)this.timeData = this.timeObj.starttimethis.disabledDay = this.compareDate(this.timeObj.starttime, this.nowDayime)this.electricJudgeTime(this.timeObj.starttime)if (clickType === 1) {this.$emit('timeData', this.timeData)this.$emit('timeSlot', this.timeObj)}},// 获取时间getTime(name, time) {if (time === undefined || time === null || time === '') {time = new Date()}let timeObj = {starttime: '',endtime: ''}// 上一年if (name === 'pastYear') {timeObj.starttime = moment(moment(time).year(moment(time).year() - 1).startOf('year').valueOf()).format('YYYY-MM-DD HH:mm:ss')timeObj.endtime = moment(moment(time).year(moment(time).year() - 1).endOf('year').valueOf()).format('YYYY-MM-DD HH:mm:ss')}// 本年if (name === 'nowYear') {timeObj.starttime = moment(moment(time).year(moment(time).year()).startOf('year').valueOf()).format('YYYY-MM-DD HH:mm:ss')timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");}// 下一年if (name === 'futureYear') {timeObj.starttime = moment(moment(time).year(moment(time).year() + 1).startOf('year').valueOf()).format('YYYY-MM-DD HH:mm:ss')if (this.compareDate(timeObj.starttime, this.nowYearTime)) {timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");} else {timeObj.endtime = moment(moment(time).year(moment(time).year() + 1).endOf('year').valueOf()).format('YYYY-MM-DD HH:mm:ss')}}// 上一月if (name === 'pastMonth') {timeObj.starttime = moment(moment(time).month(moment(time).month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss')timeObj.endtime = moment(moment(time).month(moment(time).month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss')}// 本月if (name === 'nowMonth') {timeObj.starttime = moment(moment(time).month(moment(time).month()).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss')timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");}// 下一月if (name === 'futureMonth') {timeObj.starttime = moment(moment(time).month(moment(time).month() + 1).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss')if (this.compareDate(timeObj.starttime, this.nowMonthTime)) {timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");} else {timeObj.endtime = moment(moment(time).month(moment(time).month() + 1).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss')}}// 昨天if (name === 'pastDay') {timeObj.starttime = moment(moment(time).add(-1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");timeObj.endtime = moment(moment(time).add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD HH:mm:ss');}// 今天if (name === 'nowDay') {timeObj.starttime = moment(moment(time).startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");}// 明天if (name === 'futureDay') {timeObj.starttime = moment(moment(time).add(+1, 'days').startOf("day").valueOf()).format("YYYY-MM-DD HH:mm:ss");if (this.compareDate(timeObj.starttime, this.nowDayime)) {timeObj.endtime = moment(moment().valueOf()).format("YYYY-MM-DD HH:mm:ss");} else {timeObj.endtime = moment(moment(time).add(+1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD HH:mm:ss');}}return timeObj}}
}
</script><style scoped lang="less">
::v-deep {.ant-radio-button-wrapper-checked {color: #fff;background: #40a9ff;}.ant-radio-button-wrapper-checked:active {color: #fff;}.ant-radio-button-wrapper-checked:hover {color: #fff;}
}
.timeBtn {display: flex;margin: 10px 0;
}
</style>

vue 获取上一年今年下一年上一月本月下一月昨天今天明天相关推荐

数学里上凹，下凹，上凸，下凸
https://zhidao.baidu.com/question/238541854.html 数学里上凹,下凹,上凸,下凸统称为曲线的凸知性,其是指在平面坐标系里的图形样式: 1.开口向上的曲线, ...
java上转型与下转型,Java -- 上转型和下转型
首先理解一句话:父类引用指向子类对象:什么意思呢? 记得在刚开始学习面向对象编程时候,经常听老师讲:如果要使用一个类中的成员,就需要先实例化对象,就是说要先创建一个引用类型的对象,就可以使用里边的内容 ...
降采样，过采样，欠采样，子采样，下采样，上采样，你学会了吗？【总结】
降采样: 2048HZ对信号来说是过采样了,事实上只要信号不混叠就好(满足尼奎斯特采样定理),所以可以对过采样的信号作抽取,即是所谓的"降采样". 在现场中采样往往受具体条件的限 ...
上拉、下拉以及对应上拉电阻和下拉电阻的作用原理
上拉.下拉以及对应上拉电阻和下拉电阻的作用原理一.什么是上拉和下拉电路上拉(Pull Up )或下拉(Pull Down)电阻两者统称为拉电阻上拉就是单片机的IO口串联一个电阻到VDD: 下拉就 ...
CC2530 GPIO口编程2 （上拉、下拉，三态）
先介绍一下上拉.下拉: 上拉.下拉 I/O端口中,有的上下拉电阻可以设置,有的不可以设置,有的是内置,有的是需要外接,I/O端口类似于一个三极管的集电极C, •当C接通过一个电阻和电源连接在一起的时候 ...
Vue 列表下一页上一页
Vue 列表点击下一页上一页示例代码 export default {data() {return {//获取来的数据储存pageData:'',// 总页数pageCount:'',// 当前页 ...
vue 音乐播放器上一首下一首切换
vue 音乐播放器上一首下一首切换根据自定义属性的值找到元素我是使用监听来实现切换的,将v-for循环列表的index存储在vuex中,点击上一首或下一首改变index的值,在另一个组件中监听i ...
jquery兄弟标签_js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
手机影音第十三天，xutils3、Glide的使用获取网络图片；下拉、上滑刷新；缓存网络资源...
代码已经托管到码云上,感兴趣的小伙伴可以下载看看 https://git.oschina.net/joy_yuan/MobilePlayer 本次的网络资源地址使用的是时光网的api接口,地址如下: ...

vue 获取上一年今年下一年上一月本月下一月昨天今天明天

vue 获取上一年今年下一年上一月本月下一月昨天今天明天相关推荐

最新文章

热门文章

vue 获取上一年今年下一年 上一月本月下一月 昨天今天明天

vue 获取上一年今年下一年 上一月本月下一月 昨天今天明天相关推荐

最新文章

热门文章

vue 获取上一年今年下一年上一月本月下一月昨天今天明天

vue 获取上一年今年下一年上一月本月下一月昨天今天明天相关推荐