@vtj/materials 0.10.6 → 0.10.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/dist/assets/antdv/index.umd.js +2 -2
  2. package/dist/assets/charts/index.umd.js +2 -2
  3. package/dist/assets/element/index.umd.js +2 -2
  4. package/dist/assets/ui/index.umd.js +2 -2
  5. package/dist/assets/uni-h5/index.umd.js +3 -3
  6. package/dist/assets/uni-ui/index.umd.js +3 -3
  7. package/dist/assets/vant/index.umd.js +2 -2
  8. package/dist/deps/@vtj/charts/index.umd.js +2 -2
  9. package/dist/deps/@vtj/icons/index.umd.js +2 -2
  10. package/dist/deps/@vtj/ui/index.umd.js +3 -3
  11. package/dist/deps/@vtj/utils/index.umd.js +20 -20
  12. package/dist/deps/@vueuse/core/index.iife.min.js +1 -1
  13. package/dist/deps/uni-ui/index.umd.js +1 -1
  14. package/dist/deps/uni-ui/style.css +1 -1
  15. package/package.json +7 -7
  16. package/src/uni-h5/components/input.ts +2 -2
  17. package/src/uni-h5/components/scrollView.ts +3 -3
  18. package/src/uni-h5/components/video.ts +1 -1
  19. package/src/uni-ui/components/badge.ts +1 -5
  20. package/src/uni-ui/components/breadcrumb.ts +1 -20
  21. package/src/uni-ui/components/collapse.ts +22 -23
  22. package/src/uni-ui/components/grid.ts +0 -9
  23. package/src/uni-ui/components/group.ts +1 -10
  24. package/src/uni-ui/components/index.ts +4 -4
  25. package/src/uni-ui/components/popup.ts +10 -2
  26. package/src/uni-ui/components/swiperDot.ts +21 -7
  27. package/src/uni-ui/components/table.ts +9 -3
  28. package/src/uni-ui/components/transition.ts +10 -1
  29. package/src/uni-ui/index.ts +19 -44
  30. package/src/uni-ui/lib/uni-collapse/uni-collapse.vue +153 -0
  31. package/src/uni-ui/lib/uni-collapse-item/uni-collapse-item.vue +425 -0
  32. package/src/uni-ui/lib/uni-data-picker/keypress.js +45 -0
  33. package/src/uni-ui/lib/uni-data-picker/uni-data-picker.vue +604 -0
  34. package/src/uni-ui/lib/uni-data-pickerview/uni-data-picker.js +622 -0
  35. package/src/uni-ui/lib/uni-data-pickerview/uni-data-pickerview.css +76 -0
  36. package/src/uni-ui/lib/uni-data-pickerview/uni-data-pickerview.vue +335 -0
  37. package/src/uni-ui/lib/uni-datetime-picker/calendar-item.vue +181 -170
  38. package/src/uni-ui/lib/uni-datetime-picker/calendar.vue +977 -939
  39. package/src/uni-ui/lib/uni-datetime-picker/time-picker.vue +1024 -932
  40. package/src/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue +15 -17
  41. package/src/uni-ui/lib/uni-datetime-picker/util.js +419 -392
  42. package/src/uni-ui/lib/uni-fav/i18n/en.json +4 -0
  43. package/src/uni-ui/lib/uni-fav/i18n/index.js +8 -0
  44. package/src/uni-ui/lib/uni-fav/i18n/zh-Hans.json +4 -0
  45. package/src/uni-ui/lib/uni-fav/i18n/zh-Hant.json +4 -0
  46. package/src/uni-ui/lib/uni-fav/uni-fav.vue +170 -0
  47. package/src/uni-ui/lib/uni-file-picker/choose-and-upload-file.js +280 -0
  48. package/src/uni-ui/lib/uni-file-picker/uni-file-picker.vue +668 -0
  49. package/src/uni-ui/lib/uni-file-picker/upload-file.vue +325 -0
  50. package/src/uni-ui/lib/uni-file-picker/upload-image.vue +292 -0
  51. package/src/uni-ui/lib/uni-file-picker/utils.js +110 -0
  52. package/src/uni-ui/lib/uni-grid/uni-grid.vue +148 -0
  53. package/src/uni-ui/lib/uni-indexed-list/uni-indexed-list-item.vue +152 -128
  54. package/src/uni-ui/lib/uni-indexed-list/uni-indexed-list.vue +50 -50
  55. package/src/uni-ui/lib/uni-load-more/i18n/en.json +5 -0
  56. package/src/uni-ui/lib/uni-load-more/i18n/index.js +8 -0
  57. package/src/uni-ui/lib/uni-load-more/i18n/zh-Hans.json +5 -0
  58. package/src/uni-ui/lib/uni-load-more/i18n/zh-Hant.json +5 -0
  59. package/src/uni-ui/lib/uni-load-more/uni-load-more.vue +456 -0
  60. package/src/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue +484 -0
  61. package/src/uni-ui/lib/uni-popup/uni-popup.vue +4 -4
  62. package/src/uni-ui/lib/uni-popup-message/uni-popup-message.vue +149 -0
  63. package/src/uni-ui/lib/uni-rate/uni-rate.vue +362 -343
  64. package/src/uni-ui/lib/uni-row/uni-row.vue +193 -0
  65. package/src/uni-ui/lib/uni-search-bar/i18n/en.json +4 -0
  66. package/src/uni-ui/lib/uni-search-bar/i18n/index.js +8 -0
  67. package/src/uni-ui/lib/uni-search-bar/i18n/zh-Hans.json +4 -0
  68. package/src/uni-ui/lib/uni-search-bar/i18n/zh-Hant.json +4 -0
  69. package/src/uni-ui/lib/uni-search-bar/uni-search-bar.vue +339 -0
  70. package/src/uni-ui/lib/uni-swipe-action-item/bindingx.js +294 -285
  71. package/src/uni-ui/lib/uni-swipe-action-item/uni-swipe-action-item.vue +8 -9
  72. package/src/uni-ui/lib/uni-th/filter-dropdown.vue +551 -503
  73. package/src/uni-ui/lib/uni-tr/table-checkbox.vue +165 -163
  74. package/src/uni-ui/lib/uni-tr/uni-tr.vue +6 -6
  75. package/src/uni-ui/lib/uni-transition/createAnimation.js +131 -0
  76. package/src/uni-ui/lib/uni-transition/uni-transition.vue +310 -0
  77. package/src/version.ts +2 -2
@@ -1,940 +1,1032 @@
1
1
  <template>
2
- <view class="uni-datetime-picker">
3
- <view @click="initTimePicker">
4
- <slot>
5
- <view class="uni-datetime-picker-timebox-pointer"
6
- :class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}">
7
- <text class="uni-datetime-picker-text">{{time}}</text>
8
- <view v-if="!time" class="uni-datetime-picker-time">
9
- <text class="uni-datetime-picker-text">{{selectTimeText}}</text>
10
- </view>
11
- </view>
12
- </slot>
13
- </view>
14
- <view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
15
- <view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
16
- :style="fixNvueBug">
17
- <view class="uni-title">
18
- <text class="uni-datetime-picker-text">{{selectTimeText}}</text>
19
- </view>
20
- <view v-if="dateShow" class="uni-datetime-picker__container-box">
21
- <picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
22
- @change="bindDateChange">
23
- <picker-view-column>
24
- <view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
25
- <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
26
- </view>
27
- </picker-view-column>
28
- <picker-view-column>
29
- <view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index">
30
- <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
31
- </view>
32
- </picker-view-column>
33
- <picker-view-column>
34
- <view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index">
35
- <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
36
- </view>
37
- </picker-view-column>
38
- </picker-view>
39
- <!-- 兼容 nvue 不支持伪类 -->
40
- <text class="uni-datetime-picker-sign sign-left">-</text>
41
- <text class="uni-datetime-picker-sign sign-right">-</text>
42
- </view>
43
- <view v-if="timeShow" class="uni-datetime-picker__container-box">
44
- <picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
45
- :indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
46
- <picker-view-column>
47
- <view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
48
- <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
49
- </view>
50
- </picker-view-column>
51
- <picker-view-column>
52
- <view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
53
- <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
54
- </view>
55
- </picker-view-column>
56
- <picker-view-column v-if="!hideSecond">
57
- <view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
58
- <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
59
- </view>
60
- </picker-view-column>
61
- </picker-view>
62
- <!-- 兼容 nvue 不支持伪类 -->
63
- <text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
64
- <text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text>
65
- </view>
66
- <view class="uni-datetime-picker-btn">
67
- <view @click="clearTime">
68
- <text class="uni-datetime-picker-btn-text">{{clearText}}</text>
69
- </view>
70
- <view class="uni-datetime-picker-btn-group">
71
- <view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
72
- <text class="uni-datetime-picker-btn-text">{{cancelText}}</text>
73
- </view>
74
- <view @click="setTime">
75
- <text class="uni-datetime-picker-btn-text">{{okText}}</text>
76
- </view>
77
- </view>
78
- </view>
79
- </view>
80
- </view>
2
+ <view class="uni-datetime-picker">
3
+ <view @click="initTimePicker">
4
+ <slot>
5
+ <view
6
+ class="uni-datetime-picker-timebox-pointer"
7
+ :class="{
8
+ 'uni-datetime-picker-disabled': disabled,
9
+ 'uni-datetime-picker-timebox': border
10
+ }">
11
+ <text class="uni-datetime-picker-text">{{ time }}</text>
12
+ <view v-if="!time" class="uni-datetime-picker-time">
13
+ <text class="uni-datetime-picker-text">{{ selectTimeText }}</text>
14
+ </view>
15
+ </view>
16
+ </slot>
17
+ </view>
18
+ <view
19
+ v-if="visible"
20
+ id="mask"
21
+ class="uni-datetime-picker-mask"
22
+ @click="tiggerTimePicker"></view>
23
+ <view
24
+ v-if="visible"
25
+ class="uni-datetime-picker-popup"
26
+ :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
27
+ :style="fixNvueBug">
28
+ <view class="uni-title">
29
+ <text class="uni-datetime-picker-text">{{ selectTimeText }}</text>
30
+ </view>
31
+ <view v-if="dateShow" class="uni-datetime-picker__container-box">
32
+ <picker-view
33
+ class="uni-datetime-picker-view"
34
+ :indicator-style="indicatorStyle"
35
+ :value="ymd"
36
+ @change="bindDateChange">
37
+ <picker-view-column>
38
+ <view
39
+ class="uni-datetime-picker-item"
40
+ v-for="(item, index) in years"
41
+ :key="index">
42
+ <text class="uni-datetime-picker-item">{{
43
+ lessThanTen(item)
44
+ }}</text>
45
+ </view>
46
+ </picker-view-column>
47
+ <picker-view-column>
48
+ <view
49
+ class="uni-datetime-picker-item"
50
+ v-for="(item, index) in months"
51
+ :key="index">
52
+ <text class="uni-datetime-picker-item">{{
53
+ lessThanTen(item)
54
+ }}</text>
55
+ </view>
56
+ </picker-view-column>
57
+ <picker-view-column>
58
+ <view
59
+ class="uni-datetime-picker-item"
60
+ v-for="(item, index) in days"
61
+ :key="index">
62
+ <text class="uni-datetime-picker-item">{{
63
+ lessThanTen(item)
64
+ }}</text>
65
+ </view>
66
+ </picker-view-column>
67
+ </picker-view>
68
+ <!-- 兼容 nvue 不支持伪类 -->
69
+ <text class="uni-datetime-picker-sign sign-left">-</text>
70
+ <text class="uni-datetime-picker-sign sign-right">-</text>
71
+ </view>
72
+ <view v-if="timeShow" class="uni-datetime-picker__container-box">
73
+ <picker-view
74
+ class="uni-datetime-picker-view"
75
+ :class="[hideSecond ? 'time-hide-second' : '']"
76
+ :indicator-style="indicatorStyle"
77
+ :value="hms"
78
+ @change="bindTimeChange">
79
+ <picker-view-column>
80
+ <view
81
+ class="uni-datetime-picker-item"
82
+ v-for="(item, index) in hours"
83
+ :key="index">
84
+ <text class="uni-datetime-picker-item">{{
85
+ lessThanTen(item)
86
+ }}</text>
87
+ </view>
88
+ </picker-view-column>
89
+ <picker-view-column>
90
+ <view
91
+ class="uni-datetime-picker-item"
92
+ v-for="(item, index) in minutes"
93
+ :key="index">
94
+ <text class="uni-datetime-picker-item">{{
95
+ lessThanTen(item)
96
+ }}</text>
97
+ </view>
98
+ </picker-view-column>
99
+ <picker-view-column v-if="!hideSecond">
100
+ <view
101
+ class="uni-datetime-picker-item"
102
+ v-for="(item, index) in seconds"
103
+ :key="index">
104
+ <text class="uni-datetime-picker-item">{{
105
+ lessThanTen(item)
106
+ }}</text>
107
+ </view>
108
+ </picker-view-column>
109
+ </picker-view>
110
+ <!-- 兼容 nvue 不支持伪类 -->
111
+ <text
112
+ class="uni-datetime-picker-sign"
113
+ :class="[hideSecond ? 'sign-center' : 'sign-left']"
114
+ >:</text
115
+ >
116
+ <text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right"
117
+ >:</text
118
+ >
119
+ </view>
120
+ <view class="uni-datetime-picker-btn">
121
+ <view @click="clearTime">
122
+ <text class="uni-datetime-picker-btn-text">{{ clearText }}</text>
123
+ </view>
124
+ <view class="uni-datetime-picker-btn-group">
125
+ <view class="uni-datetime-picker-cancel" @click="tiggerTimePicker">
126
+ <text class="uni-datetime-picker-btn-text">{{ cancelText }}</text>
127
+ </view>
128
+ <view @click="setTime">
129
+ <text class="uni-datetime-picker-btn-text">{{ okText }}</text>
130
+ </view>
131
+ </view>
132
+ </view>
133
+ </view>
134
+ </view>
81
135
  </template>
82
136
 
83
137
  <script>
84
- import {
85
- initVueI18n
86
- } from '@dcloudio/uni-i18n'
87
- import i18nMessages from './i18n/index.js'
88
- const {
89
- t
90
- } = initVueI18n(i18nMessages)
91
- import {
92
- fixIosDateFormat
93
- } from './util'
94
-
95
- /**
96
- * DatetimePicker 时间选择器
97
- * @description 可以同时选择日期和时间的选择器
98
- * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
99
- * @property {String} type = [datetime | date | time] 显示模式
100
- * @property {Boolean} multiple = [true|false] 是否多选
101
- * @property {String|Number} value 默认值
102
- * @property {String|Number} start 起始日期或时间
103
- * @property {String|Number} end 起始日期或时间
104
- * @property {String} return-type = [timestamp | string]
105
- * @event {Function} change 选中发生变化触发
106
- */
107
-
108
- export default {
109
- name: 'UniDatetimePicker',
110
- data() {
111
- return {
112
- indicatorStyle: `height: 50px;`,
113
- visible: false,
114
- fixNvueBug: {},
115
- dateShow: true,
116
- timeShow: true,
117
- title: '日期和时间',
118
- // 输入框当前时间
119
- time: '',
120
- // 当前的年月日时分秒
121
- year: 1920,
122
- month: 0,
123
- day: 0,
124
- hour: 0,
125
- minute: 0,
126
- second: 0,
127
- // 起始时间
128
- startYear: 1920,
129
- startMonth: 1,
130
- startDay: 1,
131
- startHour: 0,
132
- startMinute: 0,
133
- startSecond: 0,
134
- // 结束时间
135
- endYear: 2120,
136
- endMonth: 12,
137
- endDay: 31,
138
- endHour: 23,
139
- endMinute: 59,
140
- endSecond: 59,
141
- }
142
- },
143
- options: {
144
- // #ifdef MP-TOUTIAO
145
- virtualHost: false,
146
- // #endif
147
- // #ifndef MP-TOUTIAO
148
- virtualHost: true
149
- // #endif
150
- },
151
- props: {
152
- type: {
153
- type: String,
154
- default: 'datetime'
155
- },
156
- value: {
157
- type: [String, Number],
158
- default: ''
159
- },
160
- modelValue: {
161
- type: [String, Number],
162
- default: ''
163
- },
164
- start: {
165
- type: [Number, String],
166
- default: ''
167
- },
168
- end: {
169
- type: [Number, String],
170
- default: ''
171
- },
172
- returnType: {
173
- type: String,
174
- default: 'string'
175
- },
176
- disabled: {
177
- type: [Boolean, String],
178
- default: false
179
- },
180
- border: {
181
- type: [Boolean, String],
182
- default: true
183
- },
184
- hideSecond: {
185
- type: [Boolean, String],
186
- default: false
187
- }
188
- },
189
- watch: {
190
- // #ifndef VUE3
191
- value: {
192
- handler(newVal) {
193
- if (newVal) {
194
- this.parseValue(fixIosDateFormat(newVal))
195
- this.initTime(false)
196
- } else {
197
- this.time = ''
198
- this.parseValue(Date.now())
199
- }
200
- },
201
- immediate: true
202
- },
203
- // #endif
204
- // #ifdef VUE3
205
- modelValue: {
206
- handler(newVal) {
207
- if (newVal) {
208
- this.parseValue(fixIosDateFormat(newVal))
209
- this.initTime(false)
210
- } else {
211
- this.time = ''
212
- this.parseValue(Date.now())
213
- }
214
- },
215
- immediate: true
216
- },
217
- // #endif
218
- type: {
219
- handler(newValue) {
220
- if (newValue === 'date') {
221
- this.dateShow = true
222
- this.timeShow = false
223
- this.title = '日期'
224
- } else if (newValue === 'time') {
225
- this.dateShow = false
226
- this.timeShow = true
227
- this.title = '时间'
228
- } else {
229
- this.dateShow = true
230
- this.timeShow = true
231
- this.title = '日期和时间'
232
- }
233
- },
234
- immediate: true
235
- },
236
- start: {
237
- handler(newVal) {
238
- this.parseDatetimeRange(fixIosDateFormat(newVal), 'start')
239
- },
240
- immediate: true
241
- },
242
- end: {
243
- handler(newVal) {
244
- this.parseDatetimeRange(fixIosDateFormat(newVal), 'end')
245
- },
246
- immediate: true
247
- },
248
-
249
- // 月、日、时、分、秒可选范围变化后,检查当前值是否在范围内,不在则当前值重置为可选范围第一项
250
- months(newVal) {
251
- this.checkValue('month', this.month, newVal)
252
- },
253
- days(newVal) {
254
- this.checkValue('day', this.day, newVal)
255
- },
256
- hours(newVal) {
257
- this.checkValue('hour', this.hour, newVal)
258
- },
259
- minutes(newVal) {
260
- this.checkValue('minute', this.minute, newVal)
261
- },
262
- seconds(newVal) {
263
- this.checkValue('second', this.second, newVal)
264
- }
265
- },
266
- computed: {
267
- // 当前年、月、日、时、分、秒选择范围
268
- years() {
269
- return this.getCurrentRange('year')
270
- },
271
-
272
- months() {
273
- return this.getCurrentRange('month')
274
- },
275
-
276
- days() {
277
- return this.getCurrentRange('day')
278
- },
279
-
280
- hours() {
281
- return this.getCurrentRange('hour')
282
- },
283
-
284
- minutes() {
285
- return this.getCurrentRange('minute')
286
- },
287
-
288
- seconds() {
289
- return this.getCurrentRange('second')
290
- },
291
-
292
- // picker 当前值数组
293
- ymd() {
294
- return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
295
- },
296
- hms() {
297
- return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
298
- },
299
-
300
- // 当前 date 是 start
301
- currentDateIsStart() {
302
- return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
303
- },
304
-
305
- // 当前 date 是 end
306
- currentDateIsEnd() {
307
- return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
308
- },
309
-
310
- // 当前年、月、日、时、分、秒的最小值和最大值
311
- minYear() {
312
- return this.startYear
313
- },
314
- maxYear() {
315
- return this.endYear
316
- },
317
- minMonth() {
318
- if (this.year === this.startYear) {
319
- return this.startMonth
320
- } else {
321
- return 1
322
- }
323
- },
324
- maxMonth() {
325
- if (this.year === this.endYear) {
326
- return this.endMonth
327
- } else {
328
- return 12
329
- }
330
- },
331
- minDay() {
332
- if (this.year === this.startYear && this.month === this.startMonth) {
333
- return this.startDay
334
- } else {
335
- return 1
336
- }
337
- },
338
- maxDay() {
339
- if (this.year === this.endYear && this.month === this.endMonth) {
340
- return this.endDay
341
- } else {
342
- return this.daysInMonth(this.year, this.month)
343
- }
344
- },
345
- minHour() {
346
- if (this.type === 'datetime') {
347
- if (this.currentDateIsStart) {
348
- return this.startHour
349
- } else {
350
- return 0
351
- }
352
- }
353
- if (this.type === 'time') {
354
- return this.startHour
355
- }
356
- },
357
- maxHour() {
358
- if (this.type === 'datetime') {
359
- if (this.currentDateIsEnd) {
360
- return this.endHour
361
- } else {
362
- return 23
363
- }
364
- }
365
- if (this.type === 'time') {
366
- return this.endHour
367
- }
368
- },
369
- minMinute() {
370
- if (this.type === 'datetime') {
371
- if (this.currentDateIsStart && this.hour === this.startHour) {
372
- return this.startMinute
373
- } else {
374
- return 0
375
- }
376
- }
377
- if (this.type === 'time') {
378
- if (this.hour === this.startHour) {
379
- return this.startMinute
380
- } else {
381
- return 0
382
- }
383
- }
384
- },
385
- maxMinute() {
386
- if (this.type === 'datetime') {
387
- if (this.currentDateIsEnd && this.hour === this.endHour) {
388
- return this.endMinute
389
- } else {
390
- return 59
391
- }
392
- }
393
- if (this.type === 'time') {
394
- if (this.hour === this.endHour) {
395
- return this.endMinute
396
- } else {
397
- return 59
398
- }
399
- }
400
- },
401
- minSecond() {
402
- if (this.type === 'datetime') {
403
- if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
404
- return this.startSecond
405
- } else {
406
- return 0
407
- }
408
- }
409
- if (this.type === 'time') {
410
- if (this.hour === this.startHour && this.minute === this.startMinute) {
411
- return this.startSecond
412
- } else {
413
- return 0
414
- }
415
- }
416
- },
417
- maxSecond() {
418
- if (this.type === 'datetime') {
419
- if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
420
- return this.endSecond
421
- } else {
422
- return 59
423
- }
424
- }
425
- if (this.type === 'time') {
426
- if (this.hour === this.endHour && this.minute === this.endMinute) {
427
- return this.endSecond
428
- } else {
429
- return 59
430
- }
431
- }
432
- },
433
-
434
- /**
435
- * for i18n
436
- */
437
- selectTimeText() {
438
- return t("uni-datetime-picker.selectTime")
439
- },
440
- okText() {
441
- return t("uni-datetime-picker.ok")
442
- },
443
- clearText() {
444
- return t("uni-datetime-picker.clear")
445
- },
446
- cancelText() {
447
- return t("uni-datetime-picker.cancel")
448
- }
449
- },
450
-
451
- mounted() {
452
- // #ifdef APP-NVUE
453
- const res = uni.getSystemInfoSync();
454
- this.fixNvueBug = {
455
- top: res.windowHeight / 2,
456
- left: res.windowWidth / 2
457
- }
458
- // #endif
459
- },
460
-
461
- methods: {
462
- /**
463
- * @param {Object} item
464
- * 小于 10 在前面加个 0
465
- */
466
-
467
- lessThanTen(item) {
468
- return item < 10 ? '0' + item : item
469
- },
470
-
471
- /**
472
- * 解析时分秒字符串,例如:00:00:00
473
- * @param {String} timeString
474
- */
475
- parseTimeType(timeString) {
476
- if (timeString) {
477
- let timeArr = timeString.split(':')
478
- this.hour = Number(timeArr[0])
479
- this.minute = Number(timeArr[1])
480
- this.second = Number(timeArr[2])
481
- }
482
- },
483
-
484
- /**
485
- * 解析选择器初始值,类型可以是字符串、时间戳,例如:2000-10-02、'08:30:00'、 1610695109000
486
- * @param {String | Number} datetime
487
- */
488
- initPickerValue(datetime) {
489
- let defaultValue = null
490
- if (datetime) {
491
- defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
492
- } else {
493
- defaultValue = Date.now()
494
- defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
495
- }
496
- this.parseValue(defaultValue)
497
- },
498
-
499
- /**
500
- * 初始值规则:
501
- * - 用户设置初始值 value
502
- * - 设置了起始时间 start、终止时间 end,并 start < value < end,初始值为 value, 否则初始值为 start
503
- * - 只设置了起始时间 start,并 start < value,初始值为 value,否则初始值为 start
504
- * - 只设置了终止时间 end,并 value < end,初始值为 value,否则初始值为 end
505
- * - 无起始终止时间,则初始值为 value
506
- * - 无初始值 value,则初始值为当前本地时间 Date.now()
507
- * @param {Object} value
508
- * @param {Object} dateBase
509
- */
510
- compareValueWithStartAndEnd(value, start, end) {
511
- let winner = null
512
- value = this.superTimeStamp(value)
513
- start = this.superTimeStamp(start)
514
- end = this.superTimeStamp(end)
515
-
516
- if (start && end) {
517
- if (value < start) {
518
- winner = new Date(start)
519
- } else if (value > end) {
520
- winner = new Date(end)
521
- } else {
522
- winner = new Date(value)
523
- }
524
- } else if (start && !end) {
525
- winner = start <= value ? new Date(value) : new Date(start)
526
- } else if (!start && end) {
527
- winner = value <= end ? new Date(value) : new Date(end)
528
- } else {
529
- winner = new Date(value)
530
- }
531
-
532
- return winner
533
- },
534
-
535
- /**
536
- * 转换为可比较的时间戳,接受日期、时分秒、时间戳
537
- * @param {Object} value
538
- */
539
- superTimeStamp(value) {
540
- let dateBase = ''
541
- if (this.type === 'time' && value && typeof value === 'string') {
542
- const now = new Date()
543
- const year = now.getFullYear()
544
- const month = now.getMonth() + 1
545
- const day = now.getDate()
546
- dateBase = year + '/' + month + '/' + day + ' '
547
- }
548
- if (Number(value)) {
549
- value = parseInt(value)
550
- dateBase = 0
551
- }
552
- return this.createTimeStamp(dateBase + value)
553
- },
554
-
555
- /**
556
- * 解析默认值 value,字符串、时间戳
557
- * @param {Object} defaultTime
558
- */
559
- parseValue(value) {
560
- if (!value) {
561
- return
562
- }
563
- if (this.type === 'time' && typeof value === "string") {
564
- this.parseTimeType(value)
565
- } else {
566
- let defaultDate = null
567
- defaultDate = new Date(value)
568
- if (this.type !== 'time') {
569
- this.year = defaultDate.getFullYear()
570
- this.month = defaultDate.getMonth() + 1
571
- this.day = defaultDate.getDate()
572
- }
573
- if (this.type !== 'date') {
574
- this.hour = defaultDate.getHours()
575
- this.minute = defaultDate.getMinutes()
576
- this.second = defaultDate.getSeconds()
577
- }
578
- }
579
- if (this.hideSecond) {
580
- this.second = 0
581
- }
582
- },
583
-
584
- /**
585
- * 解析可选择时间范围 start、end,年月日字符串、时间戳
586
- * @param {Object} defaultTime
587
- */
588
- parseDatetimeRange(point, pointType) {
589
- // 时间为空,则重置为初始值
590
- if (!point) {
591
- if (pointType === 'start') {
592
- this.startYear = 1920
593
- this.startMonth = 1
594
- this.startDay = 1
595
- this.startHour = 0
596
- this.startMinute = 0
597
- this.startSecond = 0
598
- }
599
- if (pointType === 'end') {
600
- this.endYear = 2120
601
- this.endMonth = 12
602
- this.endDay = 31
603
- this.endHour = 23
604
- this.endMinute = 59
605
- this.endSecond = 59
606
- }
607
- return
608
- }
609
- if (this.type === 'time') {
610
- const pointArr = point.split(':')
611
- this[pointType + 'Hour'] = Number(pointArr[0])
612
- this[pointType + 'Minute'] = Number(pointArr[1])
613
- this[pointType + 'Second'] = Number(pointArr[2])
614
- } else {
615
- if (!point) {
616
- pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
617
- return
618
- }
619
- if (Number(point)) {
620
- point = parseInt(point)
621
- }
622
- // datetime 的 end 没有时分秒, 则不限制
623
- const hasTime = /[0-9]:[0-9]/
624
- if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(
625
- point)) {
626
- point = point + ' 23:59:59'
627
- }
628
- const pointDate = new Date(point)
629
- this[pointType + 'Year'] = pointDate.getFullYear()
630
- this[pointType + 'Month'] = pointDate.getMonth() + 1
631
- this[pointType + 'Day'] = pointDate.getDate()
632
- if (this.type === 'datetime') {
633
- this[pointType + 'Hour'] = pointDate.getHours()
634
- this[pointType + 'Minute'] = pointDate.getMinutes()
635
- this[pointType + 'Second'] = pointDate.getSeconds()
636
- }
637
- }
638
- },
639
-
640
- // 获取 年、月、日、时、分、秒 当前可选范围
641
- getCurrentRange(value) {
642
- const range = []
643
- for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
644
- range.push(i)
645
- }
646
- return range
647
- },
648
-
649
- // 字符串首字母大写
650
- capitalize(str) {
651
- return str.charAt(0).toUpperCase() + str.slice(1)
652
- },
653
-
654
- // 检查当前值是否在范围内,不在则当前值重置为可选范围第一项
655
- checkValue(name, value, values) {
656
- if (values.indexOf(value) === -1) {
657
- this[name] = values[0]
658
- }
659
- },
660
-
661
- // 每个月的实际天数
662
- daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
663
- return new Date(year, month, 0).getDate();
664
- },
665
-
666
- /**
667
- * 生成时间戳
668
- * @param {Object} time
669
- */
670
- createTimeStamp(time) {
671
- if (!time) return
672
- if (typeof time === "number") {
673
- return time
674
- } else {
675
- time = time.replace(/-/g, '/')
676
- if (this.type === 'date') {
677
- time = time + ' ' + '00:00:00'
678
- }
679
- return Date.parse(time)
680
- }
681
- },
682
-
683
- /**
684
- * 生成日期或时间的字符串
685
- */
686
- createDomSting() {
687
- const yymmdd = this.year +
688
- '-' +
689
- this.lessThanTen(this.month) +
690
- '-' +
691
- this.lessThanTen(this.day)
692
-
693
- let hhmmss = this.lessThanTen(this.hour) +
694
- ':' +
695
- this.lessThanTen(this.minute)
696
-
697
- if (!this.hideSecond) {
698
- hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
699
- }
700
-
701
- if (this.type === 'date') {
702
- return yymmdd
703
- } else if (this.type === 'time') {
704
- return hhmmss
705
- } else {
706
- return yymmdd + ' ' + hhmmss
707
- }
708
- },
709
-
710
- /**
711
- * 初始化返回值,并抛出 change 事件
712
- */
713
- initTime(emit = true) {
714
- this.time = this.createDomSting()
715
- if (!emit) return
716
- if (this.returnType === 'timestamp' && this.type !== 'time') {
717
- this.$emit('change', this.createTimeStamp(this.time))
718
- this.$emit('input', this.createTimeStamp(this.time))
719
- this.$emit('update:modelValue', this.createTimeStamp(this.time))
720
- } else {
721
- this.$emit('change', this.time)
722
- this.$emit('input', this.time)
723
- this.$emit('update:modelValue', this.time)
724
- }
725
- },
726
-
727
- /**
728
- * 用户选择日期或时间更新 data
729
- * @param {Object} e
730
- */
731
- bindDateChange(e) {
732
- const val = e.detail.value
733
- this.year = this.years[val[0]]
734
- this.month = this.months[val[1]]
735
- this.day = this.days[val[2]]
736
- },
737
- bindTimeChange(e) {
738
- const val = e.detail.value
739
- this.hour = this.hours[val[0]]
740
- this.minute = this.minutes[val[1]]
741
- this.second = this.seconds[val[2]]
742
- },
743
-
744
- /**
745
- * 初始化弹出层
746
- */
747
- initTimePicker() {
748
- if (this.disabled) return
749
- const value = fixIosDateFormat(this.time)
750
- this.initPickerValue(value)
751
- this.visible = !this.visible
752
- },
753
-
754
- /**
755
- * 触发或关闭弹框
756
- */
757
- tiggerTimePicker(e) {
758
- this.visible = !this.visible
759
- },
760
-
761
- /**
762
- * 用户点击“清空”按钮,清空当前值
763
- */
764
- clearTime() {
765
- this.time = ''
766
- this.$emit('change', this.time)
767
- this.$emit('input', this.time)
768
- this.$emit('update:modelValue', this.time)
769
- this.tiggerTimePicker()
770
- },
771
-
772
- /**
773
- * 用户点击“确定”按钮
774
- */
775
- setTime() {
776
- this.initTime()
777
- this.tiggerTimePicker()
778
- }
779
- }
780
- }
138
+ import { initVueI18n } from '@dcloudio/uni-i18n';
139
+ import i18nMessages from './i18n/index.js';
140
+ const { t } = initVueI18n(i18nMessages);
141
+ import { fixIosDateFormat } from './util';
142
+
143
+ /**
144
+ * DatetimePicker 时间选择器
145
+ * @description 可以同时选择日期和时间的选择器
146
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
147
+ * @property {String} type = [datetime | date | time] 显示模式
148
+ * @property {Boolean} multiple = [true|false] 是否多选
149
+ * @property {String|Number} value 默认值
150
+ * @property {String|Number} start 起始日期或时间
151
+ * @property {String|Number} end 起始日期或时间
152
+ * @property {String} return-type = [timestamp | string]
153
+ * @event {Function} change 选中发生变化触发
154
+ */
155
+
156
+ export default {
157
+ name: 'UniDatetimePicker',
158
+ data() {
159
+ return {
160
+ indicatorStyle: `height: 50px;`,
161
+ visible: false,
162
+ fixNvueBug: {},
163
+ dateShow: true,
164
+ timeShow: true,
165
+ title: '日期和时间',
166
+ // 输入框当前时间
167
+ time: '',
168
+ // 当前的年月日时分秒
169
+ year: 1920,
170
+ month: 0,
171
+ day: 0,
172
+ hour: 0,
173
+ minute: 0,
174
+ second: 0,
175
+ // 起始时间
176
+ startYear: 1920,
177
+ startMonth: 1,
178
+ startDay: 1,
179
+ startHour: 0,
180
+ startMinute: 0,
181
+ startSecond: 0,
182
+ // 结束时间
183
+ endYear: 2120,
184
+ endMonth: 12,
185
+ endDay: 31,
186
+ endHour: 23,
187
+ endMinute: 59,
188
+ endSecond: 59
189
+ };
190
+ },
191
+ options: {
192
+ // #ifdef MP-TOUTIAO
193
+ virtualHost: false,
194
+ // #endif
195
+ // #ifndef MP-TOUTIAO
196
+ virtualHost: true
197
+ // #endif
198
+ },
199
+ props: {
200
+ type: {
201
+ type: String,
202
+ default: 'datetime'
203
+ },
204
+ value: {
205
+ type: [String, Number],
206
+ default: ''
207
+ },
208
+ modelValue: {
209
+ type: [String, Number],
210
+ default: ''
211
+ },
212
+ start: {
213
+ type: [Number, String],
214
+ default: ''
215
+ },
216
+ end: {
217
+ type: [Number, String],
218
+ default: ''
219
+ },
220
+ returnType: {
221
+ type: String,
222
+ default: 'string'
223
+ },
224
+ disabled: {
225
+ type: [Boolean, String],
226
+ default: false
227
+ },
228
+ border: {
229
+ type: [Boolean, String],
230
+ default: true
231
+ },
232
+ hideSecond: {
233
+ type: [Boolean, String],
234
+ default: false
235
+ }
236
+ },
237
+ watch: {
238
+ // #ifndef VUE3
239
+ // value: {
240
+ // handler(newVal) {
241
+ // if (newVal) {
242
+ // this.parseValue(fixIosDateFormat(newVal));
243
+ // this.initTime(false);
244
+ // } else {
245
+ // this.time = '';
246
+ // this.parseValue(Date.now());
247
+ // }
248
+ // },
249
+ // immediate: true
250
+ // },
251
+ // #endif
252
+ // #ifdef VUE3
253
+ modelValue: {
254
+ handler(newVal) {
255
+ if (newVal) {
256
+ this.parseValue(fixIosDateFormat(newVal));
257
+ this.initTime(false);
258
+ } else {
259
+ this.time = '';
260
+ this.parseValue(Date.now());
261
+ }
262
+ },
263
+ immediate: true
264
+ },
265
+ // #endif
266
+ type: {
267
+ handler(newValue) {
268
+ if (newValue === 'date') {
269
+ this.dateShow = true;
270
+ this.timeShow = false;
271
+ this.title = '日期';
272
+ } else if (newValue === 'time') {
273
+ this.dateShow = false;
274
+ this.timeShow = true;
275
+ this.title = '时间';
276
+ } else {
277
+ this.dateShow = true;
278
+ this.timeShow = true;
279
+ this.title = '日期和时间';
280
+ }
281
+ },
282
+ immediate: true
283
+ },
284
+ start: {
285
+ handler(newVal) {
286
+ this.parseDatetimeRange(fixIosDateFormat(newVal), 'start');
287
+ },
288
+ immediate: true
289
+ },
290
+ end: {
291
+ handler(newVal) {
292
+ this.parseDatetimeRange(fixIosDateFormat(newVal), 'end');
293
+ },
294
+ immediate: true
295
+ },
296
+
297
+ // 月、日、时、分、秒可选范围变化后,检查当前值是否在范围内,不在则当前值重置为可选范围第一项
298
+ months(newVal) {
299
+ this.checkValue('month', this.month, newVal);
300
+ },
301
+ days(newVal) {
302
+ this.checkValue('day', this.day, newVal);
303
+ },
304
+ hours(newVal) {
305
+ this.checkValue('hour', this.hour, newVal);
306
+ },
307
+ minutes(newVal) {
308
+ this.checkValue('minute', this.minute, newVal);
309
+ },
310
+ seconds(newVal) {
311
+ this.checkValue('second', this.second, newVal);
312
+ }
313
+ },
314
+ computed: {
315
+ // 当前年、月、日、时、分、秒选择范围
316
+ years() {
317
+ return this.getCurrentRange('year');
318
+ },
319
+
320
+ months() {
321
+ return this.getCurrentRange('month');
322
+ },
323
+
324
+ days() {
325
+ return this.getCurrentRange('day');
326
+ },
327
+
328
+ hours() {
329
+ return this.getCurrentRange('hour');
330
+ },
331
+
332
+ minutes() {
333
+ return this.getCurrentRange('minute');
334
+ },
335
+
336
+ seconds() {
337
+ return this.getCurrentRange('second');
338
+ },
339
+
340
+ // picker 当前值数组
341
+ ymd() {
342
+ return [
343
+ this.year - this.minYear,
344
+ this.month - this.minMonth,
345
+ this.day - this.minDay
346
+ ];
347
+ },
348
+ hms() {
349
+ return [
350
+ this.hour - this.minHour,
351
+ this.minute - this.minMinute,
352
+ this.second - this.minSecond
353
+ ];
354
+ },
355
+
356
+ // 当前 date start
357
+ currentDateIsStart() {
358
+ return (
359
+ this.year === this.startYear &&
360
+ this.month === this.startMonth &&
361
+ this.day === this.startDay
362
+ );
363
+ },
364
+
365
+ // 当前 date 是 end
366
+ currentDateIsEnd() {
367
+ return (
368
+ this.year === this.endYear &&
369
+ this.month === this.endMonth &&
370
+ this.day === this.endDay
371
+ );
372
+ },
373
+
374
+ // 当前年、月、日、时、分、秒的最小值和最大值
375
+ minYear() {
376
+ return this.startYear;
377
+ },
378
+ maxYear() {
379
+ return this.endYear;
380
+ },
381
+ minMonth() {
382
+ if (this.year === this.startYear) {
383
+ return this.startMonth;
384
+ } else {
385
+ return 1;
386
+ }
387
+ },
388
+ maxMonth() {
389
+ if (this.year === this.endYear) {
390
+ return this.endMonth;
391
+ } else {
392
+ return 12;
393
+ }
394
+ },
395
+ minDay() {
396
+ if (this.year === this.startYear && this.month === this.startMonth) {
397
+ return this.startDay;
398
+ } else {
399
+ return 1;
400
+ }
401
+ },
402
+ maxDay() {
403
+ if (this.year === this.endYear && this.month === this.endMonth) {
404
+ return this.endDay;
405
+ } else {
406
+ return this.daysInMonth(this.year, this.month);
407
+ }
408
+ },
409
+ minHour() {
410
+ if (this.type === 'datetime') {
411
+ if (this.currentDateIsStart) {
412
+ return this.startHour;
413
+ } else {
414
+ return 0;
415
+ }
416
+ }
417
+ if (this.type === 'time') {
418
+ return this.startHour;
419
+ }
420
+ },
421
+ maxHour() {
422
+ if (this.type === 'datetime') {
423
+ if (this.currentDateIsEnd) {
424
+ return this.endHour;
425
+ } else {
426
+ return 23;
427
+ }
428
+ }
429
+ if (this.type === 'time') {
430
+ return this.endHour;
431
+ }
432
+ },
433
+ minMinute() {
434
+ if (this.type === 'datetime') {
435
+ if (this.currentDateIsStart && this.hour === this.startHour) {
436
+ return this.startMinute;
437
+ } else {
438
+ return 0;
439
+ }
440
+ }
441
+ if (this.type === 'time') {
442
+ if (this.hour === this.startHour) {
443
+ return this.startMinute;
444
+ } else {
445
+ return 0;
446
+ }
447
+ }
448
+ },
449
+ maxMinute() {
450
+ if (this.type === 'datetime') {
451
+ if (this.currentDateIsEnd && this.hour === this.endHour) {
452
+ return this.endMinute;
453
+ } else {
454
+ return 59;
455
+ }
456
+ }
457
+ if (this.type === 'time') {
458
+ if (this.hour === this.endHour) {
459
+ return this.endMinute;
460
+ } else {
461
+ return 59;
462
+ }
463
+ }
464
+ },
465
+ minSecond() {
466
+ if (this.type === 'datetime') {
467
+ if (
468
+ this.currentDateIsStart &&
469
+ this.hour === this.startHour &&
470
+ this.minute === this.startMinute
471
+ ) {
472
+ return this.startSecond;
473
+ } else {
474
+ return 0;
475
+ }
476
+ }
477
+ if (this.type === 'time') {
478
+ if (
479
+ this.hour === this.startHour &&
480
+ this.minute === this.startMinute
481
+ ) {
482
+ return this.startSecond;
483
+ } else {
484
+ return 0;
485
+ }
486
+ }
487
+ },
488
+ maxSecond() {
489
+ if (this.type === 'datetime') {
490
+ if (
491
+ this.currentDateIsEnd &&
492
+ this.hour === this.endHour &&
493
+ this.minute === this.endMinute
494
+ ) {
495
+ return this.endSecond;
496
+ } else {
497
+ return 59;
498
+ }
499
+ }
500
+ if (this.type === 'time') {
501
+ if (this.hour === this.endHour && this.minute === this.endMinute) {
502
+ return this.endSecond;
503
+ } else {
504
+ return 59;
505
+ }
506
+ }
507
+ },
508
+
509
+ /**
510
+ * for i18n
511
+ */
512
+ selectTimeText() {
513
+ return t('uni-datetime-picker.selectTime');
514
+ },
515
+ okText() {
516
+ return t('uni-datetime-picker.ok');
517
+ },
518
+ clearText() {
519
+ return t('uni-datetime-picker.clear');
520
+ },
521
+ cancelText() {
522
+ return t('uni-datetime-picker.cancel');
523
+ }
524
+ },
525
+
526
+ mounted() {
527
+ // #ifdef APP-NVUE
528
+ const res = uni.getSystemInfoSync();
529
+ this.fixNvueBug = {
530
+ top: res.windowHeight / 2,
531
+ left: res.windowWidth / 2
532
+ };
533
+ // #endif
534
+ },
535
+
536
+ methods: {
537
+ /**
538
+ * @param {Object} item
539
+ * 小于 10 在前面加个 0
540
+ */
541
+
542
+ lessThanTen(item) {
543
+ return item < 10 ? '0' + item : item;
544
+ },
545
+
546
+ /**
547
+ * 解析时分秒字符串,例如:00:00:00
548
+ * @param {String} timeString
549
+ */
550
+ parseTimeType(timeString) {
551
+ if (timeString) {
552
+ let timeArr = timeString.split(':');
553
+ this.hour = Number(timeArr[0]);
554
+ this.minute = Number(timeArr[1]);
555
+ this.second = Number(timeArr[2]);
556
+ }
557
+ },
558
+
559
+ /**
560
+ * 解析选择器初始值,类型可以是字符串、时间戳,例如:2000-10-02、'08:30:00'、 1610695109000
561
+ * @param {String | Number} datetime
562
+ */
563
+ initPickerValue(datetime) {
564
+ let defaultValue = null;
565
+ if (datetime) {
566
+ defaultValue = this.compareValueWithStartAndEnd(
567
+ datetime,
568
+ this.start,
569
+ this.end
570
+ );
571
+ } else {
572
+ defaultValue = Date.now();
573
+ defaultValue = this.compareValueWithStartAndEnd(
574
+ defaultValue,
575
+ this.start,
576
+ this.end
577
+ );
578
+ }
579
+ this.parseValue(defaultValue);
580
+ },
581
+
582
+ /**
583
+ * 初始值规则:
584
+ * - 用户设置初始值 value
585
+ * - 设置了起始时间 start、终止时间 end,并 start < value < end,初始值为 value, 否则初始值为 start
586
+ * - 只设置了起始时间 start,并 start < value,初始值为 value,否则初始值为 start
587
+ * - 只设置了终止时间 end,并 value < end,初始值为 value,否则初始值为 end
588
+ * - 无起始终止时间,则初始值为 value
589
+ * - 无初始值 value,则初始值为当前本地时间 Date.now()
590
+ * @param {Object} value
591
+ * @param {Object} dateBase
592
+ */
593
+ compareValueWithStartAndEnd(value, start, end) {
594
+ let winner = null;
595
+ value = this.superTimeStamp(value);
596
+ start = this.superTimeStamp(start);
597
+ end = this.superTimeStamp(end);
598
+
599
+ if (start && end) {
600
+ if (value < start) {
601
+ winner = new Date(start);
602
+ } else if (value > end) {
603
+ winner = new Date(end);
604
+ } else {
605
+ winner = new Date(value);
606
+ }
607
+ } else if (start && !end) {
608
+ winner = start <= value ? new Date(value) : new Date(start);
609
+ } else if (!start && end) {
610
+ winner = value <= end ? new Date(value) : new Date(end);
611
+ } else {
612
+ winner = new Date(value);
613
+ }
614
+
615
+ return winner;
616
+ },
617
+
618
+ /**
619
+ * 转换为可比较的时间戳,接受日期、时分秒、时间戳
620
+ * @param {Object} value
621
+ */
622
+ superTimeStamp(value) {
623
+ let dateBase = '';
624
+ if (this.type === 'time' && value && typeof value === 'string') {
625
+ const now = new Date();
626
+ const year = now.getFullYear();
627
+ const month = now.getMonth() + 1;
628
+ const day = now.getDate();
629
+ dateBase = year + '/' + month + '/' + day + ' ';
630
+ }
631
+ if (Number(value)) {
632
+ value = parseInt(value);
633
+ dateBase = 0;
634
+ }
635
+ return this.createTimeStamp(dateBase + value);
636
+ },
637
+
638
+ /**
639
+ * 解析默认值 value,字符串、时间戳
640
+ * @param {Object} defaultTime
641
+ */
642
+ parseValue(value) {
643
+ if (!value) {
644
+ return;
645
+ }
646
+ if (this.type === 'time' && typeof value === 'string') {
647
+ this.parseTimeType(value);
648
+ } else {
649
+ let defaultDate = null;
650
+ defaultDate = new Date(value);
651
+ if (this.type !== 'time') {
652
+ this.year = defaultDate.getFullYear();
653
+ this.month = defaultDate.getMonth() + 1;
654
+ this.day = defaultDate.getDate();
655
+ }
656
+ if (this.type !== 'date') {
657
+ this.hour = defaultDate.getHours();
658
+ this.minute = defaultDate.getMinutes();
659
+ this.second = defaultDate.getSeconds();
660
+ }
661
+ }
662
+ if (this.hideSecond) {
663
+ this.second = 0;
664
+ }
665
+ },
666
+
667
+ /**
668
+ * 解析可选择时间范围 start、end,年月日字符串、时间戳
669
+ * @param {Object} defaultTime
670
+ */
671
+ parseDatetimeRange(point, pointType) {
672
+ // 时间为空,则重置为初始值
673
+ if (!point) {
674
+ if (pointType === 'start') {
675
+ this.startYear = 1920;
676
+ this.startMonth = 1;
677
+ this.startDay = 1;
678
+ this.startHour = 0;
679
+ this.startMinute = 0;
680
+ this.startSecond = 0;
681
+ }
682
+ if (pointType === 'end') {
683
+ this.endYear = 2120;
684
+ this.endMonth = 12;
685
+ this.endDay = 31;
686
+ this.endHour = 23;
687
+ this.endMinute = 59;
688
+ this.endSecond = 59;
689
+ }
690
+ return;
691
+ }
692
+ if (this.type === 'time') {
693
+ const pointArr = point.split(':');
694
+ this[pointType + 'Hour'] = Number(pointArr[0]);
695
+ this[pointType + 'Minute'] = Number(pointArr[1]);
696
+ this[pointType + 'Second'] = Number(pointArr[2]);
697
+ } else {
698
+ if (!point) {
699
+ pointType === 'start'
700
+ ? (this.startYear = this.year - 60)
701
+ : (this.endYear = this.year + 60);
702
+ return;
703
+ }
704
+ if (Number(point)) {
705
+ point = parseInt(point);
706
+ }
707
+ // datetime 的 end 没有时分秒, 则不限制
708
+ const hasTime = /[0-9]:[0-9]/;
709
+ if (
710
+ this.type === 'datetime' &&
711
+ pointType === 'end' &&
712
+ typeof point === 'string' &&
713
+ !hasTime.test(point)
714
+ ) {
715
+ point = point + ' 23:59:59';
716
+ }
717
+ const pointDate = new Date(point);
718
+ this[pointType + 'Year'] = pointDate.getFullYear();
719
+ this[pointType + 'Month'] = pointDate.getMonth() + 1;
720
+ this[pointType + 'Day'] = pointDate.getDate();
721
+ if (this.type === 'datetime') {
722
+ this[pointType + 'Hour'] = pointDate.getHours();
723
+ this[pointType + 'Minute'] = pointDate.getMinutes();
724
+ this[pointType + 'Second'] = pointDate.getSeconds();
725
+ }
726
+ }
727
+ },
728
+
729
+ // 获取 年、月、日、时、分、秒 当前可选范围
730
+ getCurrentRange(value) {
731
+ const range = [];
732
+ for (
733
+ let i = this['min' + this.capitalize(value)];
734
+ i <= this['max' + this.capitalize(value)];
735
+ i++
736
+ ) {
737
+ range.push(i);
738
+ }
739
+ return range;
740
+ },
741
+
742
+ // 字符串首字母大写
743
+ capitalize(str) {
744
+ return str.charAt(0).toUpperCase() + str.slice(1);
745
+ },
746
+
747
+ // 检查当前值是否在范围内,不在则当前值重置为可选范围第一项
748
+ checkValue(name, value, values) {
749
+ if (values.indexOf(value) === -1) {
750
+ this[name] = values[0];
751
+ }
752
+ },
753
+
754
+ // 每个月的实际天数
755
+ daysInMonth(year, month) {
756
+ // Use 1 for January, 2 for February, etc.
757
+ return new Date(year, month, 0).getDate();
758
+ },
759
+
760
+ /**
761
+ * 生成时间戳
762
+ * @param {Object} time
763
+ */
764
+ createTimeStamp(time) {
765
+ if (!time) return;
766
+ if (typeof time === 'number') {
767
+ return time;
768
+ } else {
769
+ time = time.replace(/-/g, '/');
770
+ if (this.type === 'date') {
771
+ time = time + ' ' + '00:00:00';
772
+ }
773
+ return Date.parse(time);
774
+ }
775
+ },
776
+
777
+ /**
778
+ * 生成日期或时间的字符串
779
+ */
780
+ createDomSting() {
781
+ const yymmdd =
782
+ this.year +
783
+ '-' +
784
+ this.lessThanTen(this.month) +
785
+ '-' +
786
+ this.lessThanTen(this.day);
787
+
788
+ let hhmmss =
789
+ this.lessThanTen(this.hour) + ':' + this.lessThanTen(this.minute);
790
+
791
+ if (!this.hideSecond) {
792
+ hhmmss = hhmmss + ':' + this.lessThanTen(this.second);
793
+ }
794
+
795
+ if (this.type === 'date') {
796
+ return yymmdd;
797
+ } else if (this.type === 'time') {
798
+ return hhmmss;
799
+ } else {
800
+ return yymmdd + ' ' + hhmmss;
801
+ }
802
+ },
803
+
804
+ /**
805
+ * 初始化返回值,并抛出 change 事件
806
+ */
807
+ initTime(emit = true) {
808
+ this.time = this.createDomSting();
809
+ if (!emit) return;
810
+ if (this.returnType === 'timestamp' && this.type !== 'time') {
811
+ this.$emit('change', this.createTimeStamp(this.time));
812
+ this.$emit('input', this.createTimeStamp(this.time));
813
+ this.$emit('update:modelValue', this.createTimeStamp(this.time));
814
+ } else {
815
+ this.$emit('change', this.time);
816
+ this.$emit('input', this.time);
817
+ this.$emit('update:modelValue', this.time);
818
+ }
819
+ },
820
+
821
+ /**
822
+ * 用户选择日期或时间更新 data
823
+ * @param {Object} e
824
+ */
825
+ bindDateChange(e) {
826
+ const val = e.detail.value;
827
+ this.year = this.years[val[0]];
828
+ this.month = this.months[val[1]];
829
+ this.day = this.days[val[2]];
830
+ },
831
+ bindTimeChange(e) {
832
+ const val = e.detail.value;
833
+ this.hour = this.hours[val[0]];
834
+ this.minute = this.minutes[val[1]];
835
+ this.second = this.seconds[val[2]];
836
+ },
837
+
838
+ /**
839
+ * 初始化弹出层
840
+ */
841
+ initTimePicker() {
842
+ if (this.disabled) return;
843
+ const value = fixIosDateFormat(this.time);
844
+ this.initPickerValue(value);
845
+ this.visible = !this.visible;
846
+ },
847
+
848
+ /**
849
+ * 触发或关闭弹框
850
+ */
851
+ tiggerTimePicker(e) {
852
+ this.visible = !this.visible;
853
+ },
854
+
855
+ /**
856
+ * 用户点击“清空”按钮,清空当前值
857
+ */
858
+ clearTime() {
859
+ this.time = '';
860
+ this.$emit('change', this.time);
861
+ this.$emit('input', this.time);
862
+ this.$emit('update:modelValue', this.time);
863
+ this.tiggerTimePicker();
864
+ },
865
+
866
+ /**
867
+ * 用户点击“确定”按钮
868
+ */
869
+ setTime() {
870
+ this.initTime();
871
+ this.tiggerTimePicker();
872
+ }
873
+ }
874
+ };
781
875
  </script>
782
876
 
783
877
  <style lang="scss">
784
- $uni-primary: #007aff !default;
785
-
786
- .uni-datetime-picker {
787
- /* #ifndef APP-NVUE */
788
- /* width: 100%; */
789
- /* #endif */
790
- }
791
-
792
- .uni-datetime-picker-view {
793
- height: 130px;
794
- width: 270px;
795
- /* #ifndef APP-NVUE */
796
- cursor: pointer;
797
- /* #endif */
798
- }
799
-
800
- .uni-datetime-picker-item {
801
- height: 50px;
802
- line-height: 50px;
803
- text-align: center;
804
- font-size: 14px;
805
- }
806
-
807
- .uni-datetime-picker-btn {
808
- margin-top: 60px;
809
- /* #ifndef APP-NVUE */
810
- display: flex;
811
- cursor: pointer;
812
- /* #endif */
813
- flex-direction: row;
814
- justify-content: space-between;
815
- }
816
-
817
- .uni-datetime-picker-btn-text {
818
- font-size: 14px;
819
- color: $uni-primary;
820
- }
821
-
822
- .uni-datetime-picker-btn-group {
823
- /* #ifndef APP-NVUE */
824
- display: flex;
825
- /* #endif */
826
- flex-direction: row;
827
- }
828
-
829
- .uni-datetime-picker-cancel {
830
- margin-right: 30px;
831
- }
832
-
833
- .uni-datetime-picker-mask {
834
- position: fixed;
835
- bottom: 0px;
836
- top: 0px;
837
- left: 0px;
838
- right: 0px;
839
- background-color: rgba(0, 0, 0, 0.4);
840
- transition-duration: 0.3s;
841
- z-index: 998;
842
- }
843
-
844
- .uni-datetime-picker-popup {
845
- border-radius: 8px;
846
- padding: 30px;
847
- width: 270px;
848
- /* #ifdef APP-NVUE */
849
- height: 500px;
850
- /* #endif */
851
- /* #ifdef APP-NVUE */
852
- width: 330px;
853
- /* #endif */
854
- background-color: #fff;
855
- position: fixed;
856
- top: 50%;
857
- left: 50%;
858
- transform: translate(-50%, -50%);
859
- transition-duration: 0.3s;
860
- z-index: 999;
861
- }
862
-
863
- .fix-nvue-height {
864
- /* #ifdef APP-NVUE */
865
- height: 330px;
866
- /* #endif */
867
- }
868
-
869
- .uni-datetime-picker-time {
870
- color: grey;
871
- }
872
-
873
- .uni-datetime-picker-column {
874
- height: 50px;
875
- }
876
-
877
- .uni-datetime-picker-timebox {
878
-
879
- border: 1px solid #E5E5E5;
880
- border-radius: 5px;
881
- padding: 7px 10px;
882
- /* #ifndef APP-NVUE */
883
- box-sizing: border-box;
884
- cursor: pointer;
885
- /* #endif */
886
- }
887
-
888
- .uni-datetime-picker-timebox-pointer {
889
- /* #ifndef APP-NVUE */
890
- cursor: pointer;
891
- /* #endif */
892
- }
893
-
894
-
895
- .uni-datetime-picker-disabled {
896
- opacity: 0.4;
897
- /* #ifdef H5 */
898
- cursor: not-allowed !important;
899
- /* #endif */
900
- }
901
-
902
- .uni-datetime-picker-text {
903
- font-size: 14px;
904
- line-height: 50px
905
- }
906
-
907
- .uni-datetime-picker-sign {
908
- position: absolute;
909
- top: 53px;
910
- /* 减掉 10px 的元素高度,兼容nvue */
911
- color: #999;
912
- /* #ifdef APP-NVUE */
913
- font-size: 16px;
914
- /* #endif */
915
- }
916
-
917
- .sign-left {
918
- left: 86px;
919
- }
920
-
921
- .sign-right {
922
- right: 86px;
923
- }
924
-
925
- .sign-center {
926
- left: 135px;
927
- }
928
-
929
- .uni-datetime-picker__container-box {
930
- position: relative;
931
- display: flex;
932
- align-items: center;
933
- justify-content: center;
934
- margin-top: 40px;
935
- }
936
-
937
- .time-hide-second {
938
- width: 180px;
939
- }
878
+ $uni-primary: #007aff !default;
879
+
880
+ .uni-datetime-picker {
881
+ /* #ifndef APP-NVUE */
882
+ /* width: 100%; */
883
+ /* #endif */
884
+ }
885
+
886
+ .uni-datetime-picker-view {
887
+ height: 130px;
888
+ width: 270px;
889
+ /* #ifndef APP-NVUE */
890
+ cursor: pointer;
891
+ /* #endif */
892
+ }
893
+
894
+ .uni-datetime-picker-item {
895
+ height: 50px;
896
+ line-height: 50px;
897
+ text-align: center;
898
+ font-size: 14px;
899
+ }
900
+
901
+ .uni-datetime-picker-btn {
902
+ margin-top: 60px;
903
+ /* #ifndef APP-NVUE */
904
+ display: flex;
905
+ cursor: pointer;
906
+ /* #endif */
907
+ flex-direction: row;
908
+ justify-content: space-between;
909
+ }
910
+
911
+ .uni-datetime-picker-btn-text {
912
+ font-size: 14px;
913
+ color: $uni-primary;
914
+ }
915
+
916
+ .uni-datetime-picker-btn-group {
917
+ /* #ifndef APP-NVUE */
918
+ display: flex;
919
+ /* #endif */
920
+ flex-direction: row;
921
+ }
922
+
923
+ .uni-datetime-picker-cancel {
924
+ margin-right: 30px;
925
+ }
926
+
927
+ .uni-datetime-picker-mask {
928
+ position: fixed;
929
+ bottom: 0px;
930
+ top: 0px;
931
+ left: 0px;
932
+ right: 0px;
933
+ background-color: rgba(0, 0, 0, 0.4);
934
+ transition-duration: 0.3s;
935
+ z-index: 998;
936
+ }
937
+
938
+ .uni-datetime-picker-popup {
939
+ border-radius: 8px;
940
+ padding: 30px;
941
+ width: 270px;
942
+ /* #ifdef APP-NVUE */
943
+ height: 500px;
944
+ /* #endif */
945
+ /* #ifdef APP-NVUE */
946
+ width: 330px;
947
+ /* #endif */
948
+ background-color: #fff;
949
+ position: fixed;
950
+ top: 50%;
951
+ left: 50%;
952
+ transform: translate(-50%, -50%);
953
+ transition-duration: 0.3s;
954
+ z-index: 999;
955
+ }
956
+
957
+ .fix-nvue-height {
958
+ /* #ifdef APP-NVUE */
959
+ height: 330px;
960
+ /* #endif */
961
+ }
962
+
963
+ .uni-datetime-picker-time {
964
+ color: grey;
965
+ }
966
+
967
+ .uni-datetime-picker-column {
968
+ height: 50px;
969
+ }
970
+
971
+ .uni-datetime-picker-timebox {
972
+ border: 1px solid #e5e5e5;
973
+ border-radius: 5px;
974
+ padding: 7px 10px;
975
+ /* #ifndef APP-NVUE */
976
+ box-sizing: border-box;
977
+ cursor: pointer;
978
+ /* #endif */
979
+ }
980
+
981
+ .uni-datetime-picker-timebox-pointer {
982
+ /* #ifndef APP-NVUE */
983
+ cursor: pointer;
984
+ /* #endif */
985
+ }
986
+
987
+ .uni-datetime-picker-disabled {
988
+ opacity: 0.4;
989
+ /* #ifdef H5 */
990
+ cursor: not-allowed !important;
991
+ /* #endif */
992
+ }
993
+
994
+ .uni-datetime-picker-text {
995
+ font-size: 14px;
996
+ line-height: 50px;
997
+ }
998
+
999
+ .uni-datetime-picker-sign {
1000
+ position: absolute;
1001
+ top: 53px;
1002
+ /* 减掉 10px 的元素高度,兼容nvue */
1003
+ color: #999;
1004
+ /* #ifdef APP-NVUE */
1005
+ font-size: 16px;
1006
+ /* #endif */
1007
+ }
1008
+
1009
+ .sign-left {
1010
+ left: 86px;
1011
+ }
1012
+
1013
+ .sign-right {
1014
+ right: 86px;
1015
+ }
1016
+
1017
+ .sign-center {
1018
+ left: 135px;
1019
+ }
1020
+
1021
+ .uni-datetime-picker__container-box {
1022
+ position: relative;
1023
+ display: flex;
1024
+ align-items: center;
1025
+ justify-content: center;
1026
+ margin-top: 40px;
1027
+ }
1028
+
1029
+ .time-hide-second {
1030
+ width: 180px;
1031
+ }
940
1032
  </style>