From f2acae1636bb4293a1304a2ca3f1a67c35180f4a Mon Sep 17 00:00:00 2001 From: Jake Olefsky Date: Wed, 8 Mar 2017 11:21:58 -0800 Subject: [PATCH 1/3] min/max fixed. WIP for selected. Not quite sure how to finish it --- src/Calendar/index.js | 5 +++++ src/Calendar/withDateSelection.js | 2 +- src/Years/index.js | 10 ++++++---- src/utils/index.js | 1 + 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/Calendar/index.js b/src/Calendar/index.js index 1c01075bd..c97b30174 100644 --- a/src/Calendar/index.js +++ b/src/Calendar/index.js @@ -134,6 +134,11 @@ export default class Calendar extends Component { this._minDate = parse(props.minDate); this._maxDate = parse(props.maxDate); + if(isNaN(this._min.getTime())) this._min = new Date(1980, 0, 1); + if(isNaN(this._minDate.getTime())) this._minDate = new Date(1980, 0, 1); + if(isNaN(this._max.getTime())) this._max = new Date(2050, 11, 31); + if(isNaN(this._maxDate.getTime())) this._max = new Date(2050, 11, 31); + const min = this._min.getFullYear(); const minMonth = this._min.getMonth(); const max = this._max.getFullYear(); diff --git a/src/Calendar/withDateSelection.js b/src/Calendar/withDateSelection.js index c93665165..6d03f1883 100644 --- a/src/Calendar/withDateSelection.js +++ b/src/Calendar/withDateSelection.js @@ -14,7 +14,7 @@ export const enhanceDay = withPropsOnChange(['selected'], props => ({ })); const enhanceYear = withPropsOnChange(['selected'], ({selected}) => ({ - selected: parse(selected), + selected: isNaN(parse(selected).getTime()) ? new Date() : parse(selected), })); // Enhancer to handle selecting and displaying a single date diff --git a/src/Years/index.js b/src/Years/index.js index 597a31ec6..8f94f471b 100644 --- a/src/Years/index.js +++ b/src/Years/index.js @@ -49,12 +49,13 @@ export default class Years extends Component { renderMonths(year) { const {locale: {locale}, selected, theme, today, min, max, minDate, maxDate} = this.props; - const months = getMonthsForYear(year, selected.getDate()); + var selectedDate = isNaN(selected.getTime()) ? new Date() : selected; + const months = getMonthsForYear(year, selectedDate.getDate()); return (
    {months.map((date, index) => { - const isSelected = isSameMonth(date, selected); + const isSelected = isSameMonth(date, selectedDate); const isCurrentMonth = isSameMonth(date, today); const isDisabled = ( isBefore(date, min) || @@ -102,7 +103,8 @@ export default class Years extends Component { const {height, selected, showMonths, theme, today, width} = this.props; const currentYear = today.getFullYear(); const years = this.props.years.slice(0, this.props.years.length); - const selectedYearIndex = years.indexOf(selected.getFullYear()); + var selectedDate = isNaN(selected.getTime()) ? new Date() : selected; + const selectedYearIndex = years.indexOf(selectedDate.getFullYear()); const rowHeight = showMonths ? 110 : 50; const heights = years.map((val, index) => index === 0 || index === years.length - 1 ? rowHeight + SPACING @@ -141,7 +143,7 @@ export default class Years extends Component { [styles.first]: index === 0, [styles.last]: index === years.length - 1, })} - onClick={() => this.handleClick(new Date(selected).setYear(year))} + onClick={() => this.handleClick(new Date(selectedDate).setYear(year))} title={`Set year to ${year}`} data-year={year} style={Object.assign({}, style, { diff --git a/src/utils/index.js b/src/utils/index.js index e12dca456..e36e7d546 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -141,6 +141,7 @@ export function sanitizeDate(date, { // Selected date should not be disabled or outside the selectable range if ( !date || + isNaN(date.getTime()) || disabledDates.some(disabledDate => isSameDay(disabledDate, date)) || disabledDays && disabledDays.indexOf(getDay(date)) !== -1 || minDate && isBefore(date, startOfDay(minDate)) || From ec7ab6043a14b7e708ce29284d26c4b32589330b Mon Sep 17 00:00:00 2001 From: Jake Olefsky Date: Fri, 17 Mar 2017 13:52:48 -0700 Subject: [PATCH 2/3] Finishing fix for date selection and with Range. Reverting incorrect fix in previous commit --- src/Calendar/index.js | 6 ++++++ src/Calendar/withDateSelection.js | 4 ++-- src/Calendar/withRange.js | 7 ++++--- src/Years/index.js | 10 ++++------ 4 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/Calendar/index.js b/src/Calendar/index.js index c97b30174..1bf369d46 100644 --- a/src/Calendar/index.js +++ b/src/Calendar/index.js @@ -134,10 +134,16 @@ export default class Calendar extends Component { this._minDate = parse(props.minDate); this._maxDate = parse(props.maxDate); + //validate min/max inputs if(isNaN(this._min.getTime())) this._min = new Date(1980, 0, 1); if(isNaN(this._minDate.getTime())) this._minDate = new Date(1980, 0, 1); if(isNaN(this._max.getTime())) this._max = new Date(2050, 11, 31); if(isNaN(this._maxDate.getTime())) this._max = new Date(2050, 11, 31); + if(this._min>this._max) { + var temp = this._min; + this._min = this._max; + this._max = temp; + } const min = this._min.getFullYear(); const minMonth = this._min.getMonth(); diff --git a/src/Calendar/withDateSelection.js b/src/Calendar/withDateSelection.js index 6d03f1883..4abd88142 100644 --- a/src/Calendar/withDateSelection.js +++ b/src/Calendar/withDateSelection.js @@ -14,7 +14,7 @@ export const enhanceDay = withPropsOnChange(['selected'], props => ({ })); const enhanceYear = withPropsOnChange(['selected'], ({selected}) => ({ - selected: isNaN(parse(selected).getTime()) ? new Date() : parse(selected), + selected: isNaN(parse(selected).getTime()) ? null : parse(selected), })); // Enhancer to handle selecting and displaying a single date @@ -29,7 +29,7 @@ export const withDateSelection = compose( DayComponent: enhanceDay(DayComponent), YearsComponent: enhanceYear(YearsComponent), })), - withState('scrollDate', 'setScrollDate', props => props.selected || new Date()), + withState('scrollDate', 'setScrollDate', props => sanitizeDate(props.selected,props) || new Date()), withProps(({onSelect, setScrollDate, ...props}) => { const selected = sanitizeDate(props.selected, props); diff --git a/src/Calendar/withRange.js b/src/Calendar/withRange.js index 83d7766b6..5fdf10cd7 100644 --- a/src/Calendar/withRange.js +++ b/src/Calendar/withRange.js @@ -1,7 +1,7 @@ import {compose, withProps, withPropsOnChange, withState} from 'recompose'; import classNames from 'classnames'; import {withDefaultProps} from './'; -import {withImmutableProps} from '../utils'; +import {sanitizeDate, withImmutableProps} from '../utils'; import isBefore from 'date-fns/is_before'; import enhanceHeader from '../Header/withRange'; import format from 'date-fns/format'; @@ -73,8 +73,8 @@ export const withRange = compose( }, }, selected: { - start: format(selected.start, 'YYYY-MM-DD'), - end: format(selected.end, 'YYYY-MM-DD'), + start: format((sanitizeDate(selected.start,props) ? selected.start : new Date()), 'YYYY-MM-DD'), + end: format((sanitizeDate(selected.end,props) ? selected.end : new Date()), 'YYYY-MM-DD'), }, })), ); @@ -125,6 +125,7 @@ function handleYearSelect(date, {displayKey, onSelect, selected, setScrollDate}) } function getInitialDate({selected}) { + if(!selected || !selected.start || isNaN(selected.start.getTime())) return new Date(); return selected.start || new Date(); } diff --git a/src/Years/index.js b/src/Years/index.js index 8f94f471b..597a31ec6 100644 --- a/src/Years/index.js +++ b/src/Years/index.js @@ -49,13 +49,12 @@ export default class Years extends Component { renderMonths(year) { const {locale: {locale}, selected, theme, today, min, max, minDate, maxDate} = this.props; - var selectedDate = isNaN(selected.getTime()) ? new Date() : selected; - const months = getMonthsForYear(year, selectedDate.getDate()); + const months = getMonthsForYear(year, selected.getDate()); return (
      {months.map((date, index) => { - const isSelected = isSameMonth(date, selectedDate); + const isSelected = isSameMonth(date, selected); const isCurrentMonth = isSameMonth(date, today); const isDisabled = ( isBefore(date, min) || @@ -103,8 +102,7 @@ export default class Years extends Component { const {height, selected, showMonths, theme, today, width} = this.props; const currentYear = today.getFullYear(); const years = this.props.years.slice(0, this.props.years.length); - var selectedDate = isNaN(selected.getTime()) ? new Date() : selected; - const selectedYearIndex = years.indexOf(selectedDate.getFullYear()); + const selectedYearIndex = years.indexOf(selected.getFullYear()); const rowHeight = showMonths ? 110 : 50; const heights = years.map((val, index) => index === 0 || index === years.length - 1 ? rowHeight + SPACING @@ -143,7 +141,7 @@ export default class Years extends Component { [styles.first]: index === 0, [styles.last]: index === years.length - 1, })} - onClick={() => this.handleClick(new Date(selectedDate).setYear(year))} + onClick={() => this.handleClick(new Date(selected).setYear(year))} title={`Set year to ${year}`} data-year={year} style={Object.assign({}, style, { From 4660fb63f1039a5b11bcd9ac35c0a194ff030055 Mon Sep 17 00:00:00 2001 From: Jake Olefsky Date: Fri, 17 Mar 2017 13:58:14 -0700 Subject: [PATCH 3/3] Fixed for with Multiple --- src/Calendar/withMultipleDates.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Calendar/withMultipleDates.js b/src/Calendar/withMultipleDates.js index 21ce5d089..14ce50ccb 100644 --- a/src/Calendar/withMultipleDates.js +++ b/src/Calendar/withMultipleDates.js @@ -59,6 +59,7 @@ function handleYearSelect(date, callback) { } function getInitialDate({selected}) { + if(!selected || !selected[0] || isNaN(selected[0].getTime())) return new Date(); return selected.length ? selected[0] : new Date(); }