做彩铃网站,网站搜索不出来,ftp网站怎么建立,莱芜吧重汽怎么样基于element-ui的年份范围选择器
element-ui官方只有日期范围和月份范围选择器#xff0c;根据需求场景需要#xff0c;支持年份选择器#xff0c;原本使用两个分开的年份选择器实现的#xff0c;但是往往有些是不能接受的。在网上找了很多都没有合适的#xff0c;所以打…基于element-ui的年份范围选择器
element-ui官方只有日期范围和月份范围选择器根据需求场景需要支持年份选择器原本使用两个分开的年份选择器实现的但是往往有些是不能接受的。在网上找了很多都没有合适的所以打算自己改造一个仅供码友们参考。 下载对应的代码到本地 文件地址以下是我的目录结构我将下载的文件放到了src/components下。 全局引入或者局部引入使用 全局引入 import DatePicker from /components/datePicker/src/date-picker.jsVue.component(DatePicker.name, DatePicker)局部引入 import DatePicker from /components/datePicker调用方法,下面的参数和element-ui原有el-date-picker的api保持不变 date-pickertypeyearrangev-modelfilter1value-formatyyyyformatyyyy年range-separator至start-placeholder开始年份end-placeholder结束年份/date-picker日期限制处理禁用下面我以我这边的需求为例 选择的年份需等于或小于当前年份选择的年份范围必须在三年之内 data () {return {timeRange: ,pickerOptions: {onPick: ({ maxDate, minDate }) {this.timeRange minDateif (maxDate) this.timeRange },disabledDate: time {if (this.timeRange) {const minTime this.timeRange - 3const maxTime this.timeRange 3return (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())}}}}}
最终效果 iShot_2023-09-07_14.44.04
