vue3elementui时间选择器如何显示今天的日期
时间: 2024-09-11 12:14:54 浏览: 28
在Vue3中使用Element UI的时间选择器组件,你可以通过设置初始值或v-model绑定到组件上来指定默认显示今天日期。Element UI的TimePicker组件有一个props叫做`default-value`,可以用来设置默认选中的时间。以下是一个简单的示例:
```html
<template>
<el-time-picker v-model="currentTime" placeholder="请选择时间">
<!-- 如果你想显示今天开始的时间 -->
<el-option
label="今日"
value="00:00:00"
:key="0"
></el-option>
</el-time-picker>
</template>
<script setup>
import { ref } from 'vue';
const currentTime = ref(new Date().toLocaleTimeString()); // 默认显示当前时间
</script>
```
在这个例子中,`currentTime`是当前时间的引用,在组件渲染时会自动更新为当前时间。如果你想显示今天零点作为默认值,可以直接将`value`设置为`"00:00:00"`。
如果你希望每次都显示当天的日期,而不是时间,可以稍微调整下代码,使用`Date`对象获取当前日期,并清空时间部分:
```html
<template>
<el-date-picker
type="datetime"
v-model="todayDate"
placeholder="请选择日期"
></el-date-picker>
</template>
<script setup>
import { ref } from 'vue';
// 获取当前日期并清空时间
const todayDate = ref(() => {
const now = new Date();
return `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
});
</script>
```
这里使用了`el-date-picker`组件,它更专注于日期的选择。记得在`type`属性上设置为`"datetime"`以允许用户同时选择日期和时间。