收集了js 和ts 的时间选择器的写法:
【react+ts+antd】
组件:
{form.getFieldValue('status') === '03' &&
getFieldDecorator('timingPublishTime', {
initialValue:
isEdit && infomentDetail.timingPublishTime
? moment(infomentDetail.timingPublishTime)
: moment(),
rules: [{ required: true, message: '请选择定时发布时间' }]
})(
<DatePicker
format="YYYY-MM-DD HH:mm:ss"
disabledDate={disabledDate}
showTime
disabledTime={disabledTime}
/>
)}
方法:
const range = (start: any, end: any) => {
const result = [];
for (let i = start; i < end; i += 1) {
result.push(i);
}
return result;
};
// 不可选择以前的时间
const disabledDate = (currentDate: any) => currentDate && currentDate < moment();
const disabledTime = (date: any) => {
const hours = moment().hours();
const minutes = moment().minutes();
const seconds = moment().seconds();
// 当日只能选择当前时间之后的时间点
if (date && moment(date).date() === moment().date()) {
return {
disabledHours: () => range(0, 24).splice(0, hours),
disabledMinutes: () => range(0, 60).splice(0, minutes + 1),
disabledSeconds: () => range(0, 60).splice(0, seconds + 1)
};
}
return {
disabledHours: () => [],
disabledMinutes: () => [],
disabledSeconds: () => []
};
};
a-date-picker 限制选择当前时间以后的时间
disabledDate(current) {
const time = moment().endOf('day').subtract(1, 'days')
return current && current < time
},
rangeHours(start, end, value, chooseday, day) {
const result = []
if (chooseday === day) {
for (let i = start; i < end; i++) {
if (i < value) {
result.push(i)
}
}
}
return result
},
rangeMinutes(start, end, value, chooseday, day, chooseh, h) {
const result = []
if (chooseday === day && chooseh === h) {
for (let i = start; i < end; i++) {
if (i < value) {
result.push(i)
}
}
}
return result
},
rangeSeconds(start, end, value, chooseday, day, chooseh, h, choosem, m) {
const result = []
if (chooseday === day && chooseh === h && choosem === m) {
for (let i = start; i < end; i++) {
if (i < value) {
result.push(i)
}
}
}
return result
},
disabledDateTime(date) {
// 选中的时间
const choosetime = moment(date).format('HH-mm-ss')
const chooseday = parseInt(moment(date).format('YYYY-MM-DD').split('-')[2])
const chooseh = parseInt(choosetime.split('-')[0])
const choosem = parseInt(choosetime.split('-')[1])
// 当前时间
const nowtime = moment().format('HH-mm-ss')
const day = parseInt(moment().format('YYYY-MM-DD').split('-')[2])
const h = parseInt(nowtime.split('-')[0])
const m = parseInt(nowtime.split('-')[1])
const s = parseInt(nowtime.split('-')[2])
return {
disabledHours: () => this.rangeHours(0, 24, h, chooseday, day),
disabledMinutes: () => this.rangeMinutes(0, 60, m, chooseday, day, chooseh, h),
disabledSeconds: () => this.rangeSeconds(0, 60, s, chooseday, day, chooseh, h, choosem, m)
}
},
<a-col :span="12">
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
label="票面出发时间">
<a-date-picker style="width: 100%"
show-time
:disabled-date="disabledDate"
:disabled-time="disabledDateTime"
format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择票面出发时间"
v-decorator="['buyticketDepartureTime', {rules: [{required: true, message: '请选择票面出发时间'}]}]" />
</a-form-item>
</a-col>
参考文章:
1.a-date-picker 限制选择当前时间以后的时间 - 小拐 - 博客园2.【react+ts+antd】DatePicker日期选择器不能选择过去的时间(===当前时间之前的时间) - 芝麻小仙女 - 博客园