学无先后,达者为师

网站首页 编程语言 正文

Element框架里日期选择器限制时间,最多选31天

作者:别凶小晗. 更新时间: 2022-05-15 编程语言
<el-form-item style="margin-bottom: 0px" label="选择时间">
              <el-date-picker
                v-model="dataTime"
                align="right"
                type="datetimerange"
                range-separator="至"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-value="timeDefaultShow"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
</el-form-item>
<script>
	export default {
		data(){
			return{
				dataTime: [],
				pickerOptions: {
			        onPick: ({ maxDate, minDate }) => {
			          this.pickerMinDate = minDate.getTime();
			          if (maxDate) {
			            this.pickerMinDate = "";
			          }
			        },
			        disabledDate: (time) => {
			          if (this.pickerMinDate) {
			            const limitRange = 31 * 24 * 3600 * 1000; // 31天范围内可选
			            let maxTime = this.pickerMinDate + limitRange;
			            let minTime = this.pickerMinDate - limitRange;
			            return (
			              time.getTime() > maxTime ||
			              time.getTime() < minTime ||
			              time.getTime() > Date.now() - 1 * 24 * 3600 * 1000
			            );
			          } else {
			            return time.getTime() > Date.now() + 0 * 24 * 3600 * 1000;
			          }
			        },
			        shortcuts: [
			          {
			            text: "最近一周",
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			              picker.$emit("pick", [start, end]);
			            },
			          },
			          {
			            text: "最近一个月",
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			              picker.$emit("pick", [start, end]);
			            },
			          },
			        ],
			    },
			}
		},
		created(){
			const vm = this;
      		vm.timeDefaultShow = new Date();
     		vm.timeDefaultShow.setMonth(new Date().getMonth() - 1);
		},
	}
</script>

图片展示:

在这里插入图片描述

原文链接:https://blog.csdn.net/Wang_MengHan/article/details/122308539

栏目分类
最近更新