DatePicker.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <template>
  2. <div class="datePicker">
  3. <a-range-picker
  4. v-model="dateValue"
  5. style="width:250px;height:150px"
  6. :open='openOptions'
  7. :disabled-date="disabledDate"
  8. :openChange='openChange'
  9. @change="onChange" />
  10. <div class="pickOptions" v-show='openOptions'>
  11. <div v-for="item in pickOptions" :key="item.key" @click="changeDate(item)">{{item.title}}</div>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. import moment from 'moment';
  17. let pickOptions=[
  18. {
  19. title:'今天',
  20. key:'1',
  21. value:1,
  22. dateValue:[moment(),moment()]
  23. },
  24. {
  25. title:'昨天',
  26. key:'2',
  27. value:2,
  28. dateValue:[moment().subtract(1,'days'),moment().subtract(1,'days')]
  29. },
  30. {
  31. title:'一周',
  32. key:'3',
  33. value:3,
  34. dateValue:[moment().subtract(7,'days'),moment()]
  35. },
  36. {
  37. title:'一个月',
  38. key:'5',
  39. value:5,
  40. dateValue:[moment().subtract(1,'months'),moment()]
  41. },
  42. {
  43. title:'三个月',
  44. key:'6',
  45. value:6,
  46. dateValue:[moment().subtract(3,'months'),moment()]
  47. },
  48. {
  49. title:'六个月',
  50. key:'7',
  51. value:7,
  52. dateValue:[moment().subtract(6,'months'),moment()]
  53. },
  54. {
  55. title:'一年',
  56. key:'8',
  57. value:8,
  58. dateValue:[moment().subtract(1,'years'),moment()]
  59. },
  60. ]
  61. export default {
  62. props:['openOptions'],
  63. data() {
  64. return {
  65. moment,
  66. dateValue:[],
  67. type:0,
  68. pickOptions
  69. // pickOptions:JSON.parse(JSON.stringify(pickOptions))
  70. }
  71. },
  72. methods: {
  73. //日期改变事件
  74. onChange(date,dateString){
  75. this.dateValue=date;
  76. console.log(this.dateValue)
  77. if(dateString.length==2){
  78. this.$parent.opendate();
  79. this.$parent.type=9
  80. this.$parent.dateValue=date
  81. };
  82. },
  83. //侧边的按钮点击事件
  84. changeDate(val){
  85. this.type=val.value
  86. this.dateValue=val.dateValue;
  87. // console.log(this.dateValue)
  88. this.$parent.type=val.value
  89. this.$parent.dateValue=val.dateValue
  90. },
  91. disabledDate(current) {
  92. // console.log(current)
  93. return current && current > moment().subtract(1, 'day')
  94. },
  95. openChange(open){
  96. console.log(open)
  97. },
  98. },
  99. mounted() {
  100. this.dateValue=[moment(),moment()]
  101. },
  102. }
  103. </script>
  104. <style lang="scss" scoped>
  105. .datePicker{
  106. position: relative;
  107. .pickOptions{
  108. width: 100px;
  109. background-color: #FFF;
  110. height: 302px;
  111. position: absolute;
  112. top: -2px;
  113. left: -402px;
  114. border-right: 1px solid #999;
  115. box-shadow: 0 0 15px rgba(0,0,0,0.1);
  116. div{
  117. height: 43px;
  118. padding: 10px 15px;
  119. box-sizing: border-box;
  120. }
  121. }
  122. }
  123. </style>