Disabling of hours and minutes based on dynamic data

[monarajhans]

Hi,

I am trying to disable hours and minutes dynamically. I can disable hours fine, but cannot disable minutes properly. I am following the tutorial given here - http://react-component.github.io/time-picker/examples/disabled.html

But I am unable to understand where is "h" in "disabledMinutes(h)" coming from. When I test it locally, h is null.

Here is my code below:

` import React, { Component } from 'react' import TimePicker from 'rc-time-picker';

export default class PickupTimePicker extends Component { render() { const showSecond = false; const str = 'HH:mm'; // const startTime = moment(this.props.startTime).format(str).split(':') const startTime = '13:30'.split(':') const defaultValue = '12:00' const allMinutes = [0, 15, 30, 45]

function generateOptions(excludedOption) {
  const arr = [];
  for (let i = 0; i < allMinutes.length; i += 1) {
    if (allMinutes[i] >= excludedOption) {
      arr.push(allMinutes[i])
    }
  }
  return arr;
}

function disabledHours() {
  const allHours = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
    16, 17, 18, 19, 20, 21, 22, 23]

  if (startTime[0] === '12') return allHours
  allHours.length = startTime[0]
  return allHours;
}

function disabledMinutes(h) {
  const startHour = parseInt(startTime[0], 10)
  const startMinutes = parseInt(startTime[1], 10)
  switch (h) {
    case h === startHour:
      return generateOptions(startMinutes);
    case h < startHour:
      return generateOptions(60);
    default:
      return generateOptions(0);
  }
}

return (
  <div>
    <TimePicker
      showSecond={false}
      className="o9-time-picker"
      // onChange={this.props.onChange}
      disabledHours={disabledHours}
      disabledMinutes={disabledMinutes}
      minuteStep={15}
      format="HH:mm"
    />
  </div>
)

} } `

How can I fix certain minutes to be disabled for the some hours?

[saqlainch92786]

Hi monarajhans , just replace arr.push(allMinutes[i]) with arr.push(excludedOption) in your generateOptions() function

Output :