default-time.vue 823 B

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