index.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <u-datetime-picker
  3. ref="datetimePickerRef"
  4. :show="isShow"
  5. v-model="innerValue"
  6. :mode="mode"
  7. @confirm="confirm"
  8. @cancel="close"
  9. :formatter="formatter"
  10. :maxDate="maxDate"
  11. :minDate="minDate"
  12. ></u-datetime-picker>
  13. </template>
  14. <script>
  15. /* https://uviewui.com/components/datetimePicker.html */
  16. export default {
  17. props: {
  18. value: {
  19. type: String | Number,
  20. default: function() {
  21. return null
  22. }
  23. },
  24. //展示格式
  25. mode: {
  26. type: String,
  27. default: 'datetime'
  28. },
  29. format: {
  30. type: String,
  31. default: 'YYYY-MM-DD HH:mm'
  32. },
  33. disStartDate: {
  34. type: String,
  35. default: ''
  36. },
  37. disEndDate: {
  38. type: String,
  39. default: ''
  40. }
  41. },
  42. watch: {
  43. value: {
  44. handler(newVal) {
  45. this.innerValue = newVal
  46. }
  47. },
  48. innerValue: {
  49. handler(newVal) {
  50. this.$emit('input', newVal)
  51. }
  52. },
  53. },
  54. computed: {
  55. maxDate() {
  56. let res
  57. if(this.disEndDate) {
  58. res = this.dayjs(this.disEndDate).valueOf() - 60000
  59. } else {
  60. res = this.dayjs().add(20, 'year').valueOf()
  61. }
  62. return res
  63. },
  64. minDate() {
  65. let res
  66. if(this.disStartDate) {
  67. res = this.dayjs(this.disStartDate).valueOf() + 60000
  68. } else {
  69. res = this.dayjs().subtract(20, 'year').valueOf()
  70. }
  71. return res
  72. },
  73. },
  74. data() {
  75. return {
  76. isShow: false,
  77. innerValue: Number(new Date()),
  78. }
  79. },
  80. onReady() {
  81. // 微信小程序需要用此写法
  82. this.$refs.datetimePickerRef.setFormatter(this.formatter)
  83. },
  84. methods: {
  85. show() {
  86. this.isShow= true;
  87. },
  88. close() {
  89. this.isShow = false
  90. },
  91. confirm(e) {
  92. let time = this.dayjs(e.value).format(this.format)
  93. this.$emit('confirm',time)
  94. this.close()
  95. },
  96. formatter(type, value) {
  97. if (type === 'year') {
  98. return `${value}年`
  99. }
  100. if (type === 'month') {
  101. return `${value}月`
  102. }
  103. if (type === 'day') {
  104. return `${value}日`
  105. }
  106. if (type === 'hour') {
  107. return `${value}时`
  108. }
  109. if (type === 'minute') {
  110. return `${value}分`
  111. }
  112. return value
  113. },
  114. }
  115. }
  116. </script>
  117. <style lang="scss" scoped>
  118. </style>