这篇文章主要介绍了ant design vue中日期选择框混合时间选择器的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
首先时间格式化用到moment方法，需要在页面中引入moment组件
import moment from 'moment'
结构代码：
其中，showTime.defaultValue是设置的默认展示时间，disabledDate为禁用日期，disabledDataTime为禁用时间，详细属性说明可查阅官方文档
下面是方法代码：
methods: { moment, onChange (value, dateString) { console.log('Selected Time: ', value) console.log('Formatted Selected Time: ', dateString) }, onOk (value) { console.log('onOk: ', value) }, range (start, end) { const result = [] for (let i = start; i this.range(0, 24).splice(4, 20), disabledMinutes: () => this.range(30, 60), disabledSeconds: () => [55, 56] } } } 补充知识：初始化antDesign RangePicker默认选择日期及限制日期可选范围
主要做了两个设置：
1、初始化默认选择日期；
2、限制日期可选范围（限制最大可选范围是最近6个月）
具体实现代码出下：
import React, { PureComponent } from 'react'; import moment from 'moment'; import { Form, Modal, DatePicker, } from 'antd'; const FormItem = Form.Item; const { RangePicker } = DatePicker; @Form.create() class ExportModal extends PureComponent { // 表单提交 okHandle = () => { const { handleExportByTime, form } = this.props; form.validateFields((err, fieldsValue) => { const rangeValue = fieldsValue['range-picker']; if (err) return; const values ={ ...fieldsValue, 'date': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')], } // 重置表单 form.resetFields(); handleExportByTime(values); }); }; // 不可选择的时间段 disabledDate = current => current && current > moment().endOf('day') || current handleModalVisible()} > {getFieldDecorator('range-picker',{ initialValue: [defaultSelectDate.startDate, defaultSelectDate.endDate] })( )} ); } } export default ExportModal; 以上就是ant design vue中日期选择框混合时间选择器的用法说明的详细内容，更多请关注0133技术站其它相关文章！
