Ant Design Vue日期组件的时间限制
我介绍的日期组件是封装成单独的一个日期组件
是由用下面这个日期组件拼接组成.
而不是一个完整的开始时间和结束时间组件
以下：
- 开始时间不能选择当天日期;
- 结束时间不能小于开始时间;
上代码：
disabled-date 是禁用属性
j-date就是封装的日期子组件 :
父组件：
<a-form-model-item label="活动开始时间">
<j-date
placeholder="请选择开始日期"
class="query-group-cust"
:disabled-date="disabledStartDate"
v-model="queryParam.startDate"
@change="qingkong"
></j-date>
<span class="query-group-split-cust"></span>
<j-date
placeholder="请选择结束日期"
class="query-group-cust"
:disabled-date="disabledEndDate"
v-model="queryParam.endDate"
@change="qingkong"
></j-date>
</a-form-model-item>
这是开始和结束 方法：
// 处理选择时间
// 开始
disabledStartDate(val) {
// console.log(val,this.queryParam.endDate,'开始');
if (this.queryParam.endDate) {
// return val && val > moment().endOf('day')
return (
val > moment(this.queryParam.endDate, 'YYYY-MM-DD').subtract(1, 'days').startOf('day') &&
val > moment().subtract(1, 'days').startOf('day')
)
} else {
return val >= moment().startOf('day')
// return true;
}
},
// 结束
disabledEndDate(val) {
// console.log(val,this.queryParam.startDate,'结束');
if (this.queryParam.startDate) {
console.log(val.format('YYYY-MM-DD'), this.queryParam.startDate, moment().startOf('day').format('YYYY-MM-DD'))
return val < moment(this.queryParam.startDate, 'YYYY-MM-DD').endOf('day') || val > moment().endOf('day')
} else {
return val >= moment().endOf('day')
}
},
子组件：
你的子组件里面要把一下写进去
:disabled-date="disabledDate"
// 在pros里面把父组件里面的disabled-date接收
props: {
disabledDate:{
type: Function,
required: false
},
}<template>
<a-date-picker
dropdownClassName="j-date-picker"
:disabled="disabled || readOnly"
:placeholder="placeholder"
@change="handleDateChange"
:value="momVal"
:showTime="showTime"
:format="dateFormat"
:getCalendarContainer="getCalendarContainer"
:disabled-date="disabledDate"
/>
</template>
<script>
import moment from 'moment'
export default {
name: 'JDate',
props: {
disabledDate:{
type: Function,
required: false
},
placeholder:{
type: String,
default: '',
required: false
},
value:{
type: String,
required: false
},
dateFormat:{
type: String,
default: 'YYYY-MM-DD',
required: false
},
//此属性可以被废弃了
triggerChange:{
type: Boolean,
required: false,
default: false
},
readOnly:{
type: Boolean,
required: false,
default: false
},
disabled:{
type: Boolean,
required: false,
default: false
},
showTime:{
type: Object|Boolean,
required: false,
default: false
},
getCalendarContainer: {
type: Function,
default: (node) => node.parentNode
},
},
data () {
let dateStr = this.value;
return {
decorator:"",
momVal:!dateStr?null:moment(dateStr,this.dateFormat)
}
},
watch: {
value (val) {
if(!val){
this.momVal = null
}else{
this.momVal = moment(val,this.dateFormat)
}
}
},
methods: {
moment,
handleDateChange(mom,dateStr){
this.$emit('change', dateStr);
},
},
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
model: {
prop: 'value',
event: 'change'
}
}
</script>antd Vue项目 日期组件限制年月周日
1.限制年份
2.限制月份
3.限制周
4.限制日
5.具体代码如下：
<template>
<div>
<a-form-model ref="form"
:model="searchModel"
:label-col="{ span: 6 }"
:wrapper-col="{ span: 14 }">
<a-row :gutter="[20, 30]"
class="form-seach">
<a-col :sm="{ span: 24 }"
:md="{ span: 12 }"
:lg="{ span: 12 }"
:xl="{ span: 8 }"
:xxl="{ span: 6 }">
<div class="line">
<span class="label">周期维度:</span>
<a-select v-model="searchModel.selectValue"
placeholder="请选择周期维度">
<a-select-option value="年">年</a-select-option>
<a-select-option value="月">月</a-select-option>
<a-select-option value="周">周</a-select-option>
<a-select-option value="日">日</a-select-option>
</a-select>
</div>
</a-col>
<a-col :sm="{ span: 24 }"
:md="{ span: 12 }"
:lg="{ span: 12 }"
:xl="{ span: 8 }"
:xxl="{ span: 6 }">
<div class="line">
<span class="label">周期选择:</span>
<template v-if="searchModel.selectValue=='年'||!searchModel.selectValue">
<a-date-picker v-model="searchModel.year"
mode="year"
format="YYYY"
:open="yearShow"
:disabled="!searchModel.selectValue"
@openChange="openChange"
@panelChange="panelChange" />
</template>
<template v-if="searchModel.selectValue=='月'">
<a-month-picker v-model="searchModel.month"
:disabled-date="disabledMonth"
:defaultPickerValue="moment().format('YYYY-MM')"
:disabled="!searchModel.selectValue" />
</template>
<template v-if="searchModel.selectValue=='周'">
<a-range-picker :disabled-date="disabledDate"
v-model="searchModel.week"
@focus="focus"
@calendarChange="calendarPriceRangeChange"
@change="changePriceRangeDate" />
</template>
<div v-show="searchModel.selectValue=='日'"
style="width:272px">
<a-date-picker v-model="searchModel.date"
:disabled="!searchModel.selectValue"
:disabled-date="disableData"
:defaultPickerValue="moment().format('YYYY-MM-DD')"
:showToday="false" />
</div>
</div>
</a-col>
</a-row>
</a-form-model>
</div>
</template>
<script>
import moment from "moment";
export default {
data () {
return {
yearShow: false, //选择年度是否显示选择面板
timer: null,
searchModel: {
selectValue: undefined,
year: '',
month: '',
week: [],
date: ''
},
selectPriceDate: '',
loading: false,
};
},
props: {
limitYear: {
type: Array,
default(){
return [2,1]
}
},
limitMonth: {
type: Array,
default(){
return [-1, -12*2-3]
}
},
limitWeek: {
type: Array,
default(){
return ['2020-11-01']
}
},
limitData: {
type: Array,
default(){
return ['2020-11-01']
}
},
},
methods: {
moment,
//选择完时间 清空限制
changePriceRangeDate () {
this.selectPriceDate = '';
},
//选择开始时间/结束时间
calendarPriceRangeChange (date) {
this.selectPriceDate = date[0];
},
//根据选择的开始时间/结束时间，动态渲染要禁用的日期
disabledDate (current) {
if (this.selectPriceDate) {
const diffDate = current.diff(this.selectPriceDate, 'days');
if (moment(this.selectPriceDate).format('YYYY-MM-DD') < moment().add(-8, 'days').format('YYYY-MM-DD')) {
return Math.abs(diffDate) != 6;
} else {
return diffDate != -6;
}
} else {
return current && current > moment().add(-1, 'days') || current && current < moment(this.limitWeek[0]);
}
},
disabledMonth (current) {
return current && current > moment().add(this.limitMonth[0], 'M') || current && current < moment().add(this.limitMonth[1], 'M');
},
disableData (current) {
return current && current > moment().add(-1, 'days') || current && current < moment(this.limitData[0]);
},
focus () {
this.selectPriceDate = '';
},
openChange (status) {
this.yearShow = status;
//日期禁用规则
this.timer = setTimeout(() => {
this.dateYearDisabledRule();
}, 0);
},
//选择年度-面板关闭回调
panelChange (value) {
this.yearShow = false;
this.searchModel.year = value;
//清除定时器
clearTimeout(this.timer);
},
dateYearDisabledRule () {
//获取dom元素
const tableDom = document.querySelectorAll('.ant-calendar-year-panel-body');
const prevBtn = document.querySelector('.ant-calendar-year-panel-prev-decade-btn');
const nextBtn = document.querySelector('.ant-calendar-year-panel-next-decade-btn');
const tdDom = tableDom[0].querySelectorAll('td');
// 当前面板的第一个和最后一个年份类似年份翻页按钮因此和年份翻页按钮做相同处理，否则会有错误
const prevBtnTd = tdDom[0];
const nextBtnTd = tdDom[tdDom.length - 1];
//定义所需对比值
const nowDate = moment().format('YYYY');
if (tableDom.length > 0) {
tdDom.forEach(item => {
if (item.innerText < nowDate - this.limitYear[0] || item.innerText > nowDate - this.limitYear[1]) {
item.setAttribute('class', 'ant-calendar-year-panel-cell-disabled');
} else {
item.classList.remove('ant-calendar-year-panel-cell-disabled');
}
});
// 年份翻页后同理以上方法
const ev = this.dateYearDisabledRule.bind(this, 'lteNow');
prevBtn.removeEventListener('click', ev);
nextBtn.removeEventListener('click', ev);
prevBtn.addEventListener('click', ev);
nextBtn.addEventListener('click', ev);
prevBtnTd.removeEventListener('click', ev);
nextBtnTd.removeEventListener('click', ev);
prevBtnTd.addEventListener('click', ev);
nextBtnTd.addEventListener('click', ev);
}
}
}
};
</script>
<style lang="stylus">
.panel-table {
margin-top: 30px;
}
.ant-calendar-year-panel-cell-disabled {
pointer-events: none;
.ant-calendar-year-panel-year {
color: rgba(0, 0, 0, 0.25);
background: #f5f5f5;
}
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
