rangeDate.vue 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <a-range-picker
  3. style="width:100%"
  4. :ranges="ranges"
  5. :value="date"
  6. :size="size"
  7. :disabledDate="disabledDate"
  8. :format="dateFormat"
  9. @change="dateChange"
  10. @calendarChange="dateCalendarChange"
  11. :placeholder="['开始时间', '结束时间']" />
  12. </template>
  13. <script>
  14. import moment from 'moment'
  15. export default {
  16. props: {
  17. value: {
  18. type: Array,
  19. default: () => {
  20. return []
  21. }
  22. },
  23. size: {
  24. type: String,
  25. default: 'default'
  26. },
  27. showTime: {
  28. type: Boolean,
  29. default: true
  30. }
  31. },
  32. data () {
  33. return {
  34. date: this.value,
  35. dateFormat: 'YYYY-MM-DD',
  36. selectPriceDate: '',
  37. ranges: {
  38. '今天': [moment(), moment()],
  39. '近一个月': [moment().subtract(1, 'months'), moment()],
  40. '本月': [moment().startOf('month'), moment()],
  41. '上月': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')] }
  42. }
  43. },
  44. methods: {
  45. // 不可选日期
  46. disabledDate (current) {
  47. // 最早可倒推选择两年数据,最晚为今天
  48. const minYearVs = moment().subtract(2, 'years') // 两年前 负值
  49. const maxYearVs = moment().endOf('day') // 今天,包含今天
  50. // 限制最多只能查一年区间的数据
  51. if (this.selectPriceDate) {
  52. const oMinYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').subtract(1, 'years') // 当前选中开始日期前推一年
  53. const oMaxYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').add(1, 'years') // 当前选中开始日期后推一年
  54. // 判断两个时间段是否相差m天 第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
  55. const beginDate = minYearVs.diff(oMinYearVs, 'days') > 0 ? minYearVs : oMinYearVs // 若当前选中开始日期前推一年超出最多倒推两年数据时,则以两年为标准
  56. const endDate = maxYearVs.diff(oMaxYearVs, 'days') > 0 ? oMaxYearVs : maxYearVs // 若当前选中开始日期后推一年超出今天时,则以今天为标准
  57. return current && current < beginDate || current && current > endDate
  58. } else {
  59. return current && current > maxYearVs || current && current < minYearVs
  60. }
  61. },
  62. // 日期 change
  63. dateChange (date, dateStrings) {
  64. this.selectPriceDate = ''
  65. this.date = date
  66. if (dateStrings[0] == '' && dateStrings[1] == '') {
  67. dateStrings = []
  68. } else {
  69. if (this.showTime) {
  70. dateStrings[0] = dateStrings[0] + ' 00:00:00'
  71. dateStrings[1] = dateStrings[1] + ' 23:59:59'
  72. }
  73. }
  74. this.$emit('change', dateStrings)
  75. },
  76. dateCalendarChange (date, dateStrings) {
  77. this.selectPriceDate = date[0]
  78. },
  79. resetDate (val) {
  80. this.date = val || []
  81. this.$emit('change', this.date)
  82. }
  83. }
  84. }
  85. </script>