vue3中,日期选择器el-date-picker——el-config-provider汉化-国际化
日期
·
vue3中,日期选择器el-date-picker——el-config-provider汉化-国际化
效果
index.vue
<template>
<div class="demo-date-picker">
<div class="block">
<p>时间段:{{ value }}</p>
<el-config-provider :locale="locale">
<el-date-picker
v-model="value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="defaultTime"
/>
</el-config-provider>
</div>
</div>
</template>
<script lang="ts" setup>
import locale from "element-plus/lib/locale/lang/zh-cn";
import { ref } from "vue";
const value = ref("");
const defaultTime = ref<[Date, Date]>([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);
</script>
<style scoped>
.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
</style>
更多推荐
已为社区贡献72条内容
所有评论(0)