99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
<template>
|
|
<el-config-provider :locale="localeZH">
|
|
<el-date-picker v-model="date" @change="changeDate" style="background-color: #001E31; width: 10vw;"
|
|
type="daterange" range-separator="-">
|
|
</el-date-picker>
|
|
</el-config-provider>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue'
|
|
import localeZH from 'element-plus/es/locale/lang/zh-cn'
|
|
|
|
import { areaObj } from "@/store/index.js"
|
|
const areaStore = areaObj()
|
|
|
|
|
|
// 将时间对象转化为年月日
|
|
const getTime = (time) => {
|
|
var date =time
|
|
var year = date.getFullYear();
|
|
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
var day = date.getDate().toString().padStart(2, '0');
|
|
|
|
var formattedDate = year + '-' + month + '-' + day;
|
|
|
|
return formattedDate
|
|
}
|
|
|
|
const date = ref([areaStore.time[0], areaStore.time[1]])
|
|
const changeDate = (e) => {
|
|
areaStore.changeTime([getTime(e[0]),getTime(e[1])])
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
:deep(.el-picker-panel__body) {
|
|
font-size: 26px;
|
|
text-align: center;
|
|
color: rgb(8, 101, 172);
|
|
background-color: red;
|
|
}
|
|
|
|
#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>input:nth-child(2) {
|
|
color: #C7DBE3 !important;
|
|
}
|
|
|
|
#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>input:nth-child(4) {
|
|
color: #C7DBE3;
|
|
}
|
|
|
|
#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>span {
|
|
color: #C7DBE3;
|
|
}
|
|
|
|
.el-picker-panel {
|
|
background-color: #001E31;
|
|
color: white;
|
|
}
|
|
|
|
.end-date .el-date-table-cell {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.start-date .el-date-table-cell {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.in-range .el-date-table-cell {
|
|
background-color: transparent !important;
|
|
border: 1px solid #41A5BEed;
|
|
box-shadow: inset 0 0 10px #41A5BEed !important;
|
|
}
|
|
|
|
.el-date-table td.end-date .el-date-table-cell__text,
|
|
.el-date-table td.start-date .el-date-table-cell__text {
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
.el-date-range-picker__content.is-left {
|
|
border-right: 1px solid #2C4D54;
|
|
}
|
|
|
|
.el-popper.is-light {
|
|
border: 0;
|
|
}
|
|
|
|
.el-date-table th {
|
|
border-bottom: 1px solid #2C4D54;
|
|
}
|
|
|
|
.el-date-table th {
|
|
color: white;
|
|
}
|
|
</style> |