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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<template>
<div class="app-mob-datetime-picker">
<ion-datetime
class="form-value-content"
:max="max"
:min="min"
:display-format="displayFormat"
:value="curValue"
:placeholder="placeholder"
:readonly="readOnly"
:disabled="disabled"
:cancel-text="$t('cancel_text')"
:done-text="$t('done_text')"
@ionChange="valueChange($event)"
@ionCancel="clear"
@ionFocus="enter"
@ionBlur="leave"
></ion-datetime>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
const moment = require("moment");
@Component({
i18n: {
messages: {
"ZH-CN": {
cancel_text: "取消",
done_text: "完成",
},
"EN-US": {
cancel_text: "cancel",
done_text: "submit",
},
},
}
})
export default class AppDateTimePicker extends Vue {
/**
* 传入值
*
* @type {string}
* @memberof AppDateTimePicker
*/
@Prop() public value!: string;
/**
* 编辑器名称
*
* @type {string}
* @memberof AppDateTimePicker
*/
@Prop() public name?: string;
/**
* 是否禁用
*
* @type {boolean}
* @memberof AppDateTimePicker
*/
@Prop() public disabled?: boolean;
/**
* 是否只读
*
* @type {boolean}
* @memberof AppDateTimePicker
*/
@Prop() public readOnly?: boolean;
/**
* placeholder
*
* @type {boolean}
* @memberof AppDateTimePicker
*/
@Prop() public placeholder?: string;
/**
* 时间精度
* @memberof AppDateTimePicker
*/
@Prop({ default: "YYYY-MM-DD" }) public displayFormat?: string;
/**
* 当前选中值
* @memberof AppDateTimePicker
*/
public curValue: any = "";
/**
* 当前日期
* @type {*}
* @memberof MOBILEENTITY3Canlen
*/
protected currentDate: any = new Date().getFullYear();
/**
* 最小值
* @memberof AppDateTimePicker
*/
public min: any = this.currentDate - 100;
/**
* 最大值
* @memberof AppDateTimePicker
*/
public max: any = this.currentDate + 100;
/**
* 监控值变化
* @memberof AppDateTimePicker
*/
@Watch("value", { immediate: true })
public on_value_change(newVal: string, oldVal: any) {
if (!newVal) {
this.curValue = null;
return;
}
this.curValue = moment(newVal).format(this.displayFormat);
}
/**
* 时间选择改变
*
* @param event{*}
* @memberof AppDateTimePicker
*/
public valueChange(event: any) {
this.curValue = moment(event.detail.value).format(this.displayFormat);
const tempTime = moment(this.value).format(this.displayFormat);
if (Object.is("Invalid date", this.curValue)) {
this.curValue = null;
}
if (Object.is(this.curValue, tempTime)) {
return;
}
this.$emit("change", {
name: this.name,
value: this.curValue,
event: event,
});
}
/**
* 清空值
* @memberof AppDateTimePicker
*/
public clear(event: any) {
this.curValue = null;
this.$emit("change", { name: this.name, value: "", event: event });
}
/**
* 有焦点时事件
*
* @memberof AppDateTimePicker
*/
public enter(e: any) {
this.$emit("enter", { name: this.name, value: this.curValue, event: e });
}
/**
* 失去焦点事件
*
* @memberof AppDateTimePicker
*/
public leave(e: any) {
this.$emit("leave", { name: this.name, value: this.curValue, event: e });
}
}
</script>