handleChange = (value) => {
this.setState({
moId: value,
}, () => {
const param = {
moId: value
}
this.api.projectManage.querybndHours(param).then(res => {
this.setState({
minHours: res,
siStartTime: null,
siEndTime: null,
});
this.props.onFieldChange({
siStartTime: {
value: null,
},
siEndTime: {
value: null,
},
});
})
});
};
onStartChange = (value) => {
this.setState({
siStartTime: value,
siEndTime: null,
});
this.props.onFieldChange({
siStartTime: {
value: value,
},
siEndTime: {
value: null,
},
});
};
onEndChange = (value) => {
this.setState({
siEndTime: value,
});
this.props.onFieldChange({
siEndTime: {
value: value,
},
});
};
disabledStartDate = (startValue) => {
const endValue = this.state.siEndTime;
if (!startValue || !endValue) {
return startValue.valueOf() > new Date().getTime();
}
return startValue.valueOf() > endValue.valueOf();
};
// 重點
disabledEndDate = (endValue) => {
const { minHours } = this.state
const startValue: any = this.state.siStartTime;
if (!endValue || !startValue) {
return endValue.valueOf() > new Date().getTime();
}
// 結束日期不能大於開始日期最大時間跨度 minHours
return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() > new Date().getTime() || endValue.valueOf() - startValue.valueOf() > 24*60*60*1000*(minHours/24);
};
range = (start, end)=>{
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
}
disabledRangeTime = () => {
const { minHours } = this.state
const startValue: any = this.state.siStartTime;
let H:any = moment(startValue).add(minHours, 'hours').format('H');
H = Number(H) + 1;
const M:any = moment(startValue).add(minHours, 'hours').format('m');
const S:any = moment(startValue).add(minHours, 'hours').format('s');
return {
disabledHours: () => this.range(0, 60).splice(H, 20),
disabledMinutes: () => this.range(M, 60),
disabledSeconds: () => this.range(S, 60),
};
}
<FormItem label="初始時間">
{getFieldDecorator('siStartTime', {
initialValue: siStartTime ? moment(siStartTime) : null,
rules: [
{
required: true,
message: '請選擇初始時間',
},
],
})(
<DatePicker
placeholder="請選擇初始時間"
showTime
onChange={this.onStartChange}
allowClear={false}
disabledDate={this.disabledStartDate}
/>
)}
</FormItem>
<FormItem label="結束時間">
{getFieldDecorator('siEndTime', {
initialValue: siEndTime ? moment(siEndTime) : null,
rules: [
{
required: true,
message: '請選擇結束時間',
},
],
})(
<DatePicker
placeholder="請選擇結束時間"
showTime
onChange={this.onEndChange}
allowClear={false}
disabledDate={this.disabledEndDate}
disabledTime={this.disabledRangeTime}
/>
)}
</FormItem>
