implement availableTimes property for DateTimePicker

[zhisme]

Hello!

I needed one feature for my work project, so I implemented this in your library.
Business task was set like so:

Person need to select time only in working hours e.g. (8 AM - 8 PM)

As I couldn't achieve it by timeComponent, because it renders empty li tags that can be clicked, I modified getDates function in order to achieve this goal.
Hope you will find my PR useful

[zhisme]

@jquense any feedback? 🙂

[jquense]

hey, sorry, its too easy to lose track of pending GH PRs. Thanks for this, I think it's neat and useful, but i'm not sure it's a good fit here. It may be better to provide a more general API for achieving this, such as filterTimes: (date) => true

[OpakAlex]

nice feature, thanks!

[zhisme]

@jquense hey. can you describe a little more, how can I adjust the code?
filterTimes: (arrayOfDates) => true at least needs to get an array to achieve this on my opinion

[jquense]

I was thinking something like array.filter so you only provide the rejector function and the component here will only use dates you return true for

[siropkin]

Here is my workaround - to empty timeList options if time out of range and hide empty options by css style.

css

  .rw-list-option:empty {
    display: none;
  }

component:

    <DateTimePicker
      {...tail}
      timeComponent={({ value, text }) => {
        return value.getHours() >= 7 && value.getHours() <= 18 ? text : '';
      }}
    />