日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

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

欄目分類
最近更新