基于element-ui的年份范圍選擇器
element-ui官方只有日期范圍和月份范圍選擇器，根據(jù)需求場景需要，支持年份選擇器，原本使用兩個(gè)分開的年份選擇器實(shí)現(xiàn)的，但是往往有些是不能接受的。在網(wǎng)上找了很多都沒有合適的，所以打算自己改造一個(gè)，僅供碼友們參考。
-
下載對應(yīng)的代碼到本地 文件地址，以下是我的目錄結(jié)構(gòu)，我將下載的文件放到了src/components下。
-
全局引入或者局部引入使用
全局引入
import DatePicker from '@/components/datePicker/src/date-picker.js' Vue.component(DatePicker.name, DatePicker)局部引入
import DatePicker from '@/components/datePicker' -
調(diào)用方法,下面的參數(shù)和element-ui原有el-date-picker的api保持不變
<date-picker type="yearrange" v-model="filter1" value-format="yyyy" format="yyyy年" range-separator="至" start-placeholder="開始年份" end-placeholder="結(jié)束年份" ></date-picker> -
日期限制處理（禁用），下面我以我這邊的需求為例，
- 選擇的年份需等于或小于當(dāng)前年份
- 選擇的年份范圍必須在三年之內(nèi)
data () {
return {
timeRange: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.timeRange = minDate
if (maxDate) this.timeRange = ''
},
disabledDate: time => {
if (this.timeRange) {
const minTime = this.timeRange - 3
const maxTime = this.timeRange + 3
return (
dayjs(time).format('YYYY') < minTime ||
dayjs(time).format('YYYY') > maxTime ||
time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
)
} else {
return (
time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
)
}
}
}
}
}
最終效果文章來源：http://www.zghlxwxcb.cn/news/detail-731984.html
iShot_2023-09-07_14.44.04文章來源地址http://www.zghlxwxcb.cn/news/detail-731984.html
到了這里，關(guān)于基于element-ui的年份范圍選擇器的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
