rangeDate.vue 6.6 KB

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