Add an includeTimes param

This option is the same idea as "includeDates" but applies to the time select.
Only times that are included in the "includeDates" list and also match up with
settings like "timeIntervals" will be included. All other times are disabled.

This uses the same helper function as "excludeTimes" for implementation.

Author: jennyscript-ridecell

docs-site/src/example_components.jsx

@@ -44,6 +44,7 @@ import RawChange from './examples/raw_change'
 import ShowTime from './examples/show_time'
 import ExcludeTimes from './examples/exclude_times'
 import ExcludeTimePeriod from './examples/exclude_time_period'
+import IncludeTimes from './examples/include_times'
 import DontCloseOnSelect from './examples/dont_close_onSelect'
 import OpenByDefault from './examples/open_by_default'
 
@@ -67,6 +68,10 @@ export default class exampleComponents extends React.Component {
     title: 'Exclude Times',
     component: <ExcludeTimes />
   },
+  {
+    title: 'Include Times',
+    component: <IncludeTimes />
+  },
   {
     title: 'Specific Time Range',
     component: <ExcludeTimePeriod />

docs-site/src/examples/include_times.jsx

@@ -0,0 +1,66 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import moment from "moment";
+
+export default class IncludeTimes extends React.Component {
+  state = {
+    startDate: moment()
+      .hours(16)
+      .minutes(30)
+  };
+
+  handleChange = date => {
+    this.setState({
+      startDate: date
+    });
+  };
+
+  render() {
+    return (
+      <div className="row">
+        <pre className="column example__code">
+          <code className="jsx">
+            {"<DatePicker"}
+            <br />
+            {"  selected={this.state.startDate}"}
+            <br />
+            {"  onChange={this.handleChange}"}
+            <br />
+            <strong>
+              {"  showTimeSelect"}
+              <br />
+              {
+                "  includeTimes={[moment().hours(17).minutes(0), moment().hours(18).minutes(30), moment().hours(19).minutes(30)], moment().hours(17).minutes(30)}"
+              }
+            </strong>
+            <br />
+            <strong>{'  dateFormat="LLL"'}</strong>
+            <br />
+            {"/>"}
+          </code>
+        </pre>
+        <div className="column">
+          <DatePicker
+            selected={this.state.startDate}
+            onChange={this.handleChange}
+            showTimeSelect
+            includeTimes={[
+              moment()
+                .hours(17)
+                .minutes(0),
+              moment()
+                .hours(18)
+                .minutes(30),
+              moment()
+                .hours(19)
+                .minutes(30),
+              moment()
+                .hours(17)
+                .minutes(30)
+            ]}
+            dateFormat="LLL"/>
+        </div>
+      </div>
+    );
+  }
+}

docs/datepicker.md

@@ -28,6 +28,7 @@ General datepicker component.
 | `highlightDates`             | `array`                        |                 |                                            |
 | `id`                         | `string`                       |                 |                                            |
 | `includeDates`               | `array`                        |                 |                                            |
+| `includeTimes`               | `array`                        |                 |                                            |
 | `inline`                     | `bool`                         |                 |                                            |
 | `isClearable`                | `bool`                         |                 |                                            |
 | `locale`                     | `string`                       |                 |                                            |

docs/index.md

@@ -29,6 +29,7 @@ General datepicker component.
 | `highlightDates`              | `array`                        |                 |             |
 | `id`                          | `string`                       |                 |             |
 | `includeDates`                | `array`                        |                 |             |
+| `includeTimes`                | `array`                        |                 |             |
 | `inline`                      | `bool`                         |                 |             |
 | `isClearable`                 | `bool`                         |                 |             |
 | `locale`                      | `string`                       |                 |             |

src/calendar.jsx

@@ -61,6 +61,7 @@ export default class Calendar extends React.Component {
     formatWeekNumber: PropTypes.func,
     highlightDates: PropTypes.instanceOf(Map),
     includeDates: PropTypes.array,
+    includeTimes: PropTypes.array,
     inline: PropTypes.bool,
     locale: PropTypes.string,
     maxDate: PropTypes.object,
@@ -500,6 +501,7 @@ export default class Calendar extends React.Component {
           selected={this.props.selected}
           onChange={this.props.onTimeChange}
           format={this.props.timeFormat}
+          includeTimes={this.props.includeTimes}
           intervals={this.props.timeIntervals}
           minTime={this.props.minTime}
           maxTime={this.props.maxTime}

src/date_utils.js

@@ -336,8 +336,8 @@ export function getMonthInLocale(locale, date, format) {
   return locale.months(date, format);
 }
 
-export function getMonthShortInLocale (locale, date) {
-  return locale.monthsShort(date)
+export function getMonthShortInLocale(locale, date) {
+  return locale.monthsShort(date);
 }
 
 // ** Utils for some components **

src/index.jsx

@@ -70,6 +70,7 @@ export default class DatePicker extends React.Component {
     highlightDates: PropTypes.array,
     id: PropTypes.string,
     includeDates: PropTypes.array,
+    includeTimes: PropTypes.array,
     inline: PropTypes.bool,
     isClearable: PropTypes.bool,
     locale: PropTypes.string,
@@ -492,6 +493,7 @@ export default class DatePicker extends React.Component {
         formatWeekNumber={this.props.formatWeekNumber}
         highlightDates={this.state.highlightDates}
         includeDates={this.props.includeDates}
+        includeTimes={this.props.includeTimes}
         inline={this.props.inline}
         peekNextMonth={this.props.peekNextMonth}
         showMonthDropdown={this.props.showMonthDropdown}

src/time.jsx

@@ -15,6 +15,7 @@ import {
 export default class Time extends React.Component {
   static propTypes = {
     format: PropTypes.string,
+    includeTimes: PropTypes.array,
     intervals: PropTypes.number,
     selected: PropTypes.object,
     onChange: PropTypes.func,
@@ -46,7 +47,8 @@ export default class Time extends React.Component {
     if (
       ((this.props.minTime || this.props.maxTime) &&
         isTimeInDisabledRange(time, this.props)) ||
-      (this.props.excludeTimes && isTimeDisabled(time, this.props.excludeTimes))
+      (this.props.excludeTimes && isTimeDisabled(time, this.props.excludeTimes)) ||
+      (this.props.includeTimes && !isTimeDisabled(time, this.props.includeTimes))
     ) {
       return;
     }
@@ -63,7 +65,8 @@ export default class Time extends React.Component {
     if (
       ((this.props.minTime || this.props.maxTime) &&
         isTimeInDisabledRange(time, this.props)) ||
-      (this.props.excludeTimes && isTimeDisabled(time, this.props.excludeTimes))
+      (this.props.excludeTimes && isTimeDisabled(time, this.props.excludeTimes)) ||
+      (this.props.includeTimes && !isTimeDisabled(time, this.props.includeTimes))
     ) {
       classes.push("react-datepicker__time-list-item--disabled");
     }

test/include_times_test.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { mount } from "enzyme";
+import * as utils from "../src/date_utils";
+import { setTime, cloneDate, newDate } from "../src/date_utils";
+import TimeComponent from "../src/time";
+
+function cloneDateWithTime(date, time) {
+  return setTime(cloneDate(date), time);
+}
+
+describe("TimeComponent", () => {
+  let sandbox;
+
+  beforeEach(() => {
+    sandbox = sinon.sandbox.create();
+  });
+
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  it("should only enable times specified in includeTimes props", () => {
+    const today = utils.getStartOfDay(utils.newDate());
+    const timeComponent = mount(
+      <TimeComponent
+        includeTimes={[
+          utils.addMinutes(cloneDate(today), 60),
+          utils.addMinutes(cloneDate(today), 120),
+          utils.addMinutes(cloneDate(today), 150)
+        ]}
+      />
+    );
+
+    const disabledItems = timeComponent.find(
+      ".react-datepicker__time-list-item--disabled"
+    );
+    expect(disabledItems).to.have.length(45);
+  });
+});