主要是hzero-ui沒找到一个能直接设置禁用某时刻之前的时间,只能禁用某些日期,在对小时、分钟、秒进行禁用设置时,只能禁用特定时段的时间,如0-8点,非常不灵活。
有有一种方式是对form的getFieldDecorator方法中的rule里面通过写min和max,这样选择了超出范围的时间时,会有红色的报错提示。这样也能实现,但是效果跟理想的效果有一些差距。
于是就只能对change事件进行监听,对disabledTime进行动态设置。
组件支持方案:用dataSet搭配C7nPro的 DatePicker组件
这样可以直接在dataSet的fields属性里面直接写min和max,实现的效果堪称完美,方便极了。
function disabledDate(now) {
return now && now < moment().startOf('day');
}
function range(start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
}
export default class XXX extends React.Component {
state = {
disabledTime: () => {
return {
disabledHours: () => range(0, 0),
disabledMinutes: () => range(0, 0),
disabledSeconds: () => range(0, 0),
};
},
};
componentDidMount() {
this.setState({
disabledTime: () => {
return {
disabledHours: () => range(0, moment().hour()),
disabledMinutes: () => range(0, moment().minute()),
disabledSeconds: () => range(0, 60),
};
},
});
}
setDisabledTime = (current) => {
const cur = moment(current);
const now = moment();
if (cur.format('YYYY MM DD') === now.format('YYYY MM DD')) {
this.setState({
disabledTime: () => {
return {
disabledHours: () => range(0, now.hour()),
disabledMinutes: () => range(0, 0),
disabledSeconds: () => range(0, 0),
};
},
});
if (cur.hour() === now.hour()) {
this.setState({
disabledTime: () => {
return {
disabledHours: () => range(0, now.hour()),
disabledMinutes: () => range(0, now.minute()),
disabledSeconds: () => range(0, 0),
};
},
});
if (cur.minute() === now.minute()) {
this.setState({
disabledTime: () => {
return {
disabledHours: () => range(0, now.hour()),
disabledMinutes: () => range(0, now.minute()),
disabledSeconds: () => range(0, now.second()),
};
},
});
} else {
this.setState({
disabledTime: () => {
return {
disabledHours: () => range(0, now.hour()),
disabledMinutes: () => range(0, now.minute()),
disabledSeconds: () => range(0, 0),
};
},
});
}
} else {
this.setState({
disabledTime: () => {
return {
disabledHours: () => range(0, now.hour()),
disabledMinutes: () => range(0, 0),
disabledSeconds: () => range(0, 0),
};
},
});
}
} else {
this.setState({
disabledTime: () => {
return {
disabledHours: () => range(0, 0),
disabledMinutes: () => range(0, 0),
disabledSeconds: () => range(0, 0),
};
},
});
}
};
render(){
return (
<DatePicker
renderExtraFooter={this.quotationEndDateFooter} // 渲染个小方块挡住左下角的“此刻”按钮
onChange={this.setDisabledTime}
disabledDate={disabledDate} // 禁用日期
disabledTime={disabledTime} // 禁用时间
/>
)
}
}
// 用来渲染小方块
.datepicker-foot-wrapper {
width: 0;
height: 0;
div {
width: 40px;
height: 30px;
background-color: white;
position: relative;
top: 5px;
}
}