Ant Design Vue日期组件的时间限制方法是什么
本文小编为大家详细介绍“Ant Design Vue日期组件的时间限制方法是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“Ant Design Vue日期组件的时间限制方法是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
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=='日'"
>
<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>读到这里，这篇“Ant Design Vue日期组件的时间限制方法是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论