赞
踩
选中某个年份,让日期选择器只能选择该年份内的时间,并且默认显示该年份的时间(由于日期选择器默认显示为当前时间,所以需要跳转到选择的年份)
例:年份选择了2022年,那么日期选择也相应显示到2022年,对月日没有要求,月日默认显示为当前日期的月日,只是年份变动。
- //年份选择
- <el-date-picker :clearable="false" v-model="searchForm.year" type="year" format="yyyy" @change="handleChange" value-format="yyyy" placeholder="选择年">
- </el-date-picker>
-
- //日期范围选择
- <el-date-picker v-model="longTime" type="daterange" range-separator="至" start-placeholder="开始日期" :picker-options="pickerOptions" :default-value="dateDefaultShow" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
- </el-date-picker>
- data() {
- let disabledDate = (time) => {
- const year = this.searchForm.year // 获取当前年份
- const oneYear = Number(year) + 1 // 获取下一年
- const lastYear = Number(year) - 1 // 获取上一年
- const timeYear = new Date(oneYear + '/1/1').getTime() // 将明年的日期转换成时间戳
- const timeYearlast = new Date(lastYear + '/12/31').getTime() // 将去年的日期转换成时间戳
- return time.getTime() >= timeYear || time.getTime() <= timeYearlast
- };
- return {
- searchForm: {
- year: "",
- startDate: "",
- endDate: "",
- currentPage: 1,
- pageSize: 20,
- },
- longTime: [],
- pickerOptions: {
- disabledDate,
- },
- dateDefaultShow: '',//日期选择器的日期默到选择的年份
- };
- },
- methods:{
- handleChange() {
- this.longTime = []
- const mon = new Date().getMonth() + 1 // 获取当前月份份
- const day = new Date().getDate() // 获取当前日期
- this.dateDefaultShow = this.searchForm.year + '-' + mon + '-' + day //日期选择器定位当一年前的今日
- },
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。