rangeDateTime.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <template>
  2. <a-range-picker
  3. style="width:100%"
  4. :value="date"
  5. show-time
  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. },
  23. data () {
  24. return {
  25. date: this.value,
  26. dateFormat: 'YYYY-MM-DD HH:mm:ss',
  27. selectPriceDate: ''
  28. }
  29. },
  30. methods: {
  31. // 不可选日期
  32. disabledDate (current) {
  33. // 最早可倒推选择两年数据,最晚为今天
  34. const minYearVs = moment().subtract(2, 'years') // 两年前 负值
  35. const maxYearVs = moment().endOf('day') // 今天,包含今天
  36. // 限制最多只能查一年区间的数据
  37. if (this.selectPriceDate) {
  38. const oMinYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD HH:mm:ss').subtract(1, 'years') // 当前选中开始日期前推一年
  39. const oMaxYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD HH:mm:ss').add(1, 'years') // 当前选中开始日期后推一年
  40. // 判断两个时间段是否相差m天 第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
  41. const beginDate = minYearVs.diff(oMinYearVs, 'days') > 0 ? minYearVs : oMinYearVs // 若当前选中开始日期前推一年超出最多倒推两年数据时,则以两年为标准
  42. const endDate = maxYearVs.diff(oMaxYearVs, 'days') > 0 ? oMaxYearVs : maxYearVs // 若当前选中开始日期后推一年超出今天时,则以今天为标准
  43. return current && current < beginDate || current && current > endDate
  44. } else {
  45. return current && current > maxYearVs || current && current < minYearVs
  46. }
  47. },
  48. // 日期 change
  49. dateChange (date, dateStrings) {
  50. this.selectPriceDate = ''
  51. this.date = date
  52. this.$emit('change', dateStrings)
  53. },
  54. dateCalendarChange (date, dateStrings) {
  55. this.selectPriceDate = date[0]
  56. },
  57. resetDate (val) {
  58. this.date = val || []
  59. }
  60. }
  61. }
  62. </script>