本文記錄的幾個要點
1、結(jié)束時間不得比開始時間提前
2、當(dāng)前月份之后不可選
3、開始時間為當(dāng)月的第一天 eg: 01月01日 00:00:00
結(jié)束時間為當(dāng)月的最后一天 eg: 12月31日 23:59:59
轉(zhuǎn)化為時間戳格式入?yún)?br /> 4、默認展示向前推12個月
eg: 2019-12 ~ 2020-12

---

效果圖：（當(dāng)前月份12月）

代碼實現(xiàn)：

<date-picker type="month" :value="leftTime" placeholder="請選擇開始時間" :options="startTimeOption" @on-change="onStartTimeChange"></date-picker><date-picker type="month" :disabled = 'disabled' :value="rightTime" placeholder="請選擇結(jié)束時間" :options="endTimeOption" @on-change="onEndTimeChange"></date-picker> data() {return :{leftTime: getDate('yyyy-MM-dd', new Date().getTime() - 3600 * 1000 * 24 * 30 * 12), // 月份開始時間tempLeft: '',rightTime: getDate('yyyy-MM-dd', new Date().getTime()), // 月份結(jié)束時間tempRight: '',disabled: true, // 禁止使用第二個startTimeOption: {}, // 開始時間校驗endTimeOption: { // 結(jié)束時間校驗disabledDate (date) {return date && date.valueOf() > Date.now() - 86400000}}} } methods: {// 時間選擇 - 開始日期onStartTimeChange (startTime, type) {this.endTimeOption = {disabledDate (endTime) {return endTime < new Date(startTime) || endTime > Date.now()}}this.disabled = falsethis.tempLeft = getTime(startTime + '-01 00:00:00')if (this.tempRight && this.tempLeft) this.monthActive(1)},// 結(jié)束日期onEndTimeChange (endTime, type) {this.startTimeOption = {disabledDate (startTime) {return startTime > new Date(endTime) || startTime > Date.now()}}// endTime返回 2020-12var y = endTime.substring(0, 4)var m = endTime.substring(5, 8)this.tempRight = getTime(getDate('yyyy-MM-dd 23:59:59', new Date(y, m, 1 - 1).getTime()))if (this.tempRight && this.tempLeft) this.monthActive(1)}}// 入?yún)onthActive (pageIndex) { const data = {leftTime: this.tempLeft, // 這里是轉(zhuǎn)化好的時間戳格式rightTime: this.tempRight,pageIndex: 1,pageSize: 10,type: 2}deviceOnlineData(data).then().catch()} created() {// 把需要入?yún)⒌闹缔D(zhuǎn)化為時間戳格式方法和開始日期 結(jié)束日期 一樣 } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的iview选择月份 月初月末 时间戳格式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。