elementUI 2
、Vue2
<el-date-picker
v-model="timeRange"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="mini"
style="width: 250px;"
:picker-options="pickerOptions"
>
</el-date-picker>
import dayjs from "dayjs";
...
data() {
let _startDate = null;
return {
timeRange:[],
pickerOptions: {
onPick({ minDate }) {
_startDate = minDate; // 捕获首次选择的日期
},
disabledDate: (time) => {
if (!_startDate) { return false; } //未选择起始时间,不做限制
// 获取当前日期
let now = dayjs(_startDate);
const threeMonthsAgo = now.add(-3, "month"),
threeMonthsAgo2 = now.add(3, "month");
// 禁用三个月前后的日期
return ( time.getTime() < threeMonthsAgo.toDate().getTime()
|| time.getTime() > threeMonthsAgo2.toDate().getTime() );
},
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);
let now = dayjs();
let start = now.add(-1, "month");
let end = now;
picker.$emit("pick", [start.toDate(), end.toDate()]);
},
},
{
text: "本月",
onClick(picker) {
let now = dayjs();
let start = dayjs(now.format("YYYY-MM") + "-01");
picker.$emit("pick", [start.toDate(), now.toDate()]);
},
},
],
},
}
}