Added time field to date range widget on 'specific' tab

src/client/components/date-range-input/date-range-input.mocha.tsx

@@ -30,6 +30,7 @@ describe('DateRangeInput', () => {
   it('adds the correct class', () => {
     var renderedComponent = TestUtils.renderIntoDocument(
       <DateRangeInput
+        label="Test"
         hide={true}
         onChange={null}
         time={null}

src/client/components/date-range-input/date-range-input.scss

@@ -17,7 +17,30 @@
 @import '../../imports';
 
 .date-range-input {
-  .input-field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 15px;
+
+  .label {
+    width: 40px;
+    min-width: 40px;
+    text-align: right;
+    color: #a6a6a6;
+    font-size: 13px;
+    text-transform: uppercase;
+    margin-right: 5px;
+  }
+
+  .date-field {
+    @extend %default-input;
+    width: 85px;
+    padding-left: 5px;
+    margin-right: 10px;
+  }
+
+  .time-field {
     @extend %default-input;
+    width: 60px;
   }
 }

src/client/components/date-range-input/date-range-input.tsx

@@ -20,39 +20,39 @@ import * as React from 'react';
 import { Timezone } from 'chronoshift';
 import * as moment from 'moment';
 import 'moment-timezone';
-import { getWallTimeString, exclusiveToInclusiveEnd } from '../../../common/utils/time/time';
+import { getWallTimeDateOnlyString, getWallTimeTimeOnlyString, maybeFullyDefinedDate, maybeFullyDefinedTime, combineDateAndTimeIntoMoment } from '../../../common/utils';
 
 export interface DateRangeInputProps extends React.Props<any> {
   time: Date;
   timezone: Timezone;
   onChange: (t: Date) => void;
   hide?: boolean;
   type?: string;
+  label: string;
 }
 
 export interface DateRangeInputState {
   dateString?: string;
+  timeString?: string;
 }
 
 export class DateRangeInput extends React.Component<DateRangeInputProps, DateRangeInputState> {
 
   constructor() {
     super();
     this.state = {
-      dateString: ''
+      dateString: '',
+      timeString: ''
     };
   }
 
-  // 2015-09-23T17:42:57.636Z
-  // 2015-09-23 17:42
-
   componentDidMount() {
-    var { time, timezone } = this.props;
+    const { time, timezone } = this.props;
     this.updateStateFromTime(time, timezone);
   }
 
   componentWillReceiveProps(nextProps: DateRangeInputProps) {
-    var { time, timezone } = nextProps;
+    const { time, timezone } = nextProps;
     this.updateStateFromTime(time, timezone);
   }
 
@@ -65,49 +65,51 @@ export class DateRangeInput extends React.Component<DateRangeInputProps, DateRan
       return;
     }
 
-    const effectiveTime = this.props.type === "end" ? exclusiveToInclusiveEnd(time) : time;
-
     this.setState({
-      dateString: getWallTimeString(effectiveTime, timezone)
+      dateString: getWallTimeDateOnlyString(time, timezone),
+      timeString: getWallTimeTimeOnlyString(time, timezone)
     });
   }
 
   dateChange(e: KeyboardEvent) {
-    var dateString = (e.target as HTMLInputElement).value.replace(/[^\d-]/g, '').substr(0, 10);
+    const dateString = (e.target as HTMLInputElement).value.replace(/[^\d-]/g, '');
     this.setState({
       dateString
     });
-
-    if (dateString.length === 10) {
-      this.changeDate(dateString);
+    if (maybeFullyDefinedDate(dateString)) {
+      this.changeDate(dateString, this.state.timeString);
     }
   }
 
-  changeDate(possibleDateString: string): void {
-    const { timezone, onChange, type } = this.props;
-
-    // Convert from WallTime to UTC
-    const possibleMoment = moment.tz(possibleDateString, timezone.toString());
+  timeChange(e: KeyboardEvent) {
+    const timeString = (e.target as HTMLInputElement).value.replace(/[^\d:]/g, '');
+    this.setState({
+      timeString
+    });
+    if (maybeFullyDefinedTime(timeString)) {
+      this.changeDate(this.state.dateString, timeString);
+    }
+  }
 
-    if (!possibleMoment.isValid()) {
-      onChange(null);
-    } else {
-      // add one if end so it passes the inclusive formatting
-      if (type === "end") {
-        possibleMoment.add(1, "day" );
-      }
+  changeDate(possibleDateString: string, possibleTimeString: string): void {
+    const { timezone, onChange } = this.props;
 
+    const possibleMoment = combineDateAndTimeIntoMoment(possibleDateString, possibleTimeString, timezone);
+    if (possibleMoment && possibleMoment.isValid()) {
       onChange(possibleMoment.toDate());
     }
   }
 
   render() {
     const { hide } = this.props;
-    const { dateString } = this.state;
-    const value = hide ? '' : dateString;
+    const { dateString, timeString } = this.state;
+    const dateValue = hide ? '' : dateString;
+    const timeValue = hide ? '' : timeString;
 
     return <div className="date-range-input">
-      <input className="input-field" value={value} onChange={this.dateChange.bind(this)}/>
+      <div className="label">{this.props.label}</div>
+      <input placeholder="YYYY-MM-DD" className="date-field" value={dateValue} onChange={this.dateChange.bind(this)}/>
+      <input placeholder="HH:MM" className="time-field" value={timeValue} onChange={this.timeChange.bind(this)}/>
     </div>;
   }
 }

src/client/components/date-range-picker/date-range-picker.tsx

@@ -55,10 +55,8 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
   }
 
   componentWillMount() {
-    var { startTime, endTime, timezone } = this.props;
+    const { startTime, endTime, timezone } = this.props;
 
-    if (startTime && !datesEqual(startTime, day.floor(startTime, timezone))) throw new Error("start time must be round");
-    if (endTime && !datesEqual(endTime, day.floor(endTime, timezone))) throw new Error("end time must be round");
     const flooredStart = month.floor(startTime || new Date(), timezone);
     this.setState({
       activeMonthStartDate: flooredStart,
@@ -69,7 +67,7 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
   navigateToMonth(offset: number): void {
     const { timezone } = this.props;
     const { activeMonthStartDate } = this.state;
-    var newDate = month.shift(activeMonthStartDate, timezone, offset);
+    const newDate = month.shift(activeMonthStartDate, timezone, offset);
     this.setState({
       activeMonthStartDate: newDate
     });
@@ -85,10 +83,10 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
 
   calculateHoverTimeRange(mouseEnteredDay: Date) {
     const { startTime, endTime } = this.props;
-    var hoverTimeRange: TimeRange = null;
+    let hoverTimeRange: TimeRange = null;
     if (startTime && !endTime) {
-      var start = startTime;
-      var end = mouseEnteredDay;
+      let start = startTime;
+      let end = mouseEnteredDay;
       // if mousing over backwards, set end to old start time
       if (mouseEnteredDay < startTime) {
         start = mouseEnteredDay;
@@ -136,7 +134,7 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
 
   getIsSelectable(date: Date): boolean {
     const { hoverTimeRange, selectionSet } = this.state;
-    var inHoverTimeRange = false;
+    let inHoverTimeRange = false;
     if (hoverTimeRange) {
       inHoverTimeRange = hoverTimeRange.contains(date);
     }
@@ -156,12 +154,12 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
 
     return weeks.map((daysInWeek: Date[], row: number) => {
       return <div className="week" key={row}> { daysInWeek.map((dayDate: Date, column: number) => {
-        var isPast = dayDate < monthStart;
-        var isFuture = dayDate >= nextMonthStart;
-        var isBeyondMaxRange = dayDate > maxTime;
-        var isSelectedEdgeStart = datesEqual(dayDate, startTime);
-        var isSelectedEdgeEnd = this.getIsSelectedEdgeEnd(isSingleDate, dayDate);
-        var className = classNames("day", "value",
+        const isPast = dayDate < monthStart;
+        const isFuture = dayDate >= nextMonthStart;
+        const isBeyondMaxRange = dayDate > maxTime;
+        const isSelectedEdgeStart = datesEqual(dayDate, day.floor(startTime, timezone));
+        const isSelectedEdgeEnd = this.getIsSelectedEdgeEnd(isSingleDate, dayDate);
+        const className = classNames("day", "value",
           {
             past: isPast,
             future: isFuture,
@@ -183,7 +181,7 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
 
   renderCalendar(startDate: Date, isSingleDate: boolean): JSX.Element[] {
     const { timezone } = this.props;
-    var weeks: Date[][] = monthToWeeks(startDate, timezone, getLocale());
+    const weeks: Date[][] = monthToWeeks(startDate, timezone, getLocale());
     const firstWeek = weeks[0];
     const lastWeek = weeks[weeks.length - 1];
     const countPrepend = 7 - firstWeek.length;
@@ -218,11 +216,11 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
     const { activeMonthStartDate, selectionSet } = this.state;
     if (!activeMonthStartDate) return null;
 
-    var isSingleDate = endTime ? getWallTimeDay(startTime, timezone) === getEndWallTimeInclusive(endTime, timezone).date() : true;
+    const isSingleDate = endTime ? getWallTimeDay(startTime, timezone) === getEndWallTimeInclusive(endTime, timezone).date() : true;
     return <div className="date-range-picker">
-      <div className="side-by-side">
-        <DateRangeInput type="start" time={startTime} timezone={timezone} onChange={onStartChange.bind(this)}/>
-        <DateRangeInput type="end" time={endTime} timezone={timezone} onChange={onEndChange.bind(this)} hide={!selectionSet} />
+      <div>
+        <DateRangeInput label="Start" type="start" time={startTime} timezone={timezone} onChange={onStartChange.bind(this)}/>
+        <DateRangeInput label="End" type="end" time={endTime} timezone={timezone} onChange={onEndChange.bind(this)} hide={!selectionSet} />
       </div>
       <div
         className="calendar"