{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: () => []
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日期选择器不能选择过去的时间(===当前时间之前的时间) - 芝麻小仙女 - 博客园
–用户表单选择未来动作时,限定一个时间范围,只能选择当前时间之后的日期
–用的饿了么 DateTimePicker插件,日期范围的控制好实现,但是时间范围一直没解决,弄了三种方法,都有瑕疵
1.最优选项:日期OK,时间范围给提示
–*核心代码
//表单 template
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动开始时间(开始前活动不可见)" prop