日期时间选择器ant-design
时间: 2024-12-30 13:21:06 浏览: 68
### Ant Design 日期时间选择器使用指南
#### 一、组件简介
Ant Design 的 `DatePicker` 组件提供了多种模式用于处理不同场景下的日期和时间选取需求。这不仅限于简单的日历选择,还包括特定的时间范围挑选等功能[^1]。
#### 二、基本用法
对于想要实现基础功能的应用程序来说,可以通过如下方式引入并配置最简易版的日期选择框:
```javascript
import { DatePicker } from 'ant-design-vue';
// 或者按需加载单项组件
import DatePicker from 'ant-design-vue/lib/date-picker';
Vue.use(DatePicker);
```
接着,在模板部分可以这样定义一个输入控件:
```html
<a-date-picker @change="onChange" />
```
这里通过监听 change 事件获取用户选定的具体时刻,并将其传递给父级作用域内的处理器函数 onChange() 进行后续逻辑操作[^2]。
#### 三、高级特性支持
除了上述的基础形式外,该组件还允许开发者自定义显示格式、设置默认选中的初始值以及限定可选项范围等参数。例如下面这段代码展示了如何指定不同的展示样式及时区信息:
```html
<template>
<a-space direction="vertical">
<!-- 带有快捷面板 -->
<a-date-picker show-time placeholder="Select Time" @ok="onOk"/>
<!-- 设置最小最大年份限制 -->
<a-month-picker v-model:value="valueMonth" :disabledDate="disabledDate"/>
<!-- 自定义分隔符 -->
<a-range-picker valueFormat="YYYY-MM-DD HH:mm:ss"
separator="-"
format="YYYY/MM/DD HH:mm:ss"/>
</a-space>
</template>
<script lang="ts">
export default {
setup(){
const onOk=(time:string)=>{
console.log(time);
}
function disabledDate(current:any){
// Can not select days before today and today
return current && current.valueOf() < Date.now();
}
return{
onOk,
disabledDate
};
},
};
</script>
```
以上实例分别实现了带有时钟界面的选择窗口、仅能浏览月份视图的日历插件还有两个相连的起始结束区间型部件[^3]。
阅读全文
相关推荐


















