Add support for step prop

[EricMcWinNer]

This is a simple proposal, when using this plugin, I came across a need to only make users input minutes that are round figures. Say, "12:00, 12:10, 12:20" because I needed to write a scheduler to check for the submitted dates on the backend and do something with it and I did not want to make it query the database every minute as it might consume resources, I felt making it check every 10 minutes would be better.
What I'm saying in essence is that maybe a feature should be added to allow developers customize the steps or multiples of minutes that can be selected.

[wojtekmaj]

I think that's an excellent idea.

Things to consider:

• When step >= 60 Chrome disables second picker (doable), and even removes it if time is exact minute (like 13:12:00). Removing it automatically would conflict with format prop, but could be fine if no format was provided.
• When step < 1 we're selecting milliseconds which is not supported in React-DateTime-Picker or React-Time-Picker. We should probably add it.
• Only some step values seem to work, like 10, 20, 30, 60. Contrary, 25, 40 don't work.
• For time and datetime picker step is in seconds, while for date picker step is in days. Need to document it well.

[thecookieorg]

Hi everyone,

Does anyone know what is the status with this?

[vi-solutions]

Definitely NOT a full solution but if you were so inclined you could simply hide the elements you didn't want. For instance I wanted to display only minutes divisible by 5 so I used the following scss to accomplish this

.rc-time-picker-panel-combobox {
  .rc-time-picker-panel-select:nth-child(2) {
    li {
      display: none;
      &:nth-child(1), &:nth-child(6), &:nth-child(11), &:nth-child(16), &:nth-child(21), &:nth-child(26), &:nth-child(31), &:nth-child(36), &:nth-child(41), &:nth-child(46), &:nth-child(51), &:nth-child(56) {
        display: block
      }
    }
  }
}

[apalmer0]

In case anyone else comes across this, my hacky solution was to intercept the change event, check how many minutes difference there is from the previous datetime, and then add/subtract the desired step before updating the value in state. I'm already using dayjs though so the date manipulations are easier. Hope this helps someone!

const Container = () => {
  const [datetime, setDatetime] = useState<Date>(new Date())

  const handleChange = (newDatetime: Date) => {
    const oldTime = dayjs.utc(datetime)
    const newTime = dayjs.utc(newDatetime)
    const diff = newTime.diff(oldTime, 'minutes')

    if (diff === 1) {
      const updatedNewTime = oldTime.add(30, 'minutes').toDate()
      setDatetime(updatedNewTime)
    } else if (diff === -1) {
      const updatedNewTime = oldTime.subtract(30, 'minutes').toDate()
      setDatetime(updatedNewTime)
    } else {
      setDatetime(newDatetime)
    }
  }

  return (
    <DateTimePicker
      onChange={handleChange}
      value={datetime}
    />
  )
}

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.