Ant Design Vue日期組件的時間限制方式
更新時間：2023年04月20日 09:30:30 作者：開發(fā)那點事兒~
這篇文章主要介紹了Ant Design Vue日期組件的時間限制方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Ant Design Vue日期組件的時間限制
我介紹的日期組件是封裝成單獨的一個日期組件
是由用下面這個日期組件拼接組成.
而不是一個完整的開始時間和結(jié)束時間組件
以下：
- 開始時間不能選擇當天日期;
- 結(jié)束時間不能小于開始時間;
上代碼：
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="請選擇結(jié)束日期"
class="query-group-cust"
:disabled-date="disabledEndDate"
v-model="queryParam.endDate"
@change="qingkong"
></j-date>
</a-form-model-item>
?這是開始和結(jié)束 方法：
?
// 處理選擇時間
// 開始
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;
}
},
// 結(jié)束
disabledEndDate(val) {
// console.log(val,this.queryParam.startDate,'結(jié)束');
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新增 在組件內(nèi)定義 指定父組件調(diào)用時候的傳值屬性和事件類型 這個牛逼
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 = '';
},
//選擇開始時間/結(jié)束時間
calendarPriceRangeChange (date) {
this.selectPriceDate = date[0];
},
//根據(jù)選擇的開始時間/結(jié)束時間，動態(tài)渲染要禁用的日期
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;
//日期禁用規(guī)則
this.timer = setTimeout(() => {
this.dateYearDisabledRule();
}, 0);
},
//選擇年度-面板關(guān)閉回調(diào)
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>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue3組件間傳值避坑方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
element中el-table局部刷新的實現(xiàn)示例
本文主要介紹了element中el-table局部刷新的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue實現(xiàn)多個echarts根據(jù)屏幕大小變化而變化實例
這篇文章主要介紹了vue實現(xiàn)多個echarts根據(jù)屏幕大小變化而變化實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue+elementui實現(xiàn)下拉表格多選和搜索功能
這篇文章主要為大家詳細介紹了vue+elementui實現(xiàn)下拉表格多選和搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在開發(fā)過程中,有時候會遇到這么一種情況,通過動態(tài)的賦值,但是dom沒有及時更新,能夠獲取到動態(tài)賦的值,但是無法獲取到雙向綁定的dom節(jié)點,這就需要我們手動進行強制刷新組件,下面這篇文章主要給大家介紹了關(guān)于vue組件強制刷新的4種方案,需要的朋友可以參考下2023-05-05
vue中使用element ui的彈窗與echarts之間的問題詳解
這篇文章主要介紹了vue中使用element ui的彈窗與echarts之間的問題詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要為大家詳細解析了vue分頁組件table-pagebar使用實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了Vue項目中components組件(模板)的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了前端漸進式框架VUE的相關(guān)資料，文中講解的非常細致，幫助大家開始學習VUE，感興趣的朋友可以了解下2020-07-07