Vue Antd RangePicker限制选择时间段为一个月
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
需求:选择今天之前(包括今天),时间段范围一月内。
<a-range-picker :value="createValue" @change='aaa'
:disabled-date="disabledPriceRangeDate"
@calendarChange="calendarPriceRangeChange"
:format="dateFormat">
<template slot="renderExtraFooter">
</template>
</a-range-picker>
import moment from 'moment';
data() {
return {
dateFormat: 'YYYY-MM-DD',
createValue:[
moment(this.formatDate(new Date().getTime() - 31*86400000, 'Y-m-d')),
moment(this.formatDate(new Date().getTime(), 'Y-m-d'))
],
selectPriceDate: '',
offsetDays: 2678400 * 1000 //最多选择范围31天m
},
},
methods: {
moment,
calendarPriceRangeChange(date){
this.selectPriceDate = date[0]
},
disabledPriceRangeDate(current){
if(this.selectPriceDate){
let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
return current > moment(this.formatDate(new Date(selectV+this.offsetDays).getTime(), 'Y-m-d')) ||
current < moment(this.formatDate(new Date(selectV-this.offsetDays).getTime(), 'Y-m-d')) ||
current > moment().endOf('day')
}else{
return current > moment().endOf('day')
}
},
},
formatDate: (timestamp, formatLayout = 'Y-m-d H:i:s') => {
let formatDate = ""
formatLayout = formatLayout.toUpperCase()
timestamp = (timestamp+"").length > 11 ? timestamp : timestamp * 1000
let time = new Date(timestamp)
for (let i in formatLayout) {
if (['Y','M','D', 'W','H','I','S'].indexOf(formatLayout[i]) >= 0) {
switch (formatLayout[i]) {
case 'Y':
formatDate += time.getFullYear()
break;
case 'M':
formatDate += time.getMonth() >= 9 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1)
break;
case 'D':
formatDate += time.getDate() > 9 ? time.getDate() : '0' + time.getDate()
break;
case 'W':
formatDate += time.getDay() == 0 ? 7 : time.getDay()
break;
case 'H':
formatDate += time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
break;
case 'I':
formatDate += time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
break;
case 'S':
formatDate += time.getSeconds() > 9 ? time.getSeconds() : '0' + time.getSeconds()
break;
}
}else{
formatDate += formatLayout[i]
}
}
return formatDate
},
}
- 效果图
参考文章:https://blog.csdn.net/qq_39186346/article/details/107687502
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)