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
| import dayjs from 'dayjs';
|
| const useTimePicker = Behavior({
| properties: {
| time: {
| type: String,
| observer(value) {
| const t = dayjs(value);
| if (t.$y != NaN) {
| this._setTime(t.format(this.data.timeFormat));
| } else {
| this._setTime(value);
| }
| },
| },
| timeFormat: {
| type: String,
| value: 'YYYY-MM',
| },
| timeMode: {
| type: String,
| value: 'month',
| },
| start: {
| type: String,
| value: '2000-01-01 00:00:00',
| },
| end: {
| type: String,
| value: dayjs().format('YYYY-MM-DD HH:mm:ss'),
| },
| },
| data: {
| timeText: '',
| timeValue: '',
| // start: '2000-01-01 00:00:00',
| // end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
| },
| lifetimes: {
| attached: function () {
| // 在组件实例进入页面节点树时执行
| const t = dayjs().format(this.data.timeFormat);
| this.setData({
| timeText: t,
| timeValue: t,
| });
| this.onTimeInitialValue();
| },
| },
| methods: {
| // 初始值
| onTimeInitialValue() {
| let { timeText, timeValue } = this.data;
| this.triggerEvent(`timeInitValue`, {
| timeText,
| timeValue,
| });
| },
| // 弹出框
| onTimePicker() {
| this.setData({ [`timeVisible`]: true });
| },
| onPicker(e) {
| const { key } = e.currentTarget.dataset;
| this.setData({ [`${key}Visible`]: true });
| },
| onTimePickerChange(e) {
| const { value } = e.detail;
| this.setData({
| [`timeVisible`]: false,
| [`timeValue`]: value,
| [`timeText`]: value,
| });
| this._timeConfirm();
| },
| onTimePickerCancel(e) {
| this.setData({
| [`timeVisible`]: false,
| });
| },
|
| // 确认事件
| _timeConfirm() {
| let { [`timeText`]: text, [`timeValue`]: value } = this.data;
| this.triggerEvent(`timePickerChange`, {
| [`timeText`]: text,
| [`timeValue`]: value,
| });
| },
|
| _setTime(value) {
| this.setData({ timeValue: value, timeText: value });
| },
| },
| });
|
| export { useTimePicker };
|
|
