CODEWITHSUNDEEP
antdtimepicker
Alvina Lakhani
Alvina Lakhani

Reputation: 263

How to have restricted time duration in antd TimePicker?

I am using antd TimePicker in my application. The requirement is to allow user to select time from a specific time duration and not from 24 hours. I tried using hoursStep but that only gives intervals between the hours.

Currently the behaviour is:

enter image description here

Here the list shows from 00 to 23 if I scroll further which is default. Is there a way I can restrict this to 08 to 17 i.e only for a sepcific time duration.

Any help would be appreciated.

Upvotes: 2

Views: 1909

Answers (2)

saqib idrees
saqib idrees

Reputation: 91

For minutes and seconds interval you can use following two properties.

minuteStep={15} secondStep={10}

Upvotes: 1

Alvina Lakhani
Alvina Lakhani

Reputation: 263

Okay so here is the fix that I did, first I disabled the hours I did not want using the property hoursDisabled.

disabledHours={ () => [0, 1, 2, 3, 4, 5, 6, 7, 18, 19, 20, 21, 22, 23] }

This disabled the hours. Then I used another property hideDisabledOptions and set it to true to also hide the disabled hours. And voila! That did it.

Upvotes: 3

Related Questions