feat: Time picker only (Hacker0x01#1281)

* Added showTimeSelectOnly prop

* Added unit test for showTimeSelectOnly

* Added additional unit tests

Author: Greg Smith

docs-site/src/example_components.jsx

@@ -42,6 +42,7 @@ import Portal from './examples/portal'
 import InlinePortal from './examples/inline_portal'
 import RawChange from './examples/raw_change'
 import ShowTime from './examples/show_time'
+import ShowTimeOnly from './examples/show_time_only'
 import ExcludeTimes from './examples/exclude_times'
 import ExcludeTimePeriod from './examples/exclude_time_period'
 import IncludeTimes from './examples/include_times'
@@ -64,6 +65,10 @@ export default class exampleComponents extends React.Component {
     title: 'Select Time',
     component: <ShowTime />
   },
+  {
+    title: 'Select Time Only',
+    component: <ShowTimeOnly />
+  },
   {
     title: 'Exclude Times',
     component: <ExcludeTimes />

docs-site/src/examples/show_time_only.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import moment from "moment";
+
+export default class ShowTimeOnly extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      startDate: moment()
+    };
+  }
+
+  handleChange = date => {
+    this.setState({
+      startDate: date
+    });
+  };
+
+  render() {
+    return (
+      <div className="row">
+        <pre className="column example__code">
+          <code className="jsx">
+            {`
+<DatePicker
+    selected={this.state.startDate}
+    onChange={this.handleChange}`}
+            <br />
+            <strong>{`    showTimeSelect
+    showTimeSelectOnly
+    timeIntervals={15}
+    dateFormat="LT"
+    timeCaption="Time"
+/>
+`}</strong>
+          </code>
+        </pre>
+        <div className="column">
+          <DatePicker
+            selected={this.state.startDate}
+            onChange={this.handleChange}
+            showTimeSelect
+            showTimeSelectOnly
+            timeIntervals={15}
+            timeCaption="Time"
+            dateFormat="LT"/>
+        </div>
+      </div>
+    );
+  }
+}

src/calendar.jsx

@@ -75,6 +75,7 @@ export default class Calendar extends React.Component {
     onSelect: PropTypes.func.isRequired,
     onWeekSelect: PropTypes.func,
     showTimeSelect: PropTypes.bool,
+    showTimeSelectOnly: PropTypes.bool,
     timeFormat: PropTypes.string,
     timeIntervals: PropTypes.number,
     onTimeChange: PropTypes.func,
@@ -291,9 +292,10 @@ export default class Calendar extends React.Component {
     const allPrevDaysDisabled = allDaysDisabledBefore(this.state.date, "month", this.props);
 
     if (
-      !this.props.forceShowMonthNavigation &&
+      (!this.props.forceShowMonthNavigation &&
       !this.props.showDisabledMonthNavigation &&
-      allPrevDaysDisabled
+      allPrevDaysDisabled) ||
+      this.props.showTimeSelectOnly
     ) {
       return;
     }
@@ -322,9 +324,10 @@ export default class Calendar extends React.Component {
     const allNextDaysDisabled = allDaysDisabledAfter(this.state.date, "month", this.props);
 
     if (
-      !this.props.forceShowMonthNavigation &&
+      (!this.props.forceShowMonthNavigation &&
       !this.props.showDisabledMonthNavigation &&
-      allNextDaysDisabled
+      allNextDaysDisabled) ||
+      this.props.showTimeSelectOnly
     ) {
       return;
     }
@@ -423,7 +426,7 @@ export default class Calendar extends React.Component {
   };
 
   renderTodayButton = () => {
-    if (!this.props.todayButton) {
+    if (!this.props.todayButton || this.props.showTimeSelectOnly) {
       return;
     }
     return (
@@ -438,6 +441,10 @@ export default class Calendar extends React.Component {
   };
 
   renderMonths = () => {
+    if (this.props.showTimeSelectOnly) {
+      return;
+    }
+
     var monthList = [];
     for (var i = 0; i < this.props.monthsShown; ++i) {
       var monthDate = addMonths(cloneDate(this.state.date), i);
@@ -521,7 +528,9 @@ export default class Calendar extends React.Component {
 
   render() {
     return (
-      <div className={classnames("react-datepicker", this.props.className)}>
+      <div className={classnames("react-datepicker", this.props.className, {
+        "react-datepicker--time-only": this.props.showTimeSelectOnly
+      })}>
         <div className="react-datepicker__triangle" />
         {this.renderPreviousMonthButton()}
         {this.renderNextMonthButton()}

src/index.jsx

@@ -123,6 +123,7 @@ export default class DatePicker extends React.Component {
     yearDropdownItemNumber: PropTypes.number,
     shouldCloseOnSelect: PropTypes.bool,
     showTimeSelect: PropTypes.bool,
+    showTimeSelectOnly: PropTypes.bool,
     timeFormat: PropTypes.string,
     timeIntervals: PropTypes.number,
     minTime: PropTypes.object,
@@ -529,6 +530,7 @@ export default class DatePicker extends React.Component {
         onYearChange={this.props.onYearChange}
         dayClassName={this.props.dayClassName}
         showTimeSelect={this.props.showTimeSelect}
+        showTimeSelectOnly={this.props.showTimeSelectOnly}
         onTimeChange={this.handleTimeChange}
         timeFormat={this.props.timeFormat}
         timeIntervals={this.props.timeIntervals}

src/stylesheets/datepicker.scss

@@ -16,6 +16,24 @@
   position: relative;
 }
 
+.react-datepicker--time-only {
+  .react-datepicker__triangle {
+    left: 35px;
+  }
+
+  .react-datepicker__time-container {
+    border-left: 0;
+  }
+
+  .react-datepicker__time {
+    border-radius: 0.3rem;
+  }
+
+  .react-datepicker__time-box {
+    border-radius: 0.3rem;
+  }
+}
+
 .react-datepicker__triangle {
   position: absolute;
   left: 50px;

test/show_time_test.js

@@ -26,4 +26,30 @@ describe("DatePicker", () => {
     const caption = timeComponent.find(".react-datepicker-time__header");
     expect(caption.text()).to.equal("Custom time");
   });
+
+  describe("Time Select Only", () => {
+    var datePicker = mount(
+      <DatePicker showTimeSelect showTimeSelectOnly todayButton="Today" />
+    );
+
+    it("should not show month container when showTimeSelectOnly prop is present", () => {
+      var elem = datePicker.find(".react-datepicker__month-container");
+      expect(elem).to.have.length(0);
+    });
+
+    it("should not show previous month button when showTimeSelectOnly prop is present", () => {
+      var elem = datePicker.find(".react-datepicker__navigation--previous");
+      expect(elem).to.have.length(0);
+    });
+
+    it("should not show next month button when showTimeSelectOnly prop is present", () => {
+      var elem = datePicker.find(".react-datepicker__navigation--next");
+      expect(elem).to.have.length(0);
+    });
+
+    it("should not show today button when showTimeSelectOnly prop is present", () => {
+      var elem = datePicker.find(".react-datepicker__today-button");
+      expect(elem).to.have.length(0);
+    });
+  });
 });