default-time.vue 834 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <div class="demo-date-picker">
  3. <div class="block">
  4. <p>Component value:{{ value }}</p>
  5. <el-date-picker
  6. v-model="value"
  7. type="daterange"
  8. start-placeholder="Start date"
  9. end-placeholder="End date"
  10. :default-time="defaultTime"
  11. />
  12. </div>
  13. </div>
  14. </template>
  15. <script lang="ts" setup>
  16. import { ref } from 'vue'
  17. const value = ref('')
  18. const defaultTime = ref<[Date, Date]>([
  19. new Date(2000, 1, 1, 0, 0, 0),
  20. new Date(2000, 2, 1, 23, 59, 59),
  21. ])
  22. </script>
  23. <style scoped>
  24. .demo-date-picker {
  25. display: flex;
  26. width: 100%;
  27. padding: 0;
  28. flex-wrap: wrap;
  29. }
  30. .demo-date-picker .block {
  31. padding: 30px 0;
  32. text-align: center;
  33. border-right: solid 1px var(--el-border-color);
  34. flex: 1;
  35. }
  36. .demo-date-picker .block:last-child {
  37. border-right: none;
  38. }
  39. </style>