Skip to content
This repository was archived by the owner on May 19, 2025. It is now read-only.

Commit f2ccd56

Browse files
briantingtcbriantingtc
committed
date range now takes a singleDate prop that makes linkedcalendars output only one date
1 parent 1b8e241 commit f2ccd56

File tree

6 files changed

+46
-21
lines changed

6 files changed

+46
-21
lines changed

‎demo/build.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ if (NODE_ENV === 'production') {
6363
}));
6464
} else if (NODE_ENV === 'development') {
6565
config.entry.main.unshift('webpack/hot/only-dev-server');
66-
config.entry.main.unshift('webpack-dev-server/client?http://0.0.0.0:3000');
66+
config.entry.main.unshift('webpack-dev-server/client?http://0.0.0.0:5000');
6767
config.plugins.push(new webpack.HotModuleReplacementPlugin());
6868
}
6969

@@ -83,8 +83,8 @@ if (NODE_ENV === 'development') {
8383
}
8484
});
8585

86-
server.listen(3000, 'localhost', function(){
87-
console.log('Webpack Dev Server is listening on port 3000');
86+
server.listen(5000, 'localhost', function(){
87+
console.log('Webpack Dev Server is listening on port 5000');
8888
});
8989
} else if (NODE_ENV === 'production') {
9090
compiler.run(function (err, stats) {

‎demo/src/components/Main.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default class Main extends Component {
3434

3535
<h1 className={styles['Title']}>React-date-range</h1>
3636

37-
<Section title='Range Picker'>
37+
<Section title='SINGLE DATE Picker'>
3838
<div>
3939
<input
4040
type='text'
@@ -49,10 +49,7 @@ export default class Main extends Component {
4949
</div>
5050

5151
<DateRange
52-
startDate='10/11/2015'
53-
endDate={ now => {
54-
return '11/12/2015';
55-
}}
52+
singleDate={ true }
5653
onInit={ this.handleChange.bind(this, 'rangePicker') }
5754
onChange={ this.handleChange.bind(this, 'rangePicker') }
5855
/>

‎lib/Calendar.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ var Calendar = (function (_Component) {
7373
var date = (0, _utilsParseInputJs2['default'])(props.date, format);
7474
var state = {
7575
date: date,
76+
inputtedDate: props.date ? true : false,
7677
shownDate: (range && range['endDate'] || date).clone().add(offset, 'months'),
7778
firstDayOfWeek: firstDayOfWeek || _moment2['default'].localeData().firstDayOfWeek()
7879
};
@@ -108,7 +109,6 @@ var Calendar = (function (_Component) {
108109
var date = this.state.date;
109110

110111
onChange && onChange(newDate, Calendar);
111-
112112
if (!link) {
113113
this.setState({ date: newDate });
114114
}
@@ -219,6 +219,7 @@ var Calendar = (function (_Component) {
219219
var _state = this.state;
220220
var date = _state.date;
221221
var firstDayOfWeek = _state.firstDayOfWeek;
222+
var inputtedDate = _state.inputtedDate;
222223

223224
var dateUnix = date.unix();
224225

@@ -260,7 +261,7 @@ var Calendar = (function (_Component) {
260261
var dayMoment = data.dayMoment;
261262
var isPassive = data.isPassive;
262263

263-
var isSelected = !range && dayMoment.unix() === dateUnix;
264+
var isSelected = !range && dayMoment.unix() === dateUnix && shownDate;
264265
var isInRange = range && checkRange(dayMoment, range);
265266
var isStartEdge = range && checkStartEdge(dayMoment, range);
266267
var isEndEdge = range && checkEndEdge(dayMoment, range);

‎lib/DateRange.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,10 @@ var DateRange = (function (_Component) {
5151
var format = props.format;
5252
var linkedCalendars = props.linkedCalendars;
5353
var theme = props.theme;
54+
var singleDate = props.singleDate;
5455

5556
var startDate = (0, _utilsParseInputJs2['default'])(props.startDate, format);
56-
var endDate = (0, _utilsParseInputJs2['default'])(props.endDate, format);
57+
var endDate = singleDate ? (0, _utilsParseInputJs2['default'])(props.startDate, format) : (0, _utilsParseInputJs2['default'])(props.endDate, format);
5758

5859
this.state = {
5960
range: { startDate: startDate, endDate: endDate },
@@ -95,11 +96,22 @@ var DateRange = (function (_Component) {
9596

9697
this.setState({ range: range });
9798

98-
onChange && onChange(range, source);
99+
if (singleDate) {
100+
onChange && onChange(range.startDate, source);
101+
} else {
102+
onChange && onChange(range, source);
103+
}
99104
}
100105
}, {
101106
key: 'handleSelect',
102107
value: function handleSelect(date, source) {
108+
if (this.props.singleDate) {
109+
return this.setRange({
110+
startDate: date,
111+
endDate: date
112+
}, source);
113+
}
114+
103115
if (date.startDate && date.endDate) {
104116
this.step = 0;
105117
return this.setRange(date, source);
@@ -125,6 +137,7 @@ var DateRange = (function (_Component) {
125137
range['endDate'] = date;
126138
this.step = 0;
127139
break;
140+
128141
}
129142

130143
this.setRange(range, source);
@@ -219,6 +232,7 @@ var DateRange = (function (_Component) {
219232
})(_react.Component);
220233

221234
DateRange.defaultProps = {
235+
singleDate: false,
222236
linkedCalendars: false,
223237
theme: {},
224238
format: 'DD/MM/YYYY',
@@ -228,6 +242,7 @@ DateRange.defaultProps = {
228242
};
229243

230244
DateRange.propTypes = {
245+
singleDate: _react.PropTypes.bool,
231246
format: _react.PropTypes.string,
232247
firstDayOfWeek: _react.PropTypes.number,
233248
calendars: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]),

‎src/Calendar.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@ class Calendar extends Component {
3636
super(props, context);
3737

3838
const { format, range, theme, offset, firstDayOfWeek } = props;
39-
4039
const date = parseInput(props.date, format)
4140
const state = {
4241
date,
42+
inputtedDate: props.date ? true : false,
4343
shownDate : (range && range['endDate'] || date).clone().add(offset, 'months'),
4444
firstDayOfWeek: (firstDayOfWeek || moment.localeData().firstDayOfWeek()),
4545
}
@@ -55,7 +55,6 @@ class Calendar extends Component {
5555

5656
getShownDate() {
5757
const { link, offset } = this.props;
58-
5958
const shownDate = (link) ? link.clone().add(offset, 'months') : this.state.shownDate;
6059

6160
return shownDate;
@@ -66,7 +65,6 @@ class Calendar extends Component {
6665
const { date } = this.state;
6766

6867
onChange && onChange(newDate, Calendar);
69-
7068
if (!link) {
7169
this.setState({ date : newDate });
7270
}
@@ -142,7 +140,7 @@ class Calendar extends Component {
142140
const { range, minDate, maxDate, format, onlyClasses } = this.props;
143141

144142
const shownDate = this.getShownDate();
145-
const { date, firstDayOfWeek } = this.state;
143+
const { date, firstDayOfWeek, inputtedDate } = this.state;
146144
const dateUnix = date.unix();
147145

148146
const monthNumber = shownDate.month();
@@ -181,7 +179,7 @@ class Calendar extends Component {
181179
const today = moment().startOf('day');
182180
return days.map((data, index) => {
183181
const { dayMoment, isPassive } = data;
184-
const isSelected = !range && (dayMoment.unix() === dateUnix);
182+
const isSelected = !range && (dayMoment.unix() === dateUnix) && shownDate;
185183
const isInRange = range && checkRange(dayMoment, range);
186184
const isStartEdge = range && checkStartEdge(dayMoment, range);
187185
const isEndEdge = range && checkEndEdge(dayMoment, range);

‎src/DateRange.js‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ class DateRange extends Component {
1010
constructor(props, context) {
1111
super(props, context);
1212

13-
const { format, linkedCalendars, theme } = props;
13+
const { format, linkedCalendars, theme, singleDate } = props;
1414

1515
const startDate = parseInput(props.startDate, format);
16-
const endDate = parseInput(props.endDate, format);
16+
const endDate = singleDate ? parseInput(props.startDate, format) : parseInput(props.endDate, format);
1717

1818
this.state = {
1919
range : { startDate, endDate },
@@ -47,10 +47,21 @@ class DateRange extends Component {
4747

4848
this.setState({ range });
4949

50-
onChange && onChange(range, source);
50+
if (singleDate) {
51+
onChange && onChange(range.startDate, source)
52+
} else {
53+
onChange && onChange(range, source);
54+
}
5155
}
5256

5357
handleSelect(date, source) {
58+
if (this.props.singleDate) {
59+
return this.setRange({
60+
startDate: date,
61+
endDate: date,
62+
}, source)
63+
}
64+
5465
if (date.startDate && date.endDate) {
5566
this.step = 0;
5667
return this.setRange(date, source);
@@ -74,6 +85,7 @@ class DateRange extends Component {
7485
range['endDate'] = date;
7586
this.step = 0;
7687
break;
88+
7789
}
7890

7991
this.setRange(range, source);
@@ -140,7 +152,7 @@ class DateRange extends Component {
140152
theme={ styles }
141153
minDate={ minDate }
142154
maxDate={ maxDate }
143-
onlyClasses={ onlyClasses }
155+
onlyClasses={ onlyClasses }
144156
classNames={ classes }
145157
onChange={ this.handleSelect.bind(this) } />
146158
);
@@ -153,6 +165,7 @@ class DateRange extends Component {
153165
}
154166

155167
DateRange.defaultProps = {
168+
singleDate : false,
156169
linkedCalendars : false,
157170
theme : {},
158171
format : 'DD/MM/YYYY',
@@ -162,6 +175,7 @@ DateRange.defaultProps = {
162175
}
163176

164177
DateRange.propTypes = {
178+
singleDate : PropTypes.bool,
165179
format : PropTypes.string,
166180
firstDayOfWeek : PropTypes.number,
167181
calendars : PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

0 commit comments

Comments
 (0)