From 7b682f073c0b904d31d21199af5658c4383e534e Mon Sep 17 00:00:00 2001 From: Egor Stambakio Date: Thu, 19 Jul 2018 17:00:13 +0300 Subject: [PATCH] Ensure components return Date objects with 00:00:00 time #56 --- .../components/DateInput/DateInput.DOCUMENTATION.md | 8 +++++--- src/client/components/DateInput/DateInput.SCOPE.react.js | 2 +- src/client/components/DateInput/DateInput.react.js | 4 ++-- .../components/DatePicker/DatePicker.DOCUMENTATION.md | 2 ++ src/client/components/DatePicker/DatePicker.react.js | 4 ++-- .../DateRangeInput/DateRangeInput.DOCUMENTATION.md | 2 ++ .../components/DateRangeInput/DateRangeInput.react.js | 6 ++++-- src/client/components/DayPicker/DayPicker.react.js | 7 ++++--- src/client/components/utils.js | 7 +++++++ 9 files changed, 29 insertions(+), 13 deletions(-) diff --git a/src/client/components/DateInput/DateInput.DOCUMENTATION.md b/src/client/components/DateInput/DateInput.DOCUMENTATION.md index 7dbc4f3a..ef6c3a54 100644 --- a/src/client/components/DateInput/DateInput.DOCUMENTATION.md +++ b/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} />
@@ -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} />
@@ -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} diff --git a/src/client/components/DateInput/DateInput.SCOPE.react.js b/src/client/components/DateInput/DateInput.SCOPE.react.js index dbafbfe3..fa192438 100644 --- a/src/client/components/DateInput/DateInput.SCOPE.react.js +++ b/src/client/components/DateInput/DateInput.SCOPE.react.js @@ -17,7 +17,7 @@ class DateInputScope extends Component { }; } - handleChange(value) { + handleChange = (value) => { this.setState({ value }); } diff --git a/src/client/components/DateInput/DateInput.react.js b/src/client/components/DateInput/DateInput.react.js index e2a3c645..a8b52533 100644 --- a/src/client/components/DateInput/DateInput.react.js +++ b/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 }); }; diff --git a/src/client/components/DatePicker/DatePicker.DOCUMENTATION.md b/src/client/components/DatePicker/DatePicker.DOCUMENTATION.md index c0d2aa36..976ddcd8 100644 --- a/src/client/components/DatePicker/DatePicker.DOCUMENTATION.md +++ b/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 | diff --git a/src/client/components/DatePicker/DatePicker.react.js b/src/client/components/DatePicker/DatePicker.react.js index 4b12fe41..e008dcb9 100644 --- a/src/client/components/DatePicker/DatePicker.react.js +++ b/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 => { diff --git a/src/client/components/DateRangeInput/DateRangeInput.DOCUMENTATION.md b/src/client/components/DateRangeInput/DateRangeInput.DOCUMENTATION.md index 449d0ffe..bf98a83a 100644 --- a/src/client/components/DateRangeInput/DateRangeInput.DOCUMENTATION.md +++ b/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 | diff --git a/src/client/components/DateRangeInput/DateRangeInput.react.js b/src/client/components/DateRangeInput/DateRangeInput.react.js index 9d58d926..542c3150 100644 --- a/src/client/components/DateRangeInput/DateRangeInput.react.js +++ b/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]; diff --git a/src/client/components/DayPicker/DayPicker.react.js b/src/client/components/DayPicker/DayPicker.react.js index d4560703..d449273d 100644 --- a/src/client/components/DayPicker/DayPicker.react.js +++ b/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() { diff --git a/src/client/components/utils.js b/src/client/components/utils.js index b04e58a8..9bd0916e 100644 --- a/src/client/components/utils.js +++ b/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; +}