TimePicker 时间选择

TimePicker禁用时间参考 Antd TimePicker
https://ant.design/components/time-picker-cn/#components-time-picker-demo-disabled

• disabledHours，没有参数，function()
• disabledMinutes，参数是当前选中的时间，function(selectedHour)
• disabledSeconds，参数是当前选中的时间和分钟，function(selectedHour, selectedMinute)
• hideDisabledOptions，禁用的时间不显示
• allowClear
  • 清除时间后，onChange(momentime, timeString)
  • momentime为 null，timeStirng为空字符串

disabledHours 传入的数组，就是禁用的时间

type DisabledTime = (now: Moment) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};
<TimePicker
  onChange={value => {
      setEndTime(value);
      triggerChange({ end: value });
    }}
    value={value.end || moment('23:59:59', 'HH:mm:ss')}
    allowClear={false}
    disabled={disabled}
    disabledHours={disEndHouse}
    disabledMinutes={disEndMinute}
    disabledSeconds={disEndSeconds}
      // showTime={{ format: 'HH:mm:ss', minuteStep: 15 }}
  />

之前的时间禁用

import React from 'react'
import { DatePicker } from 'antd'
import { object, func } from 'prop-types'
import moment from 'moment'
const { TimePicker } = DatePicker
TimeSelect.propTypes = {
  value: object,
  onChange: func.isRequired,
}
function TimeSelect({ value, onChange }) {
  const [state, setState] = useState(value || moment())
  function timeChange(mtime, timeString) {
    // clear momentime: null, timeString: ''
    setState(mtime)
    onChange(mtime)
  }
  // 之前的小时禁用，没有参数
  function disabledHours() {
    // ["13", "59"]
    return Array.from({ length: state.hours() }, (_, i) => i)
  }
  // 之前的分钟禁用，参数是选中的小时
  function disabledMinutes(selectedHour) {
    if (state.hours() === selectedHour) {
      return Array.from({ length: state.minutes() }, (_, i) => i)
    }
    return []
  }
  // 之前的秒禁用，参数是当前选中的小时，分钟
  function disabledSeconds(selectedHour, selectedMinute) {
    const flag = state.hours() === selectedHour && state.minutes() === selectedMinute
    if (flag) {
      return Array.from({ length: state.seconds() }, (_, i) => i)
    }
    return []
  }
  return (
    <TimePicker
      value={state}
      onChange={timeChange}
      disabled={disabled}
      disabledHours={disabledHours}
      disabledMinutes={disabledMinutes}
      disabledSeconds={disabledSeconds}
      // 之前 & 之后的时间都不显示
      hideDisabledOptions
      format="HH:mm:ss"
      allowClear={false}
    />
  )
}
export default TimeSelect

之后的时间禁用

const [state, setState] = useState(value || moment())
// 之后的小时禁用
function disabledHours() {
  // ["11", "19"] +1 当前时间可以选择
  // [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
  const hours = state.hours() + 1;
  return Array.from({length: 24 - hours}, (_, i) => hours+i);
}
// 之后的分钟禁用，参数是选中的小时
function disabledMinutes(selectedHour) {
  if(state.hours() === selectedHour) {
    const minutes = state.minutes() + 1;
    return Array.from({length: 60-minutes}, (_, i) => minutes+i);
  }
  return [];
}
// 之后的秒禁用，参数是当前选中的小时，分钟
function disabledSeconds(selectedHour, selectedMinute) {
  const flag = state.hours() === selectedHour && state.minutes() === selectedMinute;
  if(flag) {
    const seconds = state.seconds() + 1;
    return Array.from({length: 60-seconds}, (_, i) => seconds+i);
  }
  return [];
}