rangeDate.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <a-range-picker
  3. style="width:100%"
  4. :ranges="rangesVal"
  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. today: {
  32. type: Boolean,
  33. default: true
  34. }
  35. },
  36. data () {
  37. return {
  38. date: this.value,
  39. dateFormat: 'YYYY-MM-DD',
  40. selectPriceDate: ''
  41. }
  42. },
  43. computed: {
  44. rangesVal () {
  45. if (this.today) {
  46. return {
  47. '今天': [moment(), moment()],
  48. '近一个月': [moment().subtract(1, 'months'), moment()],
  49. '本月': [moment().startOf('month'), moment()],
  50. '上月': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')]
  51. }
  52. } else {
  53. return {
  54. '近一个月': [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
  55. '本月': [moment().startOf('month'), moment().subtract(1, 'days')],
  56. '上月': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')]
  57. }
  58. }
  59. }
  60. },
  61. methods: {
  62. // 不可选日期
  63. disabledDate (current) {
  64. // 最早可倒推选择两年数据,最晚为今天
  65. const minYearVs = moment().subtract(2, 'years') // 两年前 负值
  66. const maxYearVs = this.today ? moment().endOf('day') : moment().subtract(1, 'days').endOf('day') // 今天,包含今天
  67. // 限制最多只能查一年区间的数据
  68. if (this.selectPriceDate) {
  69. const oMinYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').subtract(1, 'years') // 当前选中开始日期前推一年
  70. const oMaxYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').add(1, 'years') // 当前选中开始日期后推一年
  71. // 判断两个时间段是否相差m天 第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
  72. const beginDate = minYearVs.diff(oMinYearVs, 'days') > 0 ? minYearVs : oMinYearVs // 若当前选中开始日期前推一年超出最多倒推两年数据时,则以两年为标准
  73. const endDate = maxYearVs.diff(oMaxYearVs, 'days') > 0 ? oMaxYearVs : maxYearVs // 若当前选中开始日期后推一年超出今天时,则以今天为标准
  74. return current && current < beginDate || current && current > endDate
  75. } else {
  76. return current && current > maxYearVs || current && current < minYearVs
  77. }
  78. },
  79. // 日期 change
  80. dateChange (date, dateStrings) {
  81. this.selectPriceDate = ''
  82. this.date = date
  83. if (dateStrings[0] == '' && dateStrings[1] == '') {
  84. dateStrings = []
  85. } else {
  86. if (this.showTime) {
  87. dateStrings[0] = dateStrings[0] + ' 00:00:00'
  88. dateStrings[1] = dateStrings[1] + ' 23:59:59'
  89. }
  90. }
  91. this.$emit('change', dateStrings)
  92. },
  93. dateCalendarChange (date, dateStrings) {
  94. this.selectPriceDate = date[0]
  95. },
  96. resetDate (val) {
  97. this.date = val || []
  98. this.$emit('change', this.date)
  99. }
  100. }
  101. }
  102. </script>