mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-11-30 02:08:12 +08:00
feat(components): [date-picker] add icon slots (#17453)
* feat(components): [date-picker] add icon slots * chore: update date-picker.md * feat: add `prev-year`、`next-year` with year range * Apply suggestions from code review --------- Co-authored-by: qiang <qw13131wang@gmail.com>
This commit is contained in:
知晓同丶
GitHub
parent
d608f25170
commit
839a702af7
@ -125,6 +125,16 @@ date-picker/custom-content
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Custom icon ^(2.8.0)
|
||||||
|
|
||||||
|
Custom icons available with slots.
|
||||||
|
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
date-picker/custom-icon
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
For data details, please refer:
|
For data details, please refer:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
@ -203,10 +213,14 @@ Note, date time locale (month name, first day of the week ...) are also configur
|
|||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --------------- | ------------------------------ |
|
| ------------------- | ------------------------------ |
|
||||||
| default | custom cell content |
|
| default | custom cell content |
|
||||||
| range-separator | custom range separator content |
|
| range-separator | custom range separator content |
|
||||||
|
| prev-month ^(2.8.0) | prev month icon |
|
||||||
|
| next-month ^(2.8.0) | next month icon |
|
||||||
|
| prev-year ^(2.8.0) | prev year icon |
|
||||||
|
| next-year ^(2.8.0) | next year icon |
|
||||||
|
|
||||||
### Exposes
|
### Exposes
|
||||||
|
|
||||||
|
|||||||
@ -73,6 +73,16 @@ datetime-picker/default-time
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Custom icon ^(2.8.0)
|
||||||
|
|
||||||
|
Custom icons available with slots.
|
||||||
|
|
||||||
|
:::demo
|
||||||
|
|
||||||
|
datetime-picker/custom-icon
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| Name | Description | Type | Accepted Values | Default |
|
| Name | Description | Type | Accepted Values | Default |
|
||||||
@ -127,7 +137,11 @@ datetime-picker/default-time
|
|||||||
|
|
||||||
## Slots
|
## Slots
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
| --------------- | ------------------------------ |
|
| ------------------- | ------------------------------ |
|
||||||
| default | custom cell content |
|
| default | custom cell content |
|
||||||
| range-separator | custom range separator content |
|
| range-separator | custom range separator content |
|
||||||
|
| prev-month ^(2.8.0) | prev month icon |
|
||||||
|
| next-month ^(2.8.0) | next month icon |
|
||||||
|
| prev-year ^(2.8.0) | prev year icon |
|
||||||
|
| next-year ^(2.8.0) | next year icon |
|
||||||
|
|||||||
267
docs/examples/date-picker/custom-icon.vue
Normal file
267
docs/examples/date-picker/custom-icon.vue
Normal file
@ -0,0 +1,267 @@
|
|||||||
|
<template>
|
||||||
|
<div class="demo-date-picker-icon">
|
||||||
|
<div class="container">
|
||||||
|
<div class="block">
|
||||||
|
<div class="demonstration">date</div>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value1"
|
||||||
|
type="date"
|
||||||
|
placeholder="Pick a day"
|
||||||
|
format="YYYY/MM/DD"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
>
|
||||||
|
<template #prev-month>
|
||||||
|
<el-icon><CaretLeft /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #next-month>
|
||||||
|
<el-icon><CaretRight /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #prev-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
<template #next-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<div class="line" />
|
||||||
|
<div class="block">
|
||||||
|
<div class="demonstration">date range</div>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value2"
|
||||||
|
type="daterange"
|
||||||
|
start-placeholder="Start date"
|
||||||
|
end-placeholder="End date"
|
||||||
|
format="YYYY/MM/DD"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
unlink-panels
|
||||||
|
>
|
||||||
|
<template #prev-month>
|
||||||
|
<el-icon><CaretLeft /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #next-month>
|
||||||
|
<el-icon><CaretRight /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #prev-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
<template #next-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="line" />
|
||||||
|
<div class="block">
|
||||||
|
<div class="demonstration">month range</div>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value3"
|
||||||
|
type="monthrange"
|
||||||
|
start-placeholder="Start date"
|
||||||
|
end-placeholder="End date"
|
||||||
|
format="YYYY/MM/DD"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
unlink-panels
|
||||||
|
>
|
||||||
|
<template #prev-month>
|
||||||
|
<el-icon><CaretLeft /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #next-month>
|
||||||
|
<el-icon><CaretRight /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #prev-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
<template #next-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<div class="line" />
|
||||||
|
<div class="block">
|
||||||
|
<div class="demonstration">year range</div>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value4"
|
||||||
|
type="yearrange"
|
||||||
|
range-separator="To"
|
||||||
|
start-placeholder="Start Year"
|
||||||
|
end-placeholder="End Year"
|
||||||
|
>
|
||||||
|
<template #prev-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
<template #next-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
const value1 = ref('')
|
||||||
|
const value2 = ref('')
|
||||||
|
const value3 = ref('')
|
||||||
|
const value4 = ref('')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.demo-date-picker-icon {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-date-picker-icon .block {
|
||||||
|
padding: 30px 0;
|
||||||
|
text-align: center;
|
||||||
|
border-right: solid 1px var(--el-border-color);
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-date-picker-icon .block:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-date-picker-icon .container {
|
||||||
|
flex: 1;
|
||||||
|
border-right: solid 1px var(--el-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-date-picker-icon .container .block {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-date-picker-icon .container .block:last-child {
|
||||||
|
border-top: solid 1px var(--el-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-date-picker-icon .container:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-date-picker-icon .demonstration {
|
||||||
|
display: block;
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
135
docs/examples/datetime-picker/custom-icon.vue
Normal file
135
docs/examples/datetime-picker/custom-icon.vue
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<div class="demo-datetime-picker-icon">
|
||||||
|
<div class="block">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value1"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="Pick a Date"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
date-format="MMM DD, YYYY"
|
||||||
|
time-format="HH:mm"
|
||||||
|
>
|
||||||
|
<template #prev-month>
|
||||||
|
<el-icon><CaretLeft /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #next-month>
|
||||||
|
<el-icon><CaretRight /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #prev-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
<template #next-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
<div class="line" />
|
||||||
|
<div class="block">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="value2"
|
||||||
|
type="datetimerange"
|
||||||
|
start-placeholder="Start date"
|
||||||
|
end-placeholder="End date"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
date-format="YYYY/MM/DD ddd"
|
||||||
|
time-format="A hh:mm:ss"
|
||||||
|
unlink-panels
|
||||||
|
>
|
||||||
|
<template #prev-month>
|
||||||
|
<el-icon><CaretLeft /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #next-month>
|
||||||
|
<el-icon><CaretRight /></el-icon>
|
||||||
|
</template>
|
||||||
|
<template #prev-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
<template #next-year>
|
||||||
|
<el-icon>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g stroke-width="1" fill-rule="evenodd">
|
||||||
|
<g fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
const value1 = ref('')
|
||||||
|
const value2 = ref('')
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.demo-datetime-picker-icon {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
.demo-datetime-picker-icon .block {
|
||||||
|
padding: 30px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
width: 1px;
|
||||||
|
background-color: var(--el-border-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -71,7 +71,9 @@
|
|||||||
:class="ppNs.e('icon-btn')"
|
:class="ppNs.e('icon-btn')"
|
||||||
@click="moveByYear(false)"
|
@click="moveByYear(false)"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-left /></el-icon>
|
<slot name="prev-year">
|
||||||
|
<el-icon><d-arrow-left /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-show="currentView === 'date'"
|
v-show="currentView === 'date'"
|
||||||
@ -81,7 +83,9 @@
|
|||||||
class="arrow-left"
|
class="arrow-left"
|
||||||
@click="moveByMonth(false)"
|
@click="moveByMonth(false)"
|
||||||
>
|
>
|
||||||
<el-icon><arrow-left /></el-icon>
|
<slot name="prev-month">
|
||||||
|
<el-icon><arrow-left /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
@ -115,7 +119,9 @@
|
|||||||
class="arrow-right"
|
class="arrow-right"
|
||||||
@click="moveByMonth(true)"
|
@click="moveByMonth(true)"
|
||||||
>
|
>
|
||||||
<el-icon><arrow-right /></el-icon>
|
<slot name="next-month">
|
||||||
|
<el-icon><arrow-right /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -124,7 +130,9 @@
|
|||||||
class="d-arrow-right"
|
class="d-arrow-right"
|
||||||
@click="moveByYear(true)"
|
@click="moveByYear(true)"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-right /></el-icon>
|
<slot name="next-year">
|
||||||
|
<el-icon><d-arrow-right /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -113,7 +113,9 @@
|
|||||||
class="d-arrow-left"
|
class="d-arrow-left"
|
||||||
@click="leftPrevYear"
|
@click="leftPrevYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-left /></el-icon>
|
<slot name="prev-year">
|
||||||
|
<el-icon><d-arrow-left /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -122,7 +124,9 @@
|
|||||||
class="arrow-left"
|
class="arrow-left"
|
||||||
@click="leftPrevMonth"
|
@click="leftPrevMonth"
|
||||||
>
|
>
|
||||||
<el-icon><arrow-left /></el-icon>
|
<slot name="prev-month">
|
||||||
|
<el-icon><arrow-left /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="unlinkPanels"
|
v-if="unlinkPanels"
|
||||||
@ -133,7 +137,9 @@
|
|||||||
class="d-arrow-right"
|
class="d-arrow-right"
|
||||||
@click="leftNextYear"
|
@click="leftNextYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-right /></el-icon>
|
<slot name="next-year">
|
||||||
|
<el-icon><d-arrow-right /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="unlinkPanels"
|
v-if="unlinkPanels"
|
||||||
@ -147,7 +153,9 @@
|
|||||||
class="arrow-right"
|
class="arrow-right"
|
||||||
@click="leftNextMonth"
|
@click="leftNextMonth"
|
||||||
>
|
>
|
||||||
<el-icon><arrow-right /></el-icon>
|
<slot name="next-month">
|
||||||
|
<el-icon><arrow-right /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<div>{{ leftLabel }}</div>
|
<div>{{ leftLabel }}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -175,7 +183,9 @@
|
|||||||
class="d-arrow-left"
|
class="d-arrow-left"
|
||||||
@click="rightPrevYear"
|
@click="rightPrevYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-left /></el-icon>
|
<slot name="prev-year">
|
||||||
|
<el-icon><d-arrow-left /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="unlinkPanels"
|
v-if="unlinkPanels"
|
||||||
@ -189,7 +199,9 @@
|
|||||||
class="arrow-left"
|
class="arrow-left"
|
||||||
@click="rightPrevMonth"
|
@click="rightPrevMonth"
|
||||||
>
|
>
|
||||||
<el-icon><arrow-left /></el-icon>
|
<slot name="prev-month">
|
||||||
|
<el-icon><arrow-left /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -198,7 +210,9 @@
|
|||||||
class="d-arrow-right"
|
class="d-arrow-right"
|
||||||
@click="rightNextYear"
|
@click="rightNextYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-right /></el-icon>
|
<slot name="next-year">
|
||||||
|
<el-icon><d-arrow-right /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -207,7 +221,9 @@
|
|||||||
class="arrow-right"
|
class="arrow-right"
|
||||||
@click="rightNextMonth"
|
@click="rightNextMonth"
|
||||||
>
|
>
|
||||||
<el-icon><arrow-right /></el-icon>
|
<slot name="next-month">
|
||||||
|
<el-icon><arrow-right /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<div>{{ rightLabel }}</div>
|
<div>{{ rightLabel }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -30,7 +30,9 @@
|
|||||||
class="d-arrow-left"
|
class="d-arrow-left"
|
||||||
@click="leftPrevYear"
|
@click="leftPrevYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-left /></el-icon>
|
<slot name="prev-year">
|
||||||
|
<el-icon><d-arrow-left /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="unlinkPanels"
|
v-if="unlinkPanels"
|
||||||
@ -43,7 +45,9 @@
|
|||||||
class="d-arrow-right"
|
class="d-arrow-right"
|
||||||
@click="leftNextYear"
|
@click="leftNextYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-right /></el-icon>
|
<slot name="next-year">
|
||||||
|
<el-icon><d-arrow-right /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<div>{{ leftLabel }}</div>
|
<div>{{ leftLabel }}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -69,7 +73,9 @@
|
|||||||
class="d-arrow-left"
|
class="d-arrow-left"
|
||||||
@click="rightPrevYear"
|
@click="rightPrevYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-left /></el-icon>
|
<slot name="prev-year">
|
||||||
|
<el-icon><d-arrow-left /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -77,7 +83,9 @@
|
|||||||
class="d-arrow-right"
|
class="d-arrow-right"
|
||||||
@click="rightNextYear"
|
@click="rightNextYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-right /></el-icon>
|
<slot name="next-year">
|
||||||
|
<el-icon><d-arrow-right /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<div>{{ rightLabel }}</div>
|
<div>{{ rightLabel }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -21,7 +21,9 @@
|
|||||||
:class="leftPanelKls.arrowLeftBtn"
|
:class="leftPanelKls.arrowLeftBtn"
|
||||||
@click="leftPrevYear"
|
@click="leftPrevYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-left /></el-icon>
|
<slot name="prev-year">
|
||||||
|
<el-icon><d-arrow-left /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="unlinkPanels"
|
v-if="unlinkPanels"
|
||||||
@ -30,7 +32,9 @@
|
|||||||
:class="leftPanelKls.arrowRightBtn"
|
:class="leftPanelKls.arrowRightBtn"
|
||||||
@click="leftNextYear"
|
@click="leftNextYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-right /></el-icon>
|
<slot name="next-year">
|
||||||
|
<el-icon><d-arrow-right /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<div>{{ leftLabel }}</div>
|
<div>{{ leftLabel }}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -55,14 +59,18 @@
|
|||||||
:class="rightPanelKls.arrowLeftBtn"
|
:class="rightPanelKls.arrowLeftBtn"
|
||||||
@click="rightPrevYear"
|
@click="rightPrevYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-left /></el-icon>
|
<slot name="prev-year">
|
||||||
|
<el-icon><d-arrow-left /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
:class="rightPanelKls.arrowRightBtn"
|
:class="rightPanelKls.arrowRightBtn"
|
||||||
@click="rightNextYear"
|
@click="rightNextYear"
|
||||||
>
|
>
|
||||||
<el-icon><d-arrow-right /></el-icon>
|
<slot name="next-year">
|
||||||
|
<el-icon><d-arrow-right /></el-icon>
|
||||||
|
</slot>
|
||||||
</button>
|
</button>
|
||||||
<div>{{ rightLabel }}</div>
|
<div>{{ rightLabel }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -81,7 +81,14 @@ export default defineComponent({
|
|||||||
>
|
>
|
||||||
{{
|
{{
|
||||||
default: (scopedProps: /**FIXME: remove any type */ any) => (
|
default: (scopedProps: /**FIXME: remove any type */ any) => (
|
||||||
<Component {...scopedProps} />
|
<Component {...scopedProps}>
|
||||||
|
{{
|
||||||
|
'prev-month': slots['prev-month'],
|
||||||
|
'next-month': slots['next-month'],
|
||||||
|
'prev-year': slots['prev-year'],
|
||||||
|
'next-year': slots['next-year'],
|
||||||
|
}}
|
||||||
|
</Component>
|
||||||
),
|
),
|
||||||
'range-separator': slots['range-separator'],
|
'range-separator': slots['range-separator'],
|
||||||
}}
|
}}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user