vue DateTimePicker设置默认显示当天时间,这是个bug,应该显示他被禁用的时间如何解决
时间: 2024-03-27 22:36:43 浏览: 19
你可以使用 `disabled-time` 属性来设置禁用的时间,然后在 `default-value` 属性中设置默认显示的时间。具体实现可以参考以下代码:
```html
<el-date-picker
v-model="dateTime"
type="datetime"
:default-value="new Date()"
:disabled-time="disabledTime"
></el-date-picker>
```
```javascript
data() {
return {
dateTime: null,
};
},
methods: {
disabledTime(date) {
// 获取当前时间
const now = new Date();
// 如果日期等于当前日期,只允许选择当前时间之后的时间
if (date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate()) {
return {
disabledHours: () => {
return Array.from({ length: now.getHours() }, (v, k) => k);
},
disabledMinutes: () => {
return Array.from({ length: now.getMinutes() }, (v, k) => k);
},
disabledSeconds: () => {
return Array.from({ length: now.getSeconds() }, (v, k) => k);
},
};
}
// 其他日期都不可选择
return {
disabled: true,
};
},
},
```
这段代码会禁用所有的日期,只允许选择当前日期之后的时间。如果你想禁用特定的时间段,可以在 `disabledTime` 方法中进行相应的处理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)