ant design vue中日期选择框混合时间选择器的用法说明
首先时间格式化用到moment方法，需要在页面中引入moment组件
importmomentfrom'moment'
结构代码：
其中，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中日期选择框混合时间选择器的用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
热门推荐
10 医院探望朋友祝福语简短
11 毕业祝福语简短女朋友
12 春节虎年爸妈祝福语简短
13 儿童毕业祝福语 简短6
14 开工仪式横幅祝福语简短
15 孩子日常祝福语大全简短
16 清晨寄语诗句祝福语简短
17 结婚送亲认亲祝福语简短
18 虎年喝酒拜年祝福语简短