rangeDate.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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. startMode:'',
  93. endMode: ''
  94. }
  95. },
  96. watch: {
  97. startValue (val,old) {
  98. if(old&&!val){
  99. this.endValue = undefined
  100. }
  101. if(val && !this.endValue){
  102. this.endOpen = true
  103. }
  104. this.startValue = val
  105. this.changeInput()
  106. },
  107. endValue (val,old) {
  108. if(old&&!val){
  109. this.startValue = undefined
  110. }
  111. this.endValue = val
  112. this.changeInput()
  113. }
  114. },
  115. methods: {
  116. setVal (key) {
  117. this.startValue = this.ranges[key][0]
  118. this.endValue = this.ranges[key][1]
  119. this.startOpen = false
  120. this.endOpen = false
  121. },
  122. disabledStartDate (startValue) {
  123. const endValue = this.endValue
  124. const maxYearVs = moment().endOf('day') // 今天,包含今天
  125. if (endValue) {
  126. if (!this.startValue) {
  127. return startValue.valueOf() > moment(endValue, 'YYYY-MM-DD').add(1, 'days').valueOf() || startValue.valueOf() > maxYearVs.valueOf()
  128. }
  129. if(this.startMode == 'year'){
  130. return startValue.valueOf() > moment().endOf('year').valueOf()
  131. }
  132. if(this.startMode == 'month'){
  133. return startValue.valueOf() > moment().endOf('month').valueOf()
  134. }
  135. return startValue.valueOf() > moment(endValue).valueOf() || startValue.valueOf() > maxYearVs.valueOf()
  136. }
  137. return startValue.valueOf() > maxYearVs.valueOf()
  138. },
  139. disabledEndDate (endValue) {
  140. const startValue = this.startValue
  141. const maxYearVs = moment().endOf('day') // 今天,包含今天
  142. if (startValue) {
  143. if(this.endMode == 'year'){
  144. const sv = moment(startValue).startOf('year')
  145. return endValue.valueOf() < sv.valueOf() || endValue.valueOf() > moment().endOf('year').valueOf()
  146. }
  147. if(this.endMode == 'month'){
  148. const sv = moment(startValue).startOf('month')
  149. return endValue.valueOf() < sv.valueOf() || endValue.valueOf() > moment().endOf('month').valueOf()
  150. }
  151. return moment(startValue).valueOf() > endValue.valueOf() || endValue.valueOf() > maxYearVs.valueOf()
  152. }
  153. return endValue.valueOf() > maxYearVs.valueOf()
  154. },
  155. handleStartOpenChange (open) {
  156. if(!open && !this.endValue){
  157. this.endOpen = !!this.startValue
  158. }
  159. if(!open){
  160. this.startMode = ''
  161. }
  162. this.startOpen = open
  163. },
  164. handleEndOpenChange (open) {
  165. if(!open){
  166. this.endMode = ''
  167. }
  168. this.endOpen = open
  169. },
  170. handleStartPanelChange (v, mode) {
  171. console.log(v, mode)
  172. this.startMode = mode
  173. },
  174. handleEndPanelChange (v, mode) {
  175. console.log(v, mode)
  176. this.endMode = mode
  177. },
  178. changeInput () {
  179. const startValue = this.startValue
  180. const endValue = this.endValue
  181. console.log(startValue, endValue)
  182. let dateStrings = [startValue, endValue]
  183. if (!dateStrings[0] && !dateStrings[1]) {
  184. dateStrings = []
  185. } else {
  186. if (!this.showTime) {
  187. dateStrings[0] = dateStrings[0] ? moment(dateStrings[0]).format('YYYY-MM-DD 00:00:00') : ''
  188. dateStrings[1] = dateStrings[1] ? moment(dateStrings[1]).format('YYYY-MM-DD 23:59:59') : ''
  189. } else {
  190. dateStrings[0] = dateStrings[0] ? moment(dateStrings[0]).format('YYYY-MM-DD hh:mm:ss') : ''
  191. dateStrings[1] = dateStrings[1] ? moment(dateStrings[1]).format('YYYY-MM-DD hh:mm:ss') : ''
  192. }
  193. }
  194. this.$emit('change', dateStrings)
  195. },
  196. resetDate (val) {
  197. this.startValue = val && val[0] || undefined
  198. this.endValue = val && val[1] || undefined
  199. this.$emit('change', [])
  200. }
  201. }
  202. }
  203. </script>