rangeDateTime.vue 2.2 KB

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