rangeDate.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <div style="display: flex;align-items: center;">
  3. <a-date-picker
  4. :size="size"
  5. :locale="locale"
  6. v-model="startValue"
  7. :allowClear="allowClear"
  8. :disabled-date="disabledStartDate"
  9. :show-time="showTime"
  10. :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
  11. placeholder="开始时间"
  12. :open="startOpen"
  13. inputReadOnly
  14. @openChange="handleStartOpenChange"
  15. @panelChange="handleStartPanelChange"
  16. :showToday="false"
  17. >
  18. <div slot="renderExtraFooter">
  19. <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
  20. <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
  21. <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
  22. <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
  23. <a-button @click="setVal('date5')" type="link" size="small">近一年</a-button>
  24. </div>
  25. </a-date-picker>
  26. <span>&nbsp;&nbsp;至&nbsp;&nbsp;</span>
  27. <a-date-picker
  28. :size="size"
  29. :locale="locale"
  30. v-model="endValue"
  31. :allowClear="allowClear"
  32. :disabled-date="disabledEndDate"
  33. :show-time="showTime"
  34. :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
  35. placeholder="结束时间"
  36. inputReadOnly
  37. :open="endOpen"
  38. @openChange="handleEndOpenChange"
  39. @panelChange="handleEndPanelChange"
  40. :showToday="false"
  41. >
  42. <div slot="renderExtraFooter">
  43. <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
  44. <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
  45. <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
  46. <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
  47. <a-button @click="setVal('date5')" type="link" size="small">近一年</a-button>
  48. </div>
  49. </a-date-picker>
  50. </div>
  51. </template>
  52. <script>
  53. import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  54. import moment from 'moment'
  55. import 'moment/locale/zh-cn';
  56. moment.locale('zh-cn');//配置moment中文环境
  57. export default {
  58. props: {
  59. value: {
  60. type: Array,
  61. default: () => {
  62. return []
  63. }
  64. },
  65. size: {
  66. type: String,
  67. default: 'default'
  68. },
  69. showTime: {
  70. type: Boolean,
  71. default: false
  72. },
  73. allowClear: {
  74. type: Boolean,
  75. default: true
  76. }
  77. },
  78. data () {
  79. return {
  80. locale,
  81. startValue: this.value[0]||undefined,
  82. endValue: this.value[1]||undefined,
  83. endOpen: false,
  84. startOpen: false,
  85. ranges: {
  86. 'date1': [moment(), moment()],
  87. 'date2': [moment().subtract(1, 'months'), moment()],
  88. 'date3': [moment().startOf('month'), moment()],
  89. 'date4': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')],
  90. 'date5': [moment().subtract(1, 'years'), moment()]
  91. }
  92. }
  93. },
  94. watch: {
  95. startValue (val,old) {
  96. if(old&&!val){
  97. this.endValue = undefined
  98. }
  99. if(val && !this.endValue){
  100. this.endOpen = true
  101. }
  102. this.changeInput()
  103. },
  104. endValue (val,old) {
  105. if(old&&!val){
  106. this.startValue = undefined
  107. }
  108. this.changeInput()
  109. }
  110. },
  111. methods: {
  112. setVal (key) {
  113. this.startValue = this.ranges[key][0]
  114. this.endValue = this.ranges[key][1]
  115. this.startOpen = false
  116. this.endOpen = false
  117. },
  118. disabledStartDate (startValue) {
  119. const endValue = this.endValue
  120. const maxYearVs = moment().endOf('day') // 今天,包含今天
  121. if (endValue) {
  122. if (!this.startValue) {
  123. return startValue.valueOf() > moment(endValue, 'YYYY-MM-DD').add(1, 'days').valueOf() || startValue.valueOf() > maxYearVs.valueOf()
  124. }
  125. return startValue.valueOf() > endValue.valueOf() || startValue.valueOf() > maxYearVs.valueOf()
  126. }
  127. return startValue.valueOf() > maxYearVs.valueOf()
  128. },
  129. disabledEndDate (endValue) {
  130. const startValue = this.startValue
  131. const maxYearVs = moment().endOf('day') // 今天,包含今天
  132. if (startValue) {
  133. return startValue.valueOf() > endValue.valueOf() || endValue.valueOf() > maxYearVs.valueOf()
  134. }
  135. return endValue.valueOf() > maxYearVs.valueOf()
  136. },
  137. handleStartOpenChange (open) {
  138. if(!open && !this.endValue){
  139. this.endOpen = !!this.startValue
  140. }
  141. this.startOpen = open
  142. },
  143. handleEndOpenChange (open) {
  144. this.endOpen = open
  145. },
  146. handleStartPanelChange (v) {
  147. console.log(v)
  148. },
  149. handleEndPanelChange (v) {
  150. console.log(v)
  151. },
  152. changeInput () {
  153. const startValue = this.startValue
  154. const endValue = this.endValue
  155. console.log(startValue, endValue)
  156. let dateStrings = [startValue, endValue]
  157. if (!dateStrings[0] || !dateStrings[1]) {
  158. dateStrings = []
  159. } else {
  160. if (!this.showTime) {
  161. dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD 00:00:00')
  162. dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD 23:59:59')
  163. } else {
  164. dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD hh:mm:ss')
  165. dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD hh:mm:ss')
  166. }
  167. }
  168. this.$emit('change', dateStrings)
  169. },
  170. resetDate (val) {
  171. this.startValue = val && val[0] || undefined
  172. this.endValue = val && val[1] || undefined
  173. this.$emit('change', [])
  174. }
  175. }
  176. }
  177. </script>