146 lines
3.8 KiB
Vue
146 lines
3.8 KiB
Vue
|
<template>
|
||
|
|
<el-date-picker
|
||
|
|
class="ag-date-picker"
|
||
|
|
v-model="dateArr"
|
||
|
|
v-bind="attrs"
|
||
|
|
v-on="inputListeners"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
/**
|
||
|
|
* agDatePicker 时间选择器
|
||
|
|
*/
|
||
|
|
import isEmpty from "../../../src/utils/isEmpty";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "agDatePicker",
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [null, null],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dateArr: [null, null],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
attrs() {
|
||
|
|
return {
|
||
|
|
size: "small",
|
||
|
|
type: "daterange",
|
||
|
|
format: "yyyy/MM/dd",
|
||
|
|
"value-format": "yyyy-MM-dd",
|
||
|
|
"start-placeholder": "开始日期",
|
||
|
|
"end-placeholder": "结束日期",
|
||
|
|
"range-separator": "-",
|
||
|
|
"picker-options": {
|
||
|
|
disabledDate(time) {
|
||
|
|
return (
|
||
|
|
time.getTime() >
|
||
|
|
new Date(new Date().toLocaleDateString()).getTime() +
|
||
|
|
24 * 60 * 60 * 1000 -
|
||
|
|
1
|
||
|
|
);
|
||
|
|
},
|
||
|
|
shortcuts: [
|
||
|
|
{
|
||
|
|
text: "本月",
|
||
|
|
onClick(picker) {
|
||
|
|
const end =
|
||
|
|
new Date(new Date().toLocaleDateString()).getTime() +
|
||
|
|
24 * 60 * 60 * 1000 -
|
||
|
|
1;
|
||
|
|
const time = new Date();
|
||
|
|
time.setDate(1);
|
||
|
|
time.setHours(0);
|
||
|
|
time.setSeconds(0);
|
||
|
|
time.setMinutes(0);
|
||
|
|
var start = time.getTime();
|
||
|
|
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]);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "近三个月",
|
||
|
|
onClick(picker) {
|
||
|
|
const end = new Date();
|
||
|
|
const start = new Date();
|
||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||
|
|
picker.$emit("pick", [start, end]);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "近六个月",
|
||
|
|
onClick(picker) {
|
||
|
|
const end = new Date();
|
||
|
|
const start = new Date();
|
||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
|
||
|
|
picker.$emit("pick", [start, end]);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "最近一年",
|
||
|
|
onClick(picker) {
|
||
|
|
const end = new Date();
|
||
|
|
const start = new Date();
|
||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
|
||
|
|
picker.$emit("pick", [start, end]);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}, //多选日期
|
||
|
|
...this.$attrs,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
// 所有父级事件
|
||
|
|
inputListeners() {
|
||
|
|
return Object.assign({}, this.$listeners, {
|
||
|
|
input: (value) => {
|
||
|
|
let date1 = "";
|
||
|
|
let date2 = "";
|
||
|
|
|
||
|
|
if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
|
||
|
|
date1 = `${value[0]} 00:00:00`;
|
||
|
|
date2 = `${value[1]} 23:59:59`;
|
||
|
|
}
|
||
|
|
this.$emit("input", [date1, date2]);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value: {
|
||
|
|
handler(newVal) {
|
||
|
|
if (!Array.isArray(newVal)) {
|
||
|
|
throw new Error("agDatePicker date请传入数组");
|
||
|
|
}
|
||
|
|
|
||
|
|
let [date1, date2] = newVal;
|
||
|
|
if (!this.dateArr) {
|
||
|
|
this.dateArr = [date1 || "", date2 || ""];
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.$set(this.dateArr, 0, date1 || "");
|
||
|
|
this.$set(this.dateArr, 1, date2 || "");
|
||
|
|
},
|
||
|
|
immediate: true,
|
||
|
|
deep: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|