超详细时间DatePicker、TimePicker输入框案例

 长时只能选择年月日，并且不能选择今日之前，开始时间必须在结束时间之前。

短时只能选择一天中的某一时分，开始时间不能在此时此刻之前，结束时间不能在开始时间之前。（若开始时间在今天之后，结束时间在开始当天且开始时间之后）（若开始时间在今天，结束时间在开始今天且开始时间之后）

两个不能选择的时间函数

  function disabledDateTime(current?: moment.Moment | null | undefined) {
    if (current?.isSame(moment(), 'day')) {
      return {
        disabledHours: () => range(0, 24).splice(0, moment().hours()),
        disabledMinutes: () => {
          if (current?.isSame(moment(), 'hour')) {
            return range(0, 60).splice(0, moment().minutes())
          } else {
            return []
          }
        },
      }
    } else {
      return {
        disabledHours: () => [],
        disabledMinutes: () => [],
      }
    }
  }
  function disabledEndDateTime(current?: moment.Moment | null | undefined) {
    return {
      disabledHours: () =>
        range(0, 24).splice(0, moment(beginTimeChange).hours()),
      disabledMinutes: () => {
        //开始时间：小时，分钟
        //结束小时是开始小时，分钟不能超过，否则分钟都可以选
        if (current?.isSame(moment(beginTimeChange), 'hour')) {
          return range(0, 60).splice(0, moment(beginTimeChange).minutes())
        } else {
          return []
        }
      },
    }
  }

 输入框代码

  {secondmentType == SecondmentType.Hour ? (
            <>
              <Form.Item label="借调开始时间：">
                {getFieldDecorator('beginTime', {
                  getValueFromEvent(e: Moment) {
                    //置空
                    if (!e) {
                      setbeginTimeChange(undefined)
                      return undefined
                    }
                    //此刻之后有效
                    if (e.isAfter(moment())) {
                      setbeginTimeChange(e.valueOf())
                      return e
                    }
                    //此刻之前，设置为当前
                    setbeginTimeChange(moment().valueOf())
                    return moment()
                  },
                  rules: [
                    {required: true, message: '请选择开始时间'},
                    {
                      validator: (rule: any, value: any, callback: any) => {
                        if (value == undefined) callback()
                        if (
                          value.days() == moment().days() &&
                          value.minutes() < moment().minutes()
                        ) {
                          callback('不能选择此刻之前的时间')
                        }
                        callback()
                      },
                    },
                  ],
                })(
                  <DatePicker
                    disabledTime={disabledDateTime}
                    disabledDate={currentDate => {
                      return (
                        currentDate !== null &&
                        currentDate <
                          moment()
                            .endOf('day')
                            .subtract(1, 'days')
                      )
                    }}
                    showTime={{
                      format: 'HH:mm',
                      defaultValue: moment('24:60', 'HH:mm'),
                    }}
                    format="YYYY-MM-DD  HH:mm"
                    style={{width: 292}}
                  />,
                )}
              </Form.Item>
              <Form.Item label="借调截止时间：">
                {getFieldDecorator('endTime', {
                  rules: [{required: true, message: '请选择截止时间'}],
                })(
                  <DatePicker
                    disabledTime={disabledEndDateTime}
                    disabled={beginTimeChange == null ? true : false}
                    disabledDate={currentDate => {
                      return !(
                        currentDate !== null &&
                        currentDate.isSame(beginTimeChange, 'days')
                      )
                    }}
                    showTime={{format: 'HH:mm'}}
                    format="YYYY-MM-DD  HH:mm"
                    style={{width: 292}}
                    onChange={(date: moment.Moment | null) => {
                      setEndTimeChange(date?.valueOf())
                      console.log('截止时间：', endTimeChange)
                    }}
                  />,
                )}
              </Form.Item>
            </>
          ) : (
            <>
              {' '}
              <Form.Item label="借调开始日期：">
                {getFieldDecorator('beginTime', {
                  rules: [{required: true, message: '请选择开始时间'}],
                })(
                  <DatePicker
                    disabledDate={currentDate => {
                      return (
                        currentDate !== null &&
                        currentDate <
                          moment()
                            .endOf('day')
                            .subtract(1, 'days')
                      )
                    }}
                    style={{width: 292}}
                    onChange={(
                      date: moment.Moment | null,
                      dateString: string,
                    ) => {
                      setbeginTimeChange(date?.valueOf())
                    }}
                  />,
                )}
              </Form.Item>
              <Form.Item label="借调截止日期：">
                {getFieldDecorator('endTime', {
                  rules: [{required: true, message: '请选择截止时间'}],
                })(
                  <DatePicker
                    disabled={beginTimeChange == null ? true : false}
                    disabledDate={currentDate => {
                      return (
                        currentDate !== null &&
                        currentDate <
                          moment(beginTimeChange)
                            .endOf('day')
                            .subtract(1, 'days')
                      )
                    }}
                    style={{width: 292}}
                    onChange={(
                      date: moment.Moment | null,
                      dateString: string,
                    ) => {
                      setEndTimeChange(date?.valueOf())
                    }}
                  />,
                )}
              </Form.Item>
            </>
          )}