From f2ccd56561c43f5d329725bb9d4cbe33f1fa2fd9 Mon Sep 17 00:00:00 2001 From: Brian Ting Date: Wed, 22 Jun 2016 14:50:23 -0700 Subject: [PATCH 01/11] date range now takes a singleDate prop that makes linkedcalendars output only one date --- demo/build.js | 6 +++--- demo/src/components/Main.js | 7 ++----- lib/Calendar.js | 5 +++-- lib/DateRange.js | 19 +++++++++++++++++-- src/Calendar.js | 8 +++----- src/DateRange.js | 22 ++++++++++++++++++---- 6 files changed, 46 insertions(+), 21 deletions(-) diff --git a/demo/build.js b/demo/build.js index 176bdd06e..a7ba16d51 100644 --- a/demo/build.js +++ b/demo/build.js @@ -63,7 +63,7 @@ if (NODE_ENV === 'production') { })); } else if (NODE_ENV === 'development') { config.entry.main.unshift('webpack/hot/only-dev-server'); - config.entry.main.unshift('webpack-dev-server/client?http://0.0.0.0:3000'); + config.entry.main.unshift('webpack-dev-server/client?http://0.0.0.0:5000'); config.plugins.push(new webpack.HotModuleReplacementPlugin()); } @@ -83,8 +83,8 @@ if (NODE_ENV === 'development') { } }); - server.listen(3000, 'localhost', function(){ - console.log('Webpack Dev Server is listening on port 3000'); + server.listen(5000, 'localhost', function(){ + console.log('Webpack Dev Server is listening on port 5000'); }); } else if (NODE_ENV === 'production') { compiler.run(function (err, stats) { diff --git a/demo/src/components/Main.js b/demo/src/components/Main.js index 1ba8fb4a9..cfd2a4722 100644 --- a/demo/src/components/Main.js +++ b/demo/src/components/Main.js @@ -34,7 +34,7 @@ export default class Main extends Component {

React-date-range

-
+
{ - return '11/12/2015'; - }} + singleDate={ true } onInit={ this.handleChange.bind(this, 'rangePicker') } onChange={ this.handleChange.bind(this, 'rangePicker') } /> diff --git a/lib/Calendar.js b/lib/Calendar.js index c8a5c6da3..a148c6963 100644 --- a/lib/Calendar.js +++ b/lib/Calendar.js @@ -73,6 +73,7 @@ var Calendar = (function (_Component) { var date = (0, _utilsParseInputJs2['default'])(props.date, format); var state = { date: date, + inputtedDate: props.date ? true : false, shownDate: (range && range['endDate'] || date).clone().add(offset, 'months'), firstDayOfWeek: firstDayOfWeek || _moment2['default'].localeData().firstDayOfWeek() }; @@ -108,7 +109,6 @@ var Calendar = (function (_Component) { var date = this.state.date; onChange && onChange(newDate, Calendar); - if (!link) { this.setState({ date: newDate }); } @@ -219,6 +219,7 @@ var Calendar = (function (_Component) { var _state = this.state; var date = _state.date; var firstDayOfWeek = _state.firstDayOfWeek; + var inputtedDate = _state.inputtedDate; var dateUnix = date.unix(); @@ -260,7 +261,7 @@ var Calendar = (function (_Component) { var dayMoment = data.dayMoment; var isPassive = data.isPassive; - var isSelected = !range && dayMoment.unix() === dateUnix; + var isSelected = !range && dayMoment.unix() === dateUnix && shownDate; var isInRange = range && checkRange(dayMoment, range); var isStartEdge = range && checkStartEdge(dayMoment, range); var isEndEdge = range && checkEndEdge(dayMoment, range); diff --git a/lib/DateRange.js b/lib/DateRange.js index f891f319d..99146c965 100644 --- a/lib/DateRange.js +++ b/lib/DateRange.js @@ -51,9 +51,10 @@ var DateRange = (function (_Component) { var format = props.format; var linkedCalendars = props.linkedCalendars; var theme = props.theme; + var singleDate = props.singleDate; var startDate = (0, _utilsParseInputJs2['default'])(props.startDate, format); - var endDate = (0, _utilsParseInputJs2['default'])(props.endDate, format); + var endDate = singleDate ? (0, _utilsParseInputJs2['default'])(props.startDate, format) : (0, _utilsParseInputJs2['default'])(props.endDate, format); this.state = { range: { startDate: startDate, endDate: endDate }, @@ -95,11 +96,22 @@ var DateRange = (function (_Component) { this.setState({ range: range }); - onChange && onChange(range, source); + if (singleDate) { + onChange && onChange(range.startDate, source); + } else { + onChange && onChange(range, source); + } } }, { key: 'handleSelect', value: function handleSelect(date, source) { + if (this.props.singleDate) { + return this.setRange({ + startDate: date, + endDate: date + }, source); + } + if (date.startDate && date.endDate) { this.step = 0; return this.setRange(date, source); @@ -125,6 +137,7 @@ var DateRange = (function (_Component) { range['endDate'] = date; this.step = 0; break; + } this.setRange(range, source); @@ -219,6 +232,7 @@ var DateRange = (function (_Component) { })(_react.Component); DateRange.defaultProps = { + singleDate: false, linkedCalendars: false, theme: {}, format: 'DD/MM/YYYY', @@ -228,6 +242,7 @@ DateRange.defaultProps = { }; DateRange.propTypes = { + singleDate: _react.PropTypes.bool, format: _react.PropTypes.string, firstDayOfWeek: _react.PropTypes.number, calendars: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), diff --git a/src/Calendar.js b/src/Calendar.js index 83c8693e2..4c26b0214 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -36,10 +36,10 @@ class Calendar extends Component { super(props, context); const { format, range, theme, offset, firstDayOfWeek } = props; - const date = parseInput(props.date, format) const state = { date, + inputtedDate: props.date ? true : false, shownDate : (range && range['endDate'] || date).clone().add(offset, 'months'), firstDayOfWeek: (firstDayOfWeek || moment.localeData().firstDayOfWeek()), } @@ -55,7 +55,6 @@ class Calendar extends Component { getShownDate() { const { link, offset } = this.props; - const shownDate = (link) ? link.clone().add(offset, 'months') : this.state.shownDate; return shownDate; @@ -66,7 +65,6 @@ class Calendar extends Component { const { date } = this.state; onChange && onChange(newDate, Calendar); - if (!link) { this.setState({ date : newDate }); } @@ -142,7 +140,7 @@ class Calendar extends Component { const { range, minDate, maxDate, format, onlyClasses } = this.props; const shownDate = this.getShownDate(); - const { date, firstDayOfWeek } = this.state; + const { date, firstDayOfWeek, inputtedDate } = this.state; const dateUnix = date.unix(); const monthNumber = shownDate.month(); @@ -181,7 +179,7 @@ class Calendar extends Component { const today = moment().startOf('day'); return days.map((data, index) => { const { dayMoment, isPassive } = data; - const isSelected = !range && (dayMoment.unix() === dateUnix); + const isSelected = !range && (dayMoment.unix() === dateUnix) && shownDate; const isInRange = range && checkRange(dayMoment, range); const isStartEdge = range && checkStartEdge(dayMoment, range); const isEndEdge = range && checkEndEdge(dayMoment, range); diff --git a/src/DateRange.js b/src/DateRange.js index c6bde59d3..572d2d104 100644 --- a/src/DateRange.js +++ b/src/DateRange.js @@ -10,10 +10,10 @@ class DateRange extends Component { constructor(props, context) { super(props, context); - const { format, linkedCalendars, theme } = props; + const { format, linkedCalendars, theme, singleDate } = props; const startDate = parseInput(props.startDate, format); - const endDate = parseInput(props.endDate, format); + const endDate = singleDate ? parseInput(props.startDate, format) : parseInput(props.endDate, format); this.state = { range : { startDate, endDate }, @@ -47,10 +47,21 @@ class DateRange extends Component { this.setState({ range }); - onChange && onChange(range, source); + if (singleDate) { + onChange && onChange(range.startDate, source) + } else { + onChange && onChange(range, source); + } } handleSelect(date, source) { + if (this.props.singleDate) { + return this.setRange({ + startDate: date, + endDate: date, + }, source) + } + if (date.startDate && date.endDate) { this.step = 0; return this.setRange(date, source); @@ -74,6 +85,7 @@ class DateRange extends Component { range['endDate'] = date; this.step = 0; break; + } this.setRange(range, source); @@ -140,7 +152,7 @@ class DateRange extends Component { theme={ styles } minDate={ minDate } maxDate={ maxDate } - onlyClasses={ onlyClasses } + onlyClasses={ onlyClasses } classNames={ classes } onChange={ this.handleSelect.bind(this) } /> ); @@ -153,6 +165,7 @@ class DateRange extends Component { } DateRange.defaultProps = { + singleDate : false, linkedCalendars : false, theme : {}, format : 'DD/MM/YYYY', @@ -162,6 +175,7 @@ DateRange.defaultProps = { } DateRange.propTypes = { + singleDate : PropTypes.bool, format : PropTypes.string, firstDayOfWeek : PropTypes.number, calendars : PropTypes.oneOfType([PropTypes.string, PropTypes.number]), From 4a606843ccfd5414f327eb98f94e73c5a6a03050 Mon Sep 17 00:00:00 2001 From: Brian Ting Date: Wed, 22 Jun 2016 15:02:43 -0700 Subject: [PATCH 02/11] singleDate prop now named pickSingleDate --- lib/DateRange.js | 34 ++++++++++++++++++---------------- src/DateRange.js | 10 +++++----- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/lib/DateRange.js b/lib/DateRange.js index 99146c965..773b4d4e1 100644 --- a/lib/DateRange.js +++ b/lib/DateRange.js @@ -90,13 +90,15 @@ var DateRange = (function (_Component) { }, { key: 'setRange', value: function setRange(range, source) { - var onChange = this.props.onChange; + var _props = this.props; + var onChange = _props.onChange; + var pickSingleDate = _props.pickSingleDate; range = this.orderRange(range); this.setState({ range: range }); - if (singleDate) { + if (pickSingleDate) { onChange && onChange(range.startDate, source); } else { onChange && onChange(range, source); @@ -105,7 +107,7 @@ var DateRange = (function (_Component) { }, { key: 'handleSelect', value: function handleSelect(date, source) { - if (this.props.singleDate) { + if (this.props.pickSingleDate) { return this.setRange({ startDate: date, endDate: date @@ -175,17 +177,17 @@ var DateRange = (function (_Component) { value: function render() { var _this = this; - var _props = this.props; - var ranges = _props.ranges; - var format = _props.format; - var linkedCalendars = _props.linkedCalendars; - var style = _props.style; - var calendars = _props.calendars; - var firstDayOfWeek = _props.firstDayOfWeek; - var minDate = _props.minDate; - var maxDate = _props.maxDate; - var classNames = _props.classNames; - var onlyClasses = _props.onlyClasses; + var _props2 = this.props; + var ranges = _props2.ranges; + var format = _props2.format; + var linkedCalendars = _props2.linkedCalendars; + var style = _props2.style; + var calendars = _props2.calendars; + var firstDayOfWeek = _props2.firstDayOfWeek; + var minDate = _props2.minDate; + var maxDate = _props2.maxDate; + var classNames = _props2.classNames; + var onlyClasses = _props2.onlyClasses; var _state = this.state; var range = _state.range; var link = _state.link; @@ -232,7 +234,7 @@ var DateRange = (function (_Component) { })(_react.Component); DateRange.defaultProps = { - singleDate: false, + pickSingleDate: false, linkedCalendars: false, theme: {}, format: 'DD/MM/YYYY', @@ -242,7 +244,7 @@ DateRange.defaultProps = { }; DateRange.propTypes = { - singleDate: _react.PropTypes.bool, + pickSingleDate: _react.PropTypes.bool, format: _react.PropTypes.string, firstDayOfWeek: _react.PropTypes.number, calendars: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), diff --git a/src/DateRange.js b/src/DateRange.js index 572d2d104..6a7d11454 100644 --- a/src/DateRange.js +++ b/src/DateRange.js @@ -42,12 +42,12 @@ class DateRange extends Component { } setRange(range, source) { - const { onChange } = this.props + const { onChange, pickSingleDate } = this.props range = this.orderRange(range); this.setState({ range }); - if (singleDate) { + if (pickSingleDate) { onChange && onChange(range.startDate, source) } else { onChange && onChange(range, source); @@ -55,7 +55,7 @@ class DateRange extends Component { } handleSelect(date, source) { - if (this.props.singleDate) { + if (this.props.pickSingleDate) { return this.setRange({ startDate: date, endDate: date, @@ -165,7 +165,7 @@ class DateRange extends Component { } DateRange.defaultProps = { - singleDate : false, + pickSingleDate : false, linkedCalendars : false, theme : {}, format : 'DD/MM/YYYY', @@ -175,7 +175,7 @@ DateRange.defaultProps = { } DateRange.propTypes = { - singleDate : PropTypes.bool, + pickSingleDate : PropTypes.bool, format : PropTypes.string, firstDayOfWeek : PropTypes.number, calendars : PropTypes.oneOfType([PropTypes.string, PropTypes.number]), From 201d582e65e97d8701e5dbb6a923d19f08105037 Mon Sep 17 00:00:00 2001 From: Brian Ting Date: Wed, 22 Jun 2016 16:05:28 -0700 Subject: [PATCH 03/11] fixed variable typo --- lib/DateRange.js | 4 ++-- src/DateRange.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/DateRange.js b/lib/DateRange.js index 773b4d4e1..ee08fbf46 100644 --- a/lib/DateRange.js +++ b/lib/DateRange.js @@ -51,10 +51,10 @@ var DateRange = (function (_Component) { var format = props.format; var linkedCalendars = props.linkedCalendars; var theme = props.theme; - var singleDate = props.singleDate; + var pickSingleDate = props.pickSingleDate; var startDate = (0, _utilsParseInputJs2['default'])(props.startDate, format); - var endDate = singleDate ? (0, _utilsParseInputJs2['default'])(props.startDate, format) : (0, _utilsParseInputJs2['default'])(props.endDate, format); + var endDate = pickSingleDate ? (0, _utilsParseInputJs2['default'])(props.startDate, format) : (0, _utilsParseInputJs2['default'])(props.endDate, format); this.state = { range: { startDate: startDate, endDate: endDate }, diff --git a/src/DateRange.js b/src/DateRange.js index 6a7d11454..a5f63b9c3 100644 --- a/src/DateRange.js +++ b/src/DateRange.js @@ -10,10 +10,10 @@ class DateRange extends Component { constructor(props, context) { super(props, context); - const { format, linkedCalendars, theme, singleDate } = props; + const { format, linkedCalendars, theme, pickSingleDate } = props; const startDate = parseInput(props.startDate, format); - const endDate = singleDate ? parseInput(props.startDate, format) : parseInput(props.endDate, format); + const endDate = pickSingleDate ? parseInput(props.startDate, format) : parseInput(props.endDate, format); this.state = { range : { startDate, endDate }, From 7589bfb0ab61ef506af0b4ab19815f97d90f89cb Mon Sep 17 00:00:00 2001 From: Brian Ting Date: Wed, 22 Jun 2016 16:50:11 -0700 Subject: [PATCH 04/11] navigation arrows now hide if they are in the middle of linked calendars --- demo/src/components/Main.js | 140 ++---------------------------------- demo/src/styles/main.css | 2 +- lib/Calendar.js | 33 +++++---- lib/DateRange.js | 3 + src/Calendar.js | 38 +++++----- src/DateRange.js | 4 +- 6 files changed, 56 insertions(+), 164 deletions(-) diff --git a/demo/src/components/Main.js b/demo/src/components/Main.js index cfd2a4722..79f8d8540 100644 --- a/demo/src/components/Main.js +++ b/demo/src/components/Main.js @@ -49,144 +49,16 @@ export default class Main extends Component {
-
- -
-
- - -
- { - return '9/10/2015'; - }} - endDate={ now => { - return '13/11/2015'; - }} - linkedCalendars={ true } - onInit={ this.handleChange.bind(this, 'linked') } - onChange={ this.handleChange.bind(this, 'linked') } - /> -
- -
-
- -
- { return now.add(-4, 'days') } } - onInit={ this.handleChange.bind(this, 'datePicker') } - onChange={ this.handleChange.bind(this, 'datePicker') } - /> -
- -
-
- -
- { return now.add(-4, 'days') } } - onInit={ this.handleChange.bind(this, 'firstDayOfWeek') } - onChange={ this.handleChange.bind(this, 'firstDayOfWeek') } - /> -
- -
-
- - -
- -
- -
-
-
diff --git a/demo/src/styles/main.css b/demo/src/styles/main.css index 54e26a64f..7cddf3b85 100644 --- a/demo/src/styles/main.css +++ b/demo/src/styles/main.css @@ -32,7 +32,7 @@ } :local(.Demo) { - width: 560px; + width: 581px; float: left; } diff --git a/lib/Calendar.js b/lib/Calendar.js index a148c6963..789f4c685 100644 --- a/lib/Calendar.js +++ b/lib/Calendar.js @@ -69,10 +69,12 @@ var Calendar = (function (_Component) { var theme = props.theme; var offset = props.offset; var firstDayOfWeek = props.firstDayOfWeek; + var index = props.index; var date = (0, _utilsParseInputJs2['default'])(props.date, format); var state = { date: date, + index: index, inputtedDate: props.date ? true : false, shownDate: (range && range['endDate'] || date).clone().add(offset, 'months'), firstDayOfWeek: firstDayOfWeek || _moment2['default'].localeData().firstDayOfWeek() @@ -106,6 +108,7 @@ var Calendar = (function (_Component) { var _props2 = this.props; var link = _props2.link; var onChange = _props2.onChange; + var offset = _props2.offset; var date = this.state.date; onChange && onChange(newDate, Calendar); @@ -139,12 +142,18 @@ var Calendar = (function (_Component) { var month = _moment2['default'].months(shownDate.month()); var year = shownDate.year(); var styles = this.styles; - var onlyClasses = this.props.onlyClasses; + var _props4 = this.props; + var onlyClasses = _props4.onlyClasses; + var firstIndex = _props4.firstIndex; + var offset = _props4.offset; + var pickSingleDate = _props4.pickSingleDate; + var start = -firstIndex === offset; + var end = offset === 0; return _react2['default'].createElement( 'div', { style: onlyClasses ? undefined : styles['MonthAndYear'], className: classes.monthAndYearWrapper }, - _react2['default'].createElement( + start && pickSingleDate && _react2['default'].createElement( 'button', { style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], { float: 'left' }), @@ -171,7 +180,7 @@ var Calendar = (function (_Component) { year ) ), - _react2['default'].createElement( + end && pickSingleDate && _react2['default'].createElement( 'button', { style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], { float: 'right' }), @@ -208,12 +217,12 @@ var Calendar = (function (_Component) { // TODO: Split this logic into smaller chunks var styles = this.styles; - var _props4 = this.props; - var range = _props4.range; - var minDate = _props4.minDate; - var maxDate = _props4.maxDate; - var format = _props4.format; - var onlyClasses = _props4.onlyClasses; + var _props5 = this.props; + var range = _props5.range; + var minDate = _props5.minDate; + var maxDate = _props5.maxDate; + var format = _props5.format; + var onlyClasses = _props5.onlyClasses; var shownDate = this.getShownDate(); var _state = this.state; @@ -289,9 +298,9 @@ var Calendar = (function (_Component) { key: 'render', value: function render() { var styles = this.styles; - var _props5 = this.props; - var onlyClasses = _props5.onlyClasses; - var classNames = _props5.classNames; + var _props6 = this.props; + var onlyClasses = _props6.onlyClasses; + var classNames = _props6.classNames; var classes = _extends({}, _stylesJs.defaultClasses, classNames); diff --git a/lib/DateRange.js b/lib/DateRange.js index ee08fbf46..8d12f7a9c 100644 --- a/lib/DateRange.js +++ b/lib/DateRange.js @@ -188,6 +188,7 @@ var DateRange = (function (_Component) { var maxDate = _props2.maxDate; var classNames = _props2.classNames; var onlyClasses = _props2.onlyClasses; + var pickSingleDate = _props2.pickSingleDate; var _state = this.state; var range = _state.range; var link = _state.link; @@ -212,8 +213,10 @@ var DateRange = (function (_Component) { _calendars.push(_react2['default'].createElement(_CalendarJs2['default'], { key: i, offset: -i, + firstIndex: calendars - 1, link: linkedCalendars && link, linkCB: _this.handleLinkChange.bind(_this), + pickSingleDate: pickSingleDate, range: range, format: format, firstDayOfWeek: firstDayOfWeek, diff --git a/src/Calendar.js b/src/Calendar.js index 4c26b0214..f57d2cd02 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -35,10 +35,11 @@ class Calendar extends Component { constructor(props, context) { super(props, context); - const { format, range, theme, offset, firstDayOfWeek } = props; + const { format, range, theme, offset, firstDayOfWeek, index } = props; const date = parseInput(props.date, format) const state = { date, + index: index, inputtedDate: props.date ? true : false, shownDate : (range && range['endDate'] || date).clone().add(offset, 'months'), firstDayOfWeek: (firstDayOfWeek || moment.localeData().firstDayOfWeek()), @@ -61,7 +62,7 @@ class Calendar extends Component { } handleSelect(newDate) { - const { link, onChange } = this.props; + const { link, onChange, offset } = this.props; const { date } = this.state; onChange && onChange(newDate, Calendar); @@ -91,27 +92,32 @@ class Calendar extends Component { const month = moment.months(shownDate.month()); const year = shownDate.year(); const { styles } = this; - const { onlyClasses } = this.props; - + const { onlyClasses, firstIndex, offset, pickSingleDate } = this.props; + const start = -firstIndex === offset + const end = offset === 0 return (
- + { start && pickSingleDate && + + } {month} - {year} - + { end && pickSingleDate && + + }
) } diff --git a/src/DateRange.js b/src/DateRange.js index a5f63b9c3..6397ca813 100644 --- a/src/DateRange.js +++ b/src/DateRange.js @@ -118,7 +118,7 @@ class DateRange extends Component { } render() { - const { ranges, format, linkedCalendars, style, calendars, firstDayOfWeek, minDate, maxDate, classNames, onlyClasses } = this.props; + const { ranges, format, linkedCalendars, style, calendars, firstDayOfWeek, minDate, maxDate, classNames, onlyClasses, pickSingleDate } = this.props; const { range, link } = this.state; const { styles } = this; @@ -144,8 +144,10 @@ class DateRange extends Component { Date: Thu, 23 Jun 2016 15:30:10 -0700 Subject: [PATCH 05/11] hides buttons with css, does not hide buttons for calendars not using pick single date --- demo/src/components/Main.js | 26 ++++++++++++++++++++++++++ lib/Calendar.js | 20 ++++++++++++++++---- src/Calendar.js | 19 +++++++++++++------ 3 files changed, 55 insertions(+), 10 deletions(-) diff --git a/demo/src/components/Main.js b/demo/src/components/Main.js index 79f8d8540..32973d6ca 100644 --- a/demo/src/components/Main.js +++ b/demo/src/components/Main.js @@ -61,6 +61,32 @@ export default class Main extends Component { onChange={ this.handleChange.bind(this, 'rangePicker') } />
+
+
+ + +
+ + +
) } diff --git a/lib/Calendar.js b/lib/Calendar.js index 789f4c685..e52862082 100644 --- a/lib/Calendar.js +++ b/lib/Calendar.js @@ -150,13 +150,25 @@ var Calendar = (function (_Component) { var start = -firstIndex === offset; var end = offset === 0; + + var showStart = undefined, + showEnd = undefined; + + if (pickSingleDate) { + showStart = start ? { visibility: 'visible' } : { visibility: 'hidden' }; + showEnd = end ? { visibility: 'visible' } : { visibility: 'hidden' }; + } else { + showStart = {}; + showEnd = {}; + } + return _react2['default'].createElement( 'div', { style: onlyClasses ? undefined : styles['MonthAndYear'], className: classes.monthAndYearWrapper }, - start && pickSingleDate && _react2['default'].createElement( + _react2['default'].createElement( 'button', { - style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], { float: 'left' }), + style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], showStart, { float: 'left' }), className: classes.prevButton, onClick: this.changeMonth.bind(this, -1) }, _react2['default'].createElement('i', { style: onlyClasses ? undefined : _extends({}, styles['MonthArrow'], styles['MonthArrowPrev']) }) @@ -180,10 +192,10 @@ var Calendar = (function (_Component) { year ) ), - end && pickSingleDate && _react2['default'].createElement( + _react2['default'].createElement( 'button', { - style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], { float: 'right' }), + style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], showEnd, { float: 'right' }), className: classes.nextButton, onClick: this.changeMonth.bind(this, +1) }, _react2['default'].createElement('i', { style: onlyClasses ? undefined : _extends({}, styles['MonthArrow'], styles['MonthArrowNext']) }) diff --git a/src/Calendar.js b/src/Calendar.js index f57d2cd02..970b02b8d 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -95,29 +95,36 @@ class Calendar extends Component { const { onlyClasses, firstIndex, offset, pickSingleDate } = this.props; const start = -firstIndex === offset const end = offset === 0 + + let showStart, showEnd; + + if(pickSingleDate) { + showStart = start ? {visibility: 'visible'} : {visibility: 'hidden'} + showEnd = end ? {visibility: 'visible'} : {visibility: 'hidden'} + } else { + showStart = {} + showEnd = {} + } + return (
- { start && pickSingleDate && - } {month} - {year} - { end && pickSingleDate && - }
) } From 312594d9b9cf40ec8ae5dce91f275b99cbf6fe77 Mon Sep 17 00:00:00 2001 From: Brian Ting Date: Fri, 24 Jun 2016 11:51:26 -0700 Subject: [PATCH 06/11] calendar now starts from the left --- demo/src/components/Main.js | 2 +- lib/Calendar.js | 8 +++++--- lib/DateRange.js | 15 +++++++------- src/Calendar.js | 8 +++++--- src/DateRange.js | 39 +++++++++++++++++-------------------- 5 files changed, 37 insertions(+), 35 deletions(-) diff --git a/demo/src/components/Main.js b/demo/src/components/Main.js index 32973d6ca..5235d13a2 100644 --- a/demo/src/components/Main.js +++ b/demo/src/components/Main.js @@ -77,7 +77,7 @@ export default class Main extends Component { = 0; i--) { - _calendars.push(_react2['default'].createElement(_CalendarJs2['default'], { + var _calendars = [].concat(_toConsumableArray(Array(calendars).keys())).map(function (i) { + return _react2['default'].createElement(_CalendarJs2['default'], { key: i, - offset: -i, - firstIndex: calendars - 1, + offset: i, link: linkedCalendars && link, + calendarEnd: calendars - 1, linkCB: _this.handleLinkChange.bind(_this), pickSingleDate: pickSingleDate, range: range, @@ -225,8 +226,8 @@ var DateRange = (function (_Component) { maxDate: maxDate, onlyClasses: onlyClasses, classNames: classes, - onChange: _this.handleSelect.bind(_this) })); - } + onChange: _this.handleSelect.bind(_this) }); + }); return _calendars; })() ); diff --git a/src/Calendar.js b/src/Calendar.js index 970b02b8d..956cab748 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -37,6 +37,8 @@ class Calendar extends Component { const { format, range, theme, offset, firstDayOfWeek, index } = props; const date = parseInput(props.date, format) + const test = (range && range['endDate'] || date) + console.log(offset,test) const state = { date, index: index, @@ -92,9 +94,9 @@ class Calendar extends Component { const month = moment.months(shownDate.month()); const year = shownDate.year(); const { styles } = this; - const { onlyClasses, firstIndex, offset, pickSingleDate } = this.props; - const start = -firstIndex === offset - const end = offset === 0 + const { onlyClasses, offset, calendarEnd, pickSingleDate } = this.props; + const start = offset === 0 + const end = offset === calendarEnd let showStart, showEnd; diff --git a/src/DateRange.js b/src/DateRange.js index 6397ca813..220e14072 100644 --- a/src/DateRange.js +++ b/src/DateRange.js @@ -138,27 +138,24 @@ class DateRange extends Component { )} {()=>{ - const _calendars = []; - for (var i = Number(calendars) - 1; i >= 0; i--) { - _calendars.push( - - ); - } + const _calendars = [...Array(calendars).keys()].map( i => + + ) return _calendars; }()} From ea9fac3749e1d545eff0f378f5a11a9e43156851 Mon Sep 17 00:00:00 2001 From: Brian Ting Date: Fri, 24 Jun 2016 13:18:32 -0700 Subject: [PATCH 07/11] showIndex prop now determines where the active date will be rendered --- demo/src/components/Main.js | 1 + lib/Calendar.js | 8 +++++--- lib/DateRange.js | 7 ++++++- src/Calendar.js | 9 +++++---- src/DateRange.js | 14 +++++++++----- 5 files changed, 26 insertions(+), 13 deletions(-) diff --git a/demo/src/components/Main.js b/demo/src/components/Main.js index 5235d13a2..b16aaf643 100644 --- a/demo/src/components/Main.js +++ b/demo/src/components/Main.js @@ -51,6 +51,7 @@ export default class Main extends Component { { - const _calendars = [...Array(calendars).keys()].map( i => - { + const offset = i - showIndex + return - ) + }) return _calendars; }()} @@ -170,11 +172,13 @@ DateRange.defaultProps = { format : 'DD/MM/YYYY', calendars : 2, onlyClasses : false, + showIndex : 0, classNames : {} } DateRange.propTypes = { pickSingleDate : PropTypes.bool, + showIndex : PropTypes.number, format : PropTypes.string, firstDayOfWeek : PropTypes.number, calendars : PropTypes.oneOfType([PropTypes.string, PropTypes.number]), From edb7ca075e0be50358ebf24843226f55ea8ecfd3 Mon Sep 17 00:00:00 2001 From: Brian Ting Date: Fri, 24 Jun 2016 15:08:50 -0700 Subject: [PATCH 08/11] now can pass selectYear prop to activate year change --- demo/src/components/Main.js | 5 +++-- demo/src/styles/main.css | 2 +- lib/Calendar.js | 20 +++++++++++++++++++- lib/DateRange.js | 17 +++++++++++++++++ src/Calendar.js | 16 ++++++++++++++-- src/DateRange.js | 17 ++++++++++++++++- 6 files changed, 70 insertions(+), 7 deletions(-) diff --git a/demo/src/components/Main.js b/demo/src/components/Main.js index b16aaf643..e22063d91 100644 --- a/demo/src/components/Main.js +++ b/demo/src/components/Main.js @@ -51,11 +51,12 @@ export default class Main extends Component { { + const yearOptions = [] + for (var i = Number(year) - 10; i <= (year + 10); i++) { + yearOptions.push() + } + return yearOptions + } + return (