React-datepicker: Ability to hide non-included times

[jaypatel512]

Is your feature request related to a problem? Please describe.
We use this date time picker to present available time slots for customer to schedule appointment. Most businesses have start time and end time around business hours. We use includeTimes to provide only specific times that are available for booking. However, all the times starting from 12:00 AM - 11:30 PM are shown as disabled.

Describe the solution you'd like
Ability to set a boolean to hideDisabledTimes or similar to only show times that are available.

Describe alternatives you've considered
Optionally, allow us to set startTime and endTime such a way that it removes all entries before and after them.

Additional context

[muasir]

This feature will be very useful in mobile view.

[mnsr]

A workaround is using css.

react-datepicker__time-list-item--disabled is the css class used. Just set it to display: none;

[jaypatel512]

That worked. @mnsr Can this be made into a property that we can set ? I am new to javascript and react, probably with some help I can create a PR for it.

[mnsr]

Yes, it's possible to add another property, but I don't see any point in it. In time.jsx, line 108, it adds the disabled class. So if you had a hide prop, you'd just apply a new disabled-hidden (or whatever you want to call it) class.

Overriding the style in your site's stylesheet is just more practical. Realistically, you'd be customising the calendar to match your website's look and feel, so you'd be overriding the styles anyway. I personally feel that props should be reserved for actual functional stuff, rather than trivial style things.

But i'd encourage you to clone it and play around with the code if you want to use it as a learning experience.

[jaypatel512]

I agree with your comments @mnsr . Allowing people to pass visually customizing features as css properties, and keeping the props for functional stuffs only would make it easy to separate the two.

I would definitely love to document these classes at one point to make it obvious for newbies to identify such capabilities easily.

[jaypatel512]

Closing this comment as resolved.