rangeDate.vue 2.5 KB

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