quickDate.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <div>
  3. <el-button-group size="small" class="inline-24">
  4. <el-button :type="select === '日'?'primary':''" size="small" @click="selectQuick(1)" :disabled="disabled">日</el-button>
  5. <el-button :type="select === '周'?'primary':''" size="small" @click="selectQuick(2)" :disabled="disabled">周</el-button>
  6. <el-button :type="select === '月'?'primary':''" size="small" @click="selectQuick(3)" :disabled="disabled">月</el-button>
  7. <el-button :type="select === '年'?'primary':''" size="small" @click="selectQuick(4)" :disabled="disabled">年</el-button>
  8. </el-button-group>
  9. <span style="font-size: 13px">时间:</span>
  10. <el-date-picker
  11. value-format="yyyy-MM-dd"
  12. @change="selectDate"
  13. :append-to-body="disabled"
  14. size="small"
  15. v-model="value"
  16. type="daterange"
  17. range-separator="至"
  18. start-placeholder="开始日期"
  19. end-placeholder="结束日期">
  20. </el-date-picker>
  21. </div>
  22. </template>
  23. <script>
  24. export default {
  25. name: "quickDate",
  26. props:['disabled'],
  27. data(){
  28. return {
  29. select:'周',
  30. value:'',
  31. begindate:'',
  32. enddate:''
  33. }
  34. },
  35. methods:{
  36. selectQuick(val){
  37. this.value = ''
  38. this.begindate = ''
  39. this.enddate = ''
  40. if (val === 1){
  41. this.select = '日'
  42. var year = new Date().getFullYear()
  43. var month = new Date().getMonth()+1;
  44. var day = new Date().getDate();
  45. this.begindate = year + '-' + month + '-' + day
  46. this.enddate = year + '-' + month + '-' + day
  47. }else if (val === 2){
  48. this.select = '周'
  49. this.getMonday('s')
  50. this.getMonday('e')
  51. }else if (val === 3){
  52. this.select = '月'
  53. this.getMonth('s')
  54. this.getMonth('e')
  55. }else if (val === 4){
  56. this.select = '年'
  57. this.getYear('s')
  58. this.getYear('e')
  59. }else {
  60. this.select = ''
  61. }
  62. this.$emit('selectQuick',this.begindate,this.enddate,this.select)
  63. },
  64. getMonday(type, dates) {
  65. var now = new Date()
  66. var nowTime = now.getTime()
  67. var day = now.getDay()
  68. var longTime = 24 * 60 * 60 * 1000
  69. var n = longTime * 7 * (dates || 0)
  70. if (type == "s") {
  71. var dd = nowTime - (day - 1) * longTime + n
  72. }
  73. if (type == "e") {
  74. var dd = nowTime + (7 - day) * longTime + n
  75. }
  76. dd = new Date(dd)
  77. var y = dd.getFullYear()
  78. var m = dd.getMonth() + 1
  79. var d = dd.getDate();
  80. m = m < 10 ? "0" + m: m
  81. d = d < 10 ? "0" + d: d
  82. var day = y + "-" + m + "-" + d
  83. type == 's'?this.begindate = day : this.enddate = day
  84. },
  85. getMonth(type, months) {
  86. var d = new Date();
  87. var year = d.getFullYear()
  88. var month = d.getMonth() + 1
  89. month = month < 10 ? "0" + month: month
  90. var date = d.getDate();
  91. var firstday = year + "-" + month + "-" + "01"
  92. var lastday = ""
  93. if (month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month == "10" || month == "12") {
  94. lastday = year + "-" + month + "-" + 31
  95. } else if (month == "02") {
  96. if ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)) {
  97. lastday = year + "-" + month + "-" + 29
  98. } else {
  99. lastday = year + "-" + month + "-" + 28
  100. }
  101. } else {
  102. lastday = year + "-" + month + "-" + 30
  103. }
  104. var day = ""
  105. if (type == "s") {
  106. day = firstday
  107. this.begindate = firstday
  108. } else {
  109. day = lastday
  110. this.enddate = lastday
  111. }
  112. },
  113. getYear(type, dates) {
  114. var dd = new Date()
  115. var n = dates || 0
  116. var year = dd.getFullYear() + Number(n)
  117. if (type == "s") {
  118. var day = year + "-01-01"
  119. }
  120. if (type == "e") {
  121. var day = year + "-12-31"
  122. }
  123. if (!type) {
  124. var day = year + "-01-01/" + year + "-12-31"
  125. }
  126. type == 's'?this.begindate = day : this.enddate = day
  127. },
  128. selectDate(){
  129. this.begindate = ''
  130. this.enddate = ''
  131. if (this.value){
  132. this.select = ''
  133. this.begindate = this.value[0]
  134. this.enddate = this.value[1]
  135. }
  136. this.$emit('selectQuick',this.begindate,this.enddate,this.select)
  137. }
  138. }
  139. }
  140. </script>
  141. <style scoped>
  142. </style>