溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“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>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日期組件的時間限制方法是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
