主要是hzero-ui沒找到一個能直接設(shè)置禁用某時刻之前的時間,只能禁用某些日期,在對小時、分鐘、秒進(jìn)行禁用設(shè)置時,只能禁用特定時段的時間,如0-8點(diǎn),非常不靈活。
有有一種方式是對form的getFieldDecorator方法中的rule里面通過寫min和max,這樣選擇了超出范圍的時間時,會有紅色的報錯提示。這樣也能實現(xiàn),但是效果跟理想的效果有一些差距。
于是就只能對change事件進(jìn)行監(jiān)聽,對disabledTime進(jìn)行動態(tài)設(shè)置。
組件支持方案:用dataSet搭配C7nPro的 DatePicker組件
這樣可以直接在dataSet的fields屬性里面直接寫min和max,實現(xiàn)的效果堪稱完美,方便極了。
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;
}
}