1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| <template>
| <div>
| <a-date-picker
| :getCalendarContainer="getCalendarContainer"
| v-model="startValue"
| :disabled-date="disabledStartDate"
| show-time
| format="YYYY-MM-DD HH:mm:ss"
| placeholder="Start"
| :open="startOpen"
| size="small"
| @openChange="handleStartOpenChange"
| @change="change"
| />
| -
| <a-date-picker
| :getCalendarContainer="getCalendarContainer"
| v-model="endValue"
| :disabled-date="disabledEndDate"
| show-time
| format="YYYY-MM-DD HH:mm:ss"
| placeholder="End"
| :open="endOpen"
| size="small"
| @change="change"
| @openChange="handleEndOpenChange"
| />
| </div>
| </template>
| <script>
| export default {
| data() {
| return {
| startValue: null,
| endValue: null,
| startOpen: false,
| endOpen: false,
| };
| },
| props: ["value", "getCalendarContainer"],
| model: {
| prop: "value",
| event: "change",
| },
| watch: {
| value(newV) {
| this.resultData = newV;
| },
| },
| computed: {
| resultData: {
| get() {
| return [this.startValue, this.endValue];
| },
| set(value) {
| this.startValue = value[0];
| this.endValue = value[1];
| },
| },
| },
| methods: {
| disabledStartDate(startValue) {
| const endValue = this.endValue;
| if (!startValue || !endValue) {
| return false;
| }
| return startValue.valueOf() > endValue.valueOf();
| },
| disabledEndDate(endValue) {
| const startValue = this.startValue;
| if (!endValue || !startValue) {
| return false;
| }
| return startValue.valueOf() >= endValue.valueOf();
| },
| handleStartOpenChange(open) {
| this.startOpen = open;
| if (!open && !this.endValue) {
| this.endOpen = true;
| }
| },
| handleEndOpenChange(open) {
| this.endOpen = open;
| // if (!open && !this.startValue) {
| // this.startOpen = true;
| // }
| },
| change() {
| this.$emit("change", this.resultData);
| },
| },
| };
| </script>
|
|
