2024-11-01 05:04:02 +00:00
|
|
|
<template>
|
2024-12-08 02:40:37 +00:00
|
|
|
<div class="demo-range">
|
|
|
|
<el-time-picker
|
|
|
|
v-model="value1"
|
|
|
|
is-range
|
|
|
|
range-separator="To"
|
|
|
|
start-placeholder="Start time"
|
|
|
|
end-placeholder="End time"
|
|
|
|
@change="abc"
|
|
|
|
/>
|
|
|
|
<el-time-picker
|
|
|
|
v-model="value2"
|
|
|
|
is-range
|
|
|
|
arrow-control
|
|
|
|
range-separator="To"
|
|
|
|
start-placeholder="Start time"
|
|
|
|
end-placeholder="End time"
|
|
|
|
/>
|
2024-11-11 01:29:36 +00:00
|
|
|
</div>
|
2024-11-01 05:04:02 +00:00
|
|
|
</template>
|
2024-11-03 04:40:56 +00:00
|
|
|
|
2024-12-08 02:40:37 +00:00
|
|
|
<script lang="ts" setup>
|
2024-12-02 05:04:45 +00:00
|
|
|
import { ref } from 'vue'
|
2024-12-08 02:40:37 +00:00
|
|
|
|
|
|
|
const value1 = ref<[Date, Date]>([
|
|
|
|
new Date(2016, 9, 10, 8, 40),
|
|
|
|
new Date(2016, 9, 10, 9, 40),
|
2024-12-02 05:04:45 +00:00
|
|
|
])
|
2024-12-08 02:40:37 +00:00
|
|
|
const value2 = ref<[Date, Date]>([
|
|
|
|
new Date(2016, 9, 10, 8, 40),
|
|
|
|
new Date(2016, 9, 10, 9, 40),
|
|
|
|
])
|
|
|
|
const abc=()=>{
|
|
|
|
console.log(value1.value);
|
|
|
|
|
2024-12-02 05:04:45 +00:00
|
|
|
}
|
2024-11-11 01:29:36 +00:00
|
|
|
</script>
|
|
|
|
|
2024-12-08 02:40:37 +00:00
|
|
|
<style>
|
|
|
|
.demo-range .el-date-editor {
|
|
|
|
margin: 8px;
|
|
|
|
}
|
2024-12-02 05:04:45 +00:00
|
|
|
|
2024-12-08 02:40:37 +00:00
|
|
|
.demo-range .el-range-separator {
|
|
|
|
box-sizing: content-box;
|
|
|
|
}
|
2024-12-02 05:04:45 +00:00
|
|
|
</style>
|