110
110
<script >
111
111
import fecha from ' fecha'
112
112
import clickoutside from ' @/directives/clickoutside'
113
- import { isValidDate , isValidRange , isDateObejct , isPlainObject , formatDate , parseDate , throttle } from ' @/utils/index'
114
- import { transformDate , transformDateRange } from ' @/utils/transform'
113
+ import { isValidDate , isValidRangeDate , isDateObejct , isPlainObject , formatDate , parseDate , throttle } from ' @/utils/index'
114
+ import { transformDate } from ' @/utils/transform'
115
115
import CalendarPanel from ' ./calendar.vue'
116
116
import locale from ' @/mixins/locale'
117
117
import Languages from ' @/locale/languages'
@@ -141,7 +141,7 @@ export default {
141
141
default: ' zh'
142
142
},
143
143
format: {
144
- type: String ,
144
+ type: [ String , Object ] ,
145
145
default: ' YYYY-MM-DD'
146
146
},
147
147
dateFormat: {
@@ -227,12 +227,17 @@ export default {
227
227
},
228
228
computed: {
229
229
transform () {
230
- const obj = this .range ? transformDateRange : transformDate
231
230
const type = this .valueType
232
231
if (isPlainObject (type)) {
233
- return { ... obj .date , ... type }
232
+ return { ... transformDate .date , ... type }
234
233
}
235
- return obj[type] || obj .date
234
+ if (type === ' format' ) {
235
+ return {
236
+ value2date: this .parse .bind (this ),
237
+ date2value: this .stringify .bind (this )
238
+ }
239
+ }
240
+ return transformDate[type] || transformDate .date
236
241
},
237
242
language () {
238
243
if (isPlainObject (this .lang )) {
@@ -250,12 +255,14 @@ export default {
250
255
if (this .userInput !== null ) {
251
256
return this .userInput
252
257
}
253
- const date = this .transform . value2date ( this . value , this . format )
258
+ const { value2date } = this .transform
254
259
if (! this .range ) {
255
- return date ? this .stringify (date) : ' '
260
+ return this .isValidValue (this .value )
261
+ ? this .stringify (value2date (this .value ))
262
+ : ' '
256
263
}
257
- return Array . isArray (date) && date[ 0 ] && date[ 1 ]
258
- ? ` ${ this .stringify (date [0 ])} ${ this .rangeSeparator } ${ this .stringify (date [1 ])} `
264
+ return this . isValidRangeValue ( this . value )
265
+ ? ` ${ this .stringify (value2date ( this . value [0 ])) } ${ this .rangeSeparator } ${ this .stringify (value2date ( this . value [1 ]) )} `
259
266
: ' '
260
267
},
261
268
computedWidth () {
@@ -265,7 +272,7 @@ export default {
265
272
return this .width
266
273
},
267
274
showClearIcon () {
268
- return ! this .disabled && this .clearable && (this .range ? isValidRange (this .value ) : isValidDate (this .value ))
275
+ return ! this .disabled && this .clearable && (this .range ? this . isValidRangeValue (this .value ) : this . isValidValue (this .value ))
269
276
},
270
277
innerType () {
271
278
return String (this .type ).toLowerCase ()
@@ -314,6 +321,9 @@ export default {
314
321
if (this .dateFormat ) {
315
322
return this .dateFormat
316
323
}
324
+ if (typeof this .format !== ' string' ) {
325
+ return ' YYYY-MM-DD'
326
+ }
317
327
if (this .innerType === ' date' ) {
318
328
return this .format
319
329
}
@@ -348,11 +358,24 @@ export default {
348
358
this .handleValueChange (this .value )
349
359
this .displayPopup ()
350
360
},
351
- stringify (date , format ) {
352
- return formatDate (date, format || this .format )
361
+ stringify (date ) {
362
+ return (isPlainObject (this .format ) && typeof this .format .stringify === ' function' )
363
+ ? this .format .stringify (date)
364
+ : formatDate (date, this .format )
353
365
},
354
- parseDate (value , format ) {
355
- return parseDate (value, format || this .format )
366
+ parse (value ) {
367
+ return (isPlainObject (this .format ) && typeof this .format .parse === ' function' )
368
+ ? this .format .parse (value)
369
+ : parseDate (value, this .format )
370
+ },
371
+ isValidValue (value ) {
372
+ const { value2date } = this .transform
373
+ return isValidDate (value2date (value))
374
+ },
375
+ isValidRangeValue (value ) {
376
+ const { value2date } = this .transform
377
+ return Array .isArray (value) && value .length === 2 && this .isValidValue (value[0 ]) &&
378
+ this .isValidValue (value[1 ]) && (value2date (value[1 ]).getTime () >= value2date (value[0 ]).getTime ())
356
379
},
357
380
dateEqual (a , b ) {
358
381
return isDateObejct (a) && isDateObejct (b) && a .getTime () === b .getTime ()
@@ -374,7 +397,7 @@ export default {
374
397
this .$emit (' clear' )
375
398
},
376
399
confirmDate () {
377
- const valid = this .range ? isValidRange (this .currentValue ) : isValidDate (this .currentValue )
400
+ const valid = this .range ? isValidRangeDate (this .currentValue ) : isValidDate (this .currentValue )
378
401
if (valid) {
379
402
this .updateDate (true )
380
403
}
@@ -394,10 +417,19 @@ export default {
394
417
return true
395
418
},
396
419
emitDate (eventName ) {
397
- this .$emit (eventName, this .transform .date2value (this .currentValue , this .format ))
420
+ const { date2value } = this .transform
421
+ const value = this .range
422
+ ? this .currentValue .map (date2value)
423
+ : date2value (this .currentValue )
424
+ this .$emit (eventName, value)
398
425
},
399
426
handleValueChange (value ) {
400
- this .currentValue = this .transform .value2date (value, this .format )
427
+ const { value2date } = this .transform
428
+ if (this .range ) {
429
+ this .currentValue = this .isValidRangeValue (value) ? value .map (value2date) : [null , null ]
430
+ } else {
431
+ this .currentValue = this .isValidValue (value) ? value2date (value) : null
432
+ }
401
433
},
402
434
selectDate (date ) {
403
435
this .currentValue = date
@@ -497,8 +529,8 @@ export default {
497
529
if (this .range ) {
498
530
const range = value .split (` ${ this .rangeSeparator } ` )
499
531
if (range .length === 2 ) {
500
- const start = this .parseDate (range[0 ], this . format )
501
- const end = this .parseDate (range[1 ], this . format )
532
+ const start = this .parse (range[0 ])
533
+ const end = this .parse (range[1 ])
502
534
if (start && end && ! checkDate (start, null , end) && ! checkDate (end, start, null )) {
503
535
this .currentValue = [start, end]
504
536
this .updateDate (true )
@@ -507,7 +539,7 @@ export default {
507
539
}
508
540
}
509
541
} else {
510
- const date = this .parseDate (value, this . format )
542
+ const date = this .parse (value)
511
543
if (date && ! checkDate (date, null , null )) {
512
544
this .currentValue = date
513
545
this .updateDate (true )
0 commit comments