结构代码：
其中，showTime.defaultValue是设置的默认展示时间，disabledDate为禁用日期，disabledDataTime为禁用时间，详细属性说明可查阅官方文档
下面是方法代码：
methods:{
moment,
onChange(value,dateString){
console.log('SelectedTime:',value)
console.log('FormattedSelectedTime:',dateString)
},
onOk(value){
console.log('onOk:',value)
},
range(start,end){
constresult=[]
for(leti=start;ithis.range(0,24).splice(4,20),
disabledMinutes:()=>this.range(30,60),
disabledSeconds:()=>[55,56]
}
}
}
补充知识：初始化antDesignRangePicker默认选择日期及限制日期可选范围
主要做了两个设置：
1、初始化默认选择日期；
2、限制日期可选范围（限制最大可选范围是最近6个月）
具体实现代码出下：
importReact,{PureComponent}from'react';
importmomentfrom'moment';
import{
Form,
Modal,
DatePicker,
}from'antd';
constFormItem=Form.Item;
const{RangePicker}=DatePicker;
@Form.create()
classExportModalextendsPureComponent{
//表单提交
okHandle=()=>{
const{handleExportByTime,form}=this.props;
form.validateFields((err,fieldsValue)=>{
constrangeValue=fieldsValue['range-picker'];
if(err)return;
constvalues={
...fieldsValue,
'date':[rangeValue[0].format('YYYY-MM-DD'),rangeValue[1].format('YYYY-MM-DD')],
}
//重置表单
form.resetFields();
handleExportByTime(values);
});
};
//不可选择的时间段
disabledDate=current=>current&¤t>moment().endOf('day')||currenthandleModalVisible()}
>
{getFieldDecorator('range-picker',{
initialValue:[defaultSelectDate.startDate,defaultSelectDate.endDate]
})(
以上这篇antdesignvue中日期选择框混合时间选择器的用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。