Ensure components return Date objects with 00:00:00 time OpusCapita#56 (OpusCapita#57)

API changes
====

All public components return Date objects with 00:00:00 time in order to insure consistent output.

Author: estambakio-sc

src/client/components/DateInput/DateInput.DOCUMENTATION.md

@@ -4,6 +4,8 @@ Allows select date using mouse or keyboard.
 
 Based on configured to OpusCapita defaults [react-day-picker](https://github.com/gpbl/react-day-picker)
 
+**Important:** `DatePicker` returns `Date` object with 00:00:00 time.
+
 ### Props Reference
 
 | Name                           | Type                    | Description                                                                                                                                                                |
@@ -29,7 +31,7 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com
   value={_scope.state.value}
   dateFormat="dd/MM/yyyy"
   locale="de"
-  onChange={_scope.handleChange.bind(_scope)}
+  onChange={_scope.handleChange}
 />
 
 <hr />
@@ -39,7 +41,7 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com
   dateFormat="dd/MM/yyyy"
   disabled={true}
   locale="en"
-  onChange={_scope.handleChange.bind(_scope)}
+  onChange={_scope.handleChange}
 />
 
 <hr />
@@ -49,7 +51,7 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com
   dateFormat="dd/MM/yyyy"
   locale="fi"
   onBlur={(e) => console.log('Blur!', e)}
-  onChange={_scope.handleChange.bind(_scope)}
+  onChange={_scope.handleChange}
   onFocus={(e) => console.log('Focus!', e)}
   showToLeft={true}
   showToTop={true}

src/client/components/DateInput/DateInput.SCOPE.react.js

@@ -17,7 +17,7 @@ class DateInputScope extends Component {
     };
   }
 
-  handleChange(value) {
+  handleChange = (value) => {
     this.setState({ value });
   }
 

src/client/components/DateInput/DateInput.react.js

@@ -10,7 +10,7 @@ import dayjs from '../../dayjs';
 import getMessage from '../translations';
 import isEqual from 'lodash/isEqual';
 import { Portal } from 'react-portal';
-import { getCoords, splitProps } from '../utils';
+import { getCoords, splitProps, zeroTime } from '../utils';
 
 let springPreset = presets.gentle;
 let easeOutCubic = (t) => (--t) * t * t + 1; // eslint-disable-line no-param-reassign
@@ -170,7 +170,7 @@ class DateInput extends Component {
   };
 
   handleDateChange = value => {
-    this.props.onChange(value);
+    this.props.onChange(zeroTime(value));
     this.setState({ error: null });
   };
 

src/client/components/DatePicker/DatePicker.DOCUMENTATION.md

@@ -4,6 +4,8 @@ DatePicker shows the calendar button. When you click it, calendar appears. Allow
 
 Based on configured to OpusCapita defaults [react-day-picker](https://github.com/gpbl/react-day-picker)
 
+**Important:** `DatePicker` returns `Date` object with 00:00:00 time.
+
 ### Props Reference
 
 | Name                           | Type                    | Description                                                                                     |

src/client/components/DatePicker/DatePicker.react.js

@@ -5,7 +5,7 @@ import DayPicker from '../DayPicker';
 import { spring, presets, Motion } from 'react-motion';
 import isEqual from 'lodash/isEqual';
 import { Portal } from 'react-portal';
-import { getCoords, splitProps } from '../utils';
+import { getCoords, splitProps, zeroTime } from '../utils';
 
 let springPreset = presets.gentle;
 let easeOutCubic = (t) => (--t) * t * t + 1; // eslint-disable-line no-param-reassign
@@ -82,7 +82,7 @@ class DatePicker extends Component {
   };
 
   handleDateChange = value => {
-    this.props.onChange(value);
+    this.props.onChange(zeroTime(value));
   };
 
   handleBodyClick = event => {

src/client/components/DateRangeInput/DateRangeInput.DOCUMENTATION.md

@@ -2,6 +2,8 @@
 
 Allows select date range using mouse.
 
+**Important:** `DatePicker` returns `Date` object with 00:00:00 time.
+
 ### Props Reference
 
 | Name                           | Type                    | Description                                                                                                                                                                |

src/client/components/DateRangeInput/DateRangeInput.react.js

@@ -10,7 +10,7 @@ import dayjs from '../../dayjs';
 import { spring, presets, Motion } from 'react-motion';
 import getMessage from '../translations';
 import { Portal } from 'react-portal';
-import { getCoords, splitProps } from '../utils';
+import { getCoords, splitProps, zeroTime } from '../utils';
 
 let springPreset = presets.gentle;
 let easeOutCubic = (t) => (--t) * t * t + 1; // eslint-disable-line no-param-reassign
@@ -186,7 +186,9 @@ class DateRangeInput extends Component {
     this.props.onChange(normalizedRange);
   };
 
-  handleDayClick = day => {
+  handleDayClick = dayValue => {
+    const day = zeroTime(dayValue);
+
     let from = this.props.value[0];
     let to = this.props.value[1];
 

src/client/components/DayPicker/DayPicker.react.js

@@ -4,7 +4,7 @@ import ReactDayPicker from 'react-day-picker/lib/src/DayPicker';
 import "react-day-picker/lib/style.css";
 import localeUtils from '../../dayjs/reactDayPickerUtils';
 import getMessage from '../translations';
-import { splitProps } from '../utils';
+import { splitProps, zeroTime } from '../utils';
 import './DayPicker.less';
 
 function Caption(props) {
@@ -107,7 +107,8 @@ class DayPicker extends Component {
     };
   }
 
-  handleDateChange = (date, captionIndex) => {
+  handleDateChange = (dateValue, captionIndex) => {
+    const date = zeroTime(dateValue);
     if (this.props.isRange) {
       let range = this.props.selectedDays[1];
       let fromChanged = captionIndex === 0;
@@ -128,7 +129,7 @@ class DayPicker extends Component {
   };
 
   handleTodayClick = () => {
-    this.props.onChange(new Date());
+    this.props.onChange(zeroTime(new Date()));
   };
 
   render() {

src/client/components/utils.js

@@ -34,3 +34,10 @@ export const splitProps = (props, specificPropNames = []) => {
     return [commonProps, specificProps];
   }, [{}, {}]);
 }
+
+export const zeroTime = date => {
+  if (date instanceof Date) {
+    date.setHours(0, 0, 0);
+  }
+  return date;
+}