element日期选择器datepicker用法大全

格式转换

传递参数时需要转换格式为 “yyyy-MM-dd”
而用element ui日期选择器，默认的格式是
Thu Dec 17 2020 00:00:00 GMT+0800 (中国标准时间)

找到一种完美的解决方法：
在datepicker中添加一句value-format=”yyyy-MM-dd” 即可成功转换格式，

vue3 elePlus Format · Day.js
代码示例如下：

//vue2 eleUI
<el-date-picker
   v-model="value1"
   type="date"
   value-format="yyyy-MM-dd"
   placeholder="选择日期">
</el-date-picker>

//vue3 elePLus
<el-date-picker v-model="value2"
type="daterange" value-format="YYYY-MM-DD" 
start-placeholder="Start Date"
end-placeholder="End Date" />

时间选择范围限制 【ElementUI】日期选择器时间选择范围限制，根据接口灵活设置可选时间。只能选今天之前的时间，或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期_夏天想的博客-CSDN博客_element选择日期范围<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker>选择今天以及今天之后的日期data (){ return {https://blog.csdn.net/qq_33769914/article/details/83856268

选择今天以及今天之后的日期

// vue2
<el-date-picker
       v-model="value1"
       type="date"
       placeholder="选择日期"
       :picker-options="pickerOptions0">
</el-date-picker>


data (){ 
   return {
     pickerOptions0: { 
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 
         }
    },
 
    }
 }


//vue3
	<el-date-picker v-model="value2" type="daterange" value-format="YYYY-MM-DD" start- 
        placeholder="Start Date"
		end-placeholder="End Date" @change="c" :disabled-date="disabledDateFun" />

const disabledDateFun = (time) => {
	const n = new Date()
    if (time.getTime() < n - 3600 * 1000 * 24) { //如果没有后面的- 3600 * 1000 * 24就是不可以选择今天的 
		return true;
	} else {
		return false;
	}
}

选择今天以及今天以前的日期

//vue2
data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;//如果不包括今天。就是return time.getTime() > Date.now() - 24*3600*1000;
          }
        },  
   }     
}

//vue3
const disabledDateFun = (time) => {
const n = new Date()
if (time.getTime() > n) {
		return true;
	} else {
		return false;
	}
};

日期选择器快捷键记录：本周、本月、上一周、上一月 el-date-picker 日期选择器快捷键记录：本周、本月、上一周、上一月、最近一周、最近一月_@安子欣的博客-CSDN博客

pickerOptions: {
        shortcuts: [
          {
            text: "本周",
            onClick(picker) {
              // 获取今天
              const end = new Date();
              // 获取当前周的第一天
              const start = new Date(
                end.getFullYear(),
                end.getMonth(),
                end.getDate() - ((end.getDay() + 6) % 7)
              );
              start.setTime(start.getTime());
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "本月",
            onClick(picker) {
              const end = new Date();
              // 获取当前月的第一天
              const start = new Date(end.getFullYear(), end.getMonth(), 1);
              start.setTime(start.getTime());
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "上一周",
            onClick(picker) {
              const dataValue = new Date();
              const year = dataValue.getFullYear();
              const month = dataValue.getMonth() + 1;
              const day = dataValue.getDate();
              var thisWeekStart; //本周周一的时间
              if (dataValue.getDay() == 0) {
                //周天的情况；
                thisWeekStart =
                  new Date(year + "/" + month + "/" + day).getTime() -
                  (dataValue.getDay() + 6) * 86400000;
              } else {
                thisWeekStart =
                  new Date(year + "/" + month + "/" + day).getTime() -
                  (dataValue.getDay() - 1) * 86400000;
              }
              const prevWeekStart = thisWeekStart - 7 * 86400000; //上周周一的时间
              const prevWeekEnd = thisWeekStart - 1 * 86400000; //上周周日的时间
              const start = new Date(prevWeekStart); //开始时间
              const end = new Date(prevWeekEnd); //结束时间
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "上一月",
            onClick(picker) {
              const oDate = new Date();
              var year = oDate.getFullYear();
              var month = oDate.getMonth();
              var start, end;
              if (month == 0) {
                year--;
                start = new Date(year, 11, 1);
                end = new Date(year, 11, 31);
              } else {
                start = new Date(year, month - 1, 1);
                end = new Date(year, month, 0);
              }
 
              picker.$emit("pick", [start, end]);
            },
          },
          {
            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]);
            },
          },
        ],
      },

选择特定的某一天

日期计算器_时间天数在线查询转换工具

查看那一天离1970.1.1有多少天 换成毫秒

  start.setTime(3600 * 1000 * 24 * 18817);