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-pickerv-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-pickerv-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);