added timeClassName prop

README.md

@@ -128,7 +128,7 @@ We're always trying to stay compatible with the latest version of React. We can'
 
 Latest compatible versions:
 
-- React 16 or newer:  React-datepicker v2.9.4 and newer
+- React 16 or newer: React-datepicker v2.9.4 and newer
 - React 15.5: React-datepicker v2.9.3
 - React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
 - React 0.14 or newer: All above React-datepicker v0.13.0

docs-site/src/components/Examples/index.js

@@ -16,6 +16,7 @@ import CustomDateFormat from "../../examples/customDateFormat";
 import CustomClassName from "../../examples/customClassName";
 import CustomCalendarClassName from "../../examples/customCalendarClassName";
 import CustomDayClassName from "../../examples/customDayClassName";
+import CustomTimeClassName from "../../examples/customTimeClassName";
 import Today from "../../examples/today";
 import PlaceholderText from "../../examples/placeholderText";
 import SpecificDateRange from "../../examples/specificDateRange";
@@ -125,6 +126,10 @@ export default class exampleComponents extends React.Component {
       title: "Custom day class name",
       component: CustomDayClassName
     },
+    {
+      title: "Custom time class name",
+      component: CustomTimeClassName
+    },
     {
       title: "Today button",
       component: Today

docs-site/src/components/Examples/style.scss

@@ -107,3 +107,11 @@ input {
     box-shadow: inset 0 2px 2px #e9e9e9, 0 0 10px 0 rgba(73, 107, 125, 0.3);
   }
 }
+
+.text-error {
+  color: red;
+}
+
+.text-success {
+  color: green;
+}

docs-site/src/examples/children.js

@@ -1,13 +1,8 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   return (
-    <DatePicker
-      selected={startDate}
-      onChange={date => setStartDate(date)}
-    >
-      <div style={{ color: "red" }}>
-        Don't forget to check the weather!
-    </div>
+    <DatePicker selected={startDate} onChange={date => setStartDate(date)}>
+      <div style={{ color: "red" }}>Don't forget to check the weather!</div>
     </DatePicker>
   );
 };

docs-site/src/examples/customTimeClassName.js

@@ -0,0 +1,16 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+
+  let handleColor = time => {
+    return time.getHours() > 12 ? "text-success" : "text-error";
+  };
+
+  return (
+    <DatePicker
+      showTimeSelect
+      selected={startDate}
+      onChange={date => setStartDate(date)}
+      timeClassName={handleColor}
+    />
+  );
+};

docs/datepicker.md

@@ -14,7 +14,7 @@ General datepicker component.
 | `clearButtonTitle`           | `string`                       |                 |                                            |
 | `customInput`                | `element`                      |                 |                                            |
 | `customInputRef`             | `string`                       | `'ref'`         | The property used to pass the ref callback |
-| `dateFormat`                 | `union(string\|array)`         | `'MM/dd/yyyy'`           |                                            |
+| `dateFormat`                 | `union(string\|array)`         | `'MM/dd/yyyy'`  |                                            |
 | `dateFormatCalendar`         | `string`                       | `'LLLL yyyy'`   |                                            |
 | `dayClassName`               | `func`                         |                 |                                            |
 | `disabled`                   | `bool`                         | `false`         |                                            |
@@ -74,6 +74,7 @@ General datepicker component.
 | `startDate`                  | `instanceOf(Date)`             |                 |                                            |
 | `startOpen`                  | `bool`                         |                 |                                            |
 | `tabIndex`                   | `number`                       |                 |                                            |
+| `timeClassName`              | `func`                         |                 |                                            |
 | `timeFormat`                 | `string`                       |                 |                                            |
 | `timeIntervals`              | `number`                       | `30`            |                                            |
 | `title`                      | `string`                       |                 |                                            |

scripts/buildDocs.js

@@ -5,20 +5,20 @@
  * e.g. react-docgen components/* | buildDocs.sh
  */
 
-var fs = require('fs');
-var generateMarkdown = require('./generateMarkdown');
-var path = require('path');
+var fs = require("fs");
+var generateMarkdown = require("./generateMarkdown");
+var path = require("path");
 
-var json = '';
-process.stdin.setEncoding('utf8');
-process.stdin.on('readable', function() {
+var json = "";
+process.stdin.setEncoding("utf8");
+process.stdin.on("readable", function() {
   var chunk = process.stdin.read();
   if (chunk !== null) {
     json += chunk;
   }
 });
 
-process.stdin.on('end', function() {
+process.stdin.on("end", function() {
   buildDocs(JSON.parse(json));
 });
 
@@ -27,9 +27,9 @@ function buildDocs(api) {
   for (var filepath in api) {
     var name = getComponentName(filepath);
     var markdown = generateMarkdown(name, api[filepath]);
-    var outputLocation = './docs/';
-    fs.writeFileSync(outputLocation + name + '.md', markdown);
-    process.stdout.write(filepath + ' -> ' + outputLocation + name + '.md\n');
+    var outputLocation = "./docs/";
+    fs.writeFileSync(outputLocation + name + ".md", markdown);
+    process.stdout.write(filepath + " -> " + outputLocation + name + ".md\n");
   }
 }
 

scripts/generateMarkdown.js

@@ -9,66 +9,83 @@
 "use strict";
 
 function stringOfLength(string, length) {
-  var newString = '';
+  var newString = "";
   for (var i = 0; i < length; i++) {
     newString += string;
   }
   return newString;
 }
 
 function generateTitle(name) {
-  var title = '`' + name + '` (component)';
-  return title + '\n' + stringOfLength('=', title.length) + '\n';
+  var title = "`" + name + "` (component)";
+  return title + "\n" + stringOfLength("=", title.length) + "\n";
 }
 
 function generateDesciption(description) {
-  if (description) return description + '\n';
+  if (description) return description + "\n";
 
-  return '';
+  return "";
 }
 
 function generatePropType(type) {
   var values;
   if (Array.isArray(type.value)) {
-    values = '(' +
-      type.value.map(function(typeValue) {
-        return typeValue.name || typeValue.value;
-      }).join('\\|') +
-      ')';
+    values =
+      "(" +
+      type.value
+        .map(function(typeValue) {
+          return typeValue.name || typeValue.value;
+        })
+        .join("\\|") +
+      ")";
   } else {
     values = type.value;
   }
 
-  return '`' + type.name + (values ? values: '') + '`';
+  return "`" + type.name + (values ? values : "") + "`";
 }
 
 function generatePropDefaultValue(value) {
-  return '`' + value.value + '`';
+  return "`" + value.value + "`";
 }
 
 function generateProp(propName, prop) {
   return (
-    '|`' + propName + '`' + (prop.required ? ' (required)' : '')  +
-    '|' + (prop.type ? generatePropType(prop.type) : '') +
-    '|' + (prop.defaultValue ? generatePropDefaultValue(prop.defaultValue) : '') +
-    '|' + (prop.description ? prop.description + '\n\n' : '') + '|'
+    "|`" +
+    propName +
+    "`" +
+    (prop.required ? " (required)" : "") +
+    "|" +
+    (prop.type ? generatePropType(prop.type) : "") +
+    "|" +
+    (prop.defaultValue ? generatePropDefaultValue(prop.defaultValue) : "") +
+    "|" +
+    (prop.description ? prop.description + "\n\n" : "") +
+    "|"
   );
 }
 
 function generateProps(props) {
   return (
-    '| name  | type  | default value  | description  |' + '\n' +
-    '|---|---|---|---|' + '\n' +
-    Object.keys(props).sort().map(function(propName) {
-      return generateProp(propName, props[propName]);
-    }).join('\n')
+    "| name  | type  | default value  | description  |" +
+    "\n" +
+    "|---|---|---|---|" +
+    "\n" +
+    Object.keys(props)
+      .sort()
+      .map(function(propName) {
+        return generateProp(propName, props[propName]);
+      })
+      .join("\n")
   );
 }
 
 function generateMarkdown(name, reactAPI) {
   var markdownString =
-    generateTitle(name) + '\n' +
-    generateDesciption(reactAPI.description) + '\n' +
+    generateTitle(name) +
+    "\n" +
+    generateDesciption(reactAPI.description) +
+    "\n" +
     generateProps(reactAPI.props);
 
   return markdownString;

src/calendar.jsx

@@ -73,6 +73,7 @@ export default class Calendar extends React.Component {
     dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
       .isRequired,
     dayClassName: PropTypes.func,
+    timeClassName: PropTypes.func,
     disabledKeyboardNavigation: PropTypes.bool,
     dropdownMode: PropTypes.oneOf(["scroll", "select"]),
     endDate: PropTypes.instanceOf(Date),
@@ -552,7 +553,9 @@ export default class Calendar extends React.Component {
     <div className="react-datepicker__header">
       {this.renderCurrentMonth(monthDate)}
       <div
-        className={`react-datepicker__header__dropdown react-datepicker__header__dropdown--${this.props.dropdownMode}`}
+        className={`react-datepicker__header__dropdown react-datepicker__header__dropdown--${
+          this.props.dropdownMode
+        }`}
         onFocus={this.handleDropdownFocus}
       >
         {this.renderMonthDropdown(i !== 0)}
@@ -708,6 +711,7 @@ export default class Calendar extends React.Component {
           selected={this.props.selected}
           openToDate={this.props.openToDate}
           onChange={this.props.onTimeChange}
+          timeClassName={this.props.timeClassName}
           format={this.props.timeFormat}
           includeTimes={this.props.includeTimes}
           intervals={this.props.timeIntervals}

src/index.jsx

@@ -123,6 +123,7 @@ export default class DatePicker extends React.Component {
     dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
     dateFormatCalendar: PropTypes.string,
     dayClassName: PropTypes.func,
+    timeClassName: PropTypes.func,
     disabled: PropTypes.bool,
     disabledKeyboardNavigation: PropTypes.bool,
     dropdownMode: PropTypes.oneOf(["scroll", "select"]).isRequired,
@@ -691,6 +692,7 @@ export default class DatePicker extends React.Component {
         onMonthChange={this.props.onMonthChange}
         onYearChange={this.props.onYearChange}
         dayClassName={this.props.dayClassName}
+        timeClassName={this.props.timeClassName}
         showTimeSelect={this.props.showTimeSelect}
         showTimeSelectOnly={this.props.showTimeSelectOnly}
         onTimeChange={this.handleTimeChange}

src/time.jsx

@@ -35,6 +35,7 @@ export default class Time extends React.Component {
     selected: PropTypes.instanceOf(Date),
     openToDate: PropTypes.instanceOf(Date),
     onChange: PropTypes.func,
+    timeClassName: PropTypes.func,
     todayButton: PropTypes.node,
     minTime: PropTypes.instanceOf(Date),
     maxTime: PropTypes.instanceOf(Date),
@@ -82,7 +83,12 @@ export default class Time extends React.Component {
   };
 
   liClasses = (time, currH, currM) => {
-    let classes = ["react-datepicker__time-list-item"];
+    let classes = [
+      "react-datepicker__time-list-item",
+      this.props.timeClassName
+        ? this.props.timeClassName(time, currH, currM)
+        : undefined
+    ];
 
     if (
       this.props.selected &&

test/timepicker_test.js

@@ -54,6 +54,39 @@ describe("TimePicker", () => {
     expect(datePicker.state.open).to.be.true;
   });
 
+  it("should show different colors for times", () => {
+    const handleTimeColors = (time, currH, currM) => {
+      if (!Number.isInteger(currH) || !Number.isInteger(currM)) {
+        return "wrong";
+      }
+      return time.getHours() < 12 ? "red" : "green";
+    };
+    const timePicker = TestUtils.renderIntoDocument(
+      <DatePicker
+        showTimeSelect
+        showTimeSelectOnly
+        timeClassName={handleTimeColors}
+        onChange={() => console.log("changed")}
+        open
+        focus
+      />
+    );
+    let redItems = TestUtils.scryRenderedDOMComponentsWithClass(
+      timePicker,
+      "react-datepicker__time-list-item red"
+    );
+    let greenItems = TestUtils.scryRenderedDOMComponentsWithClass(
+      timePicker,
+      "react-datepicker__time-list-item green"
+    );
+    assert.isTrue(
+      redItems !== undefined &&
+        redItems.length === 24 &&
+        greenItems !== undefined &&
+        greenItems.length === 24
+    );
+  });
+
   function setManually(string) {
     TestUtils.Simulate.focus(datePicker.input);
     TestUtils.Simulate.change(datePicker.input, { target: { value: string } });