month-range.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <div class="demo-date-picker">
  3. <div class="block">
  4. <span class="demonstration">Default</span>
  5. <el-date-picker v-model="value1" type="monthrange" range-separator="To" start-placeholder="Start month" end-placeholder="End month" />
  6. </div>
  7. <div class="block">
  8. <span class="demonstration">With quick options</span>
  9. <el-date-picker v-model="value2" type="monthrange" unlink-panels range-separator="To" start-placeholder="Start month" end-placeholder="End month" :shortcuts="shortcuts" />
  10. </div>
  11. </div>
  12. </template>
  13. <script lang="ts" setup>
  14. import { ref } from 'vue'
  15. const value1 = ref('')
  16. const value2 = ref('')
  17. const shortcuts = [
  18. {
  19. text: 'This month',
  20. value: [new Date(), new Date()],
  21. },
  22. {
  23. text: 'This year',
  24. value: () => {
  25. const end = new Date()
  26. const start = new Date(new Date().getFullYear(), 0)
  27. return [start, end]
  28. },
  29. },
  30. {
  31. text: 'Last 6 months',
  32. value: () => {
  33. const end = new Date()
  34. const start = new Date()
  35. start.setMonth(start.getMonth() - 6)
  36. return [start, end]
  37. },
  38. },
  39. ]
  40. </script>
  41. <style scoped>
  42. .demo-date-picker {
  43. display: flex;
  44. width: 100%;
  45. padding: 0;
  46. flex-wrap: wrap;
  47. }
  48. .demo-date-picker .block {
  49. padding: 30px 0;
  50. text-align: center;
  51. border-right: solid 1px var(--el-border-color);
  52. flex: 1;
  53. }
  54. .demo-date-picker .block:last-child {
  55. border-right: none;
  56. }
  57. .demo-date-picker .demonstration {
  58. display: block;
  59. color: var(--el-text-color-secondary);
  60. font-size: 14px;
  61. margin-bottom: 20px;
  62. }
  63. </style>