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

Commit fc7c0d7

Browse files
author
Arkadiy Butermanov
committed
Merge remote-tracking branch 'upstream/master'
* upstream/master: Switch license to MIT / Bump version Dont style sunday by default fix bug. Add showMonthArrow to Calendar in DateRange Re-draw calendars when range changes 1 Add shownDate props to Calendar.2 Add offsetPositive props to DateRange.3 Add demo to imitate using on cellphone 1 Web page internationalization (chinese and japanese).2 add two props to Calendar colorful Sunday Added min and max date to documentation Adding SCSS for 'classesOnly' prop. use startOf and endOf for date selection and ranges Add wrapper span that does not shrink on mousdown. Attach click event to wrapper span
2 parents c2cc1b3 + 33d1b50 commit fc7c0d7

24 files changed

+515
-789
lines changed

‎LICENCE‎

Lines changed: 5 additions & 671 deletions
Large diffs are not rendered by default.

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ class MyComponent extends Component {
4848
* **theme:** *(Object)* see [Demo's source](https://github.com/Adphorus/react-date-range/blob/master/demo/src/components/Main.js#L130)
4949
* **onInit:** *(Function)* default: none
5050
* **onChange:** *(Function)* default: none
51+
* **minDate:** *(String, Moment.js object, Function)* default: none
52+
* **maxDate:** *(String, Moment.js object, Function)* default: none
5153

5254
### Range Picker
5355
```javascript
@@ -86,3 +88,5 @@ class MyComponent extends Component {
8688
* **linkedCalendars:** *(Boolean)* default: false
8789
* **calendars:** *(Number)* default: 2
8890
* **ranges:** *(Object)* default: none
91+
* **minDate:** *(String, Moment.js object, Function)* default: none
92+
* **maxDate:** *(String, Moment.js object, Function)* default: none

‎demo/build.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
44
var path = require('path');
55
var DefinePlugin = webpack.DefinePlugin;
66
var WebpackDevServer = require("webpack-dev-server");
7-
var NODE_ENV = process.env.NODE_ENV || 'production';
7+
var NODE_ENV = process.env.NODE_ENV.trim() || 'production';
88

99
var config = {
1010
entry : {
@@ -34,7 +34,7 @@ var config = {
3434
],
3535

3636
resolve : {
37-
extensions : ['', '.js', '.css'],
37+
extensions : ['', '.js', '.css', '.scss'],
3838
alias : {
3939
'root' : path.join(__dirname, '/src'),
4040
'components' : path.join(__dirname, '/src/components'),
@@ -48,8 +48,8 @@ var config = {
4848
loaders : ['react-hot', 'babel-loader'],
4949
include : path.join(__dirname, '/src')
5050
}, {
51-
test : /\.css$/,
52-
loaders : ['style', 'css']
51+
test : /\.s?css$/,
52+
loader : 'style!css!sass'
5353
}
5454
]
5555
}

‎demo/package.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@
66
"scripts": {
77
"build": "node build.js",
88
"start-dev": "NODE_ENV=development npm run build",
9-
"build-prod": "NODE_ENV=production npm run build"
9+
"start-dev-windows": "set NODE_ENV=development & npm run build",
10+
"build-prod": "NODE_ENV=production npm run build",
11+
"build-prod-windows": "set NODE_ENV=production & npm run build"
1012
},
1113
"keywords": [],
1214
"author": "Burak Can <[email protected]>",
1315
"dependencies": {
16+
"moment": "^2.17.0",
1417
"normalize.css": "^3.0.3",
1518
"react": "^0.14.0",
1619
"react-dom": "^0.14.0"
@@ -20,9 +23,11 @@
2023
"babel-loader": "^5.3.2",
2124
"css-loader": "^0.19.0",
2225
"html-webpack-plugin": "^1.6.1",
26+
"node-sass": "^3.10.0",
2327
"react-hot-loader": "^1.3.0",
28+
"sass-loader": "^4.0.2",
2429
"style-loader": "^0.12.4",
25-
"webpack": "^1.12.2",
30+
"webpack": "^1.13.2",
2631
"webpack-dev-server": "^1.12.0"
2732
}
2833
}

‎demo/src/components/Main.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { Component } from 'react';
2+
import moment from 'moment';
23
import { defaultRanges, Calendar, DateRange } from '../../../lib';
34
import Section from 'components/Section';
45

56
import 'normalize.css';
67
import 'styles/global'
78
import styles from 'styles/main';
9+
import '../../../src/styles.scss'
810

911
export default class Main extends Component {
1012
constructor(props, context) {
@@ -99,6 +101,23 @@ export default class Main extends Component {
99101
/>
100102
</Section>
101103

104+
<Section title='Date Picker, chinese.'>
105+
<div>
106+
<input
107+
type='text'
108+
readOnly
109+
value={ datePicker && datePicker.format(format).toString() }
110+
/>
111+
</div>
112+
<Calendar
113+
disableDaysBeforeToday={true}
114+
lang={'jp'}
115+
date={ now => { return now } }
116+
onInit={ this.handleChange.bind(this, 'datePicker') }
117+
onChange={ this.handleChange.bind(this, 'datePicker') }
118+
/>
119+
</Section>
120+
102121
<Section title='Date Picker (Monday First)'>
103122
<div>
104123
<input
@@ -192,6 +211,34 @@ export default class Main extends Component {
192211
}}
193212
/>
194213
</Section>
214+
215+
<Section title='Mobile Datepicker'>
216+
<div>
217+
<input
218+
type='text'
219+
readOnly
220+
value={ rangePicker['startDate'] && rangePicker['startDate'].format(format).toString() }
221+
/>
222+
<input
223+
type='text'
224+
readOnly
225+
value={ rangePicker['endDate'] && rangePicker['endDate'].format(format).toString() }
226+
/>
227+
</div>
228+
<div className={styles['Mobile-Container']}>
229+
<DateRange
230+
startDate={ now => {return now.add(1,'month')}}
231+
endDate={ now => {return now.add(1,'month').add(3,'days')}}
232+
shownDate={moment()}
233+
offsetPositive={true}
234+
disableDaysBeforeToday={true}
235+
showMonthArrow={false}
236+
calendars={4}
237+
onInit={ this.handleChange.bind(this, 'rangePicker') }
238+
onChange={ this.handleChange.bind(this, 'rangePicker') }
239+
/>
240+
</div>
241+
</Section>
195242
</main>
196243
)
197244
}

‎demo/src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
66

77
<title></title>
8+
89
</head>
910
<body>
1011
<div id='root'></div>

‎demo/src/styles/global.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ html {
88
font-size: 62.5%;
99
font-weight: 400;
1010
}
11-
1211
body * {
1312
box-sizing: inherit;
1413
}

‎demo/src/styles/main.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,10 @@
4747
border-radius: 2px;
4848
font-size: 1.2rem;
4949
}
50+
51+
:local(.Mobile-Container) {
52+
height: 500px;
53+
overflow-y: scroll;
54+
width: 296px;
55+
margin: 0 auto;
56+
}

‎lib/Calendar.js‎

Lines changed: 49 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ var _DayCellJs = require('./DayCell.js');
3232

3333
var _DayCellJs2 = _interopRequireDefault(_DayCellJs);
3434

35+
var _LangDicJs = require('./LangDic.js');
36+
37+
var _LangDicJs2 = _interopRequireDefault(_LangDicJs);
38+
3539
var _stylesJs = require('./styles.js');
3640

3741
var _stylesJs2 = _interopRequireDefault(_stylesJs);
@@ -43,17 +47,17 @@ function checkRange(dayMoment, range) {
4347
function checkStartEdge(dayMoment, range) {
4448
var startDate = range.startDate;
4549

46-
return dayMoment.isSame(startDate);
50+
return dayMoment.startOf('day').isSame(startDate.startOf('day'));
4751
}
4852

4953
function checkEndEdge(dayMoment, range) {
5054
var endDate = range.endDate;
5155

52-
return dayMoment.isSame(endDate);
56+
return dayMoment.endOf('day').isSame(endDate.endOf('day'));
5357
}
5458

5559
function isOusideMinMax(dayMoment, minDate, maxDate, format) {
56-
return minDate && dayMoment.isBefore((0, _utilsParseInputJs2['default'])(minDate, format)) || maxDate && dayMoment.isAfter((0, _utilsParseInputJs2['default'])(maxDate, format));
60+
return minDate && dayMoment.isBefore((0, _utilsParseInputJs2['default'])(minDate, format, 'startOf')) || maxDate && dayMoment.isAfter((0, _utilsParseInputJs2['default'])(maxDate, format, 'endOf'));
5761
}
5862

5963
var Calendar = (function (_Component) {
@@ -70,15 +74,16 @@ var Calendar = (function (_Component) {
7074
var offset = props.offset;
7175
var firstDayOfWeek = props.firstDayOfWeek;
7276
var locale = props.locale;
77+
var shownDate = props.shownDate;
7378

7479
if (locale) {
7580
_moment2['default'].locale(locale);
7681
}
7782

78-
var date = (0, _utilsParseInputJs2['default'])(props.date, format);
83+
var date = (0, _utilsParseInputJs2['default'])(props.date, format, 'startOf');
7984
var state = {
8085
date: date,
81-
shownDate: (range && range['endDate'] || date).clone().add(offset, 'months'),
86+
shownDate: (shownDate || range && range['endDate'] || date).clone().add(offset, 'months'),
8287
firstDayOfWeek: firstDayOfWeek || _moment2['default'].localeData().firstDayOfWeek()
8388
};
8489

@@ -154,19 +159,24 @@ var Calendar = (function (_Component) {
154159
var month = _moment2['default'].months(shownDate.month());
155160
var year = shownDate.year();
156161
var styles = this.styles;
157-
var onlyClasses = this.props.onlyClasses;
162+
var _props4 = this.props;
163+
var onlyClasses = _props4.onlyClasses;
164+
var lang = _props4.lang;
165+
var showMonthArrow = _props4.showMonthArrow;
166+
167+
month = lang ? _LangDicJs2['default'][lang][month.toLowerCase()] : month;
158168

159169
return _react2['default'].createElement(
160170
'div',
161171
{ style: onlyClasses ? undefined : styles['MonthAndYear'], className: classes.monthAndYearWrapper },
162-
_react2['default'].createElement(
172+
showMonthArrow ? _react2['default'].createElement(
163173
'button',
164174
{
165175
style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], { float: 'left' }),
166176
className: classes.prevButton,
167177
onClick: this.changeMonth.bind(this, -1) },
168178
_react2['default'].createElement('i', { style: onlyClasses ? undefined : _extends({}, styles['MonthArrow'], styles['MonthArrowPrev']) })
169-
),
179+
) : null,
170180
_react2['default'].createElement(
171181
'span',
172182
null,
@@ -186,14 +196,14 @@ var Calendar = (function (_Component) {
186196
year
187197
)
188198
),
189-
_react2['default'].createElement(
199+
showMonthArrow ? _react2['default'].createElement(
190200
'button',
191201
{
192202
style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], { float: 'right' }),
193203
className: classes.nextButton,
194204
onClick: this.changeMonth.bind(this, +1) },
195205
_react2['default'].createElement('i', { style: onlyClasses ? undefined : _extends({}, styles['MonthArrow'], styles['MonthArrowNext']) })
196-
)
206+
) : null
197207
);
198208
}
199209
}, {
@@ -202,11 +212,13 @@ var Calendar = (function (_Component) {
202212
var dow = this.state.firstDayOfWeek;
203213
var weekdays = [];
204214
var styles = this.styles;
205-
var onlyClasses = this.props.onlyClasses;
215+
var _props5 = this.props;
216+
var onlyClasses = _props5.onlyClasses;
217+
var lang = _props5.lang;
206218

207219
for (var i = dow; i < 7 + dow; i++) {
208220
var day = _moment2['default'].weekdaysMin(i);
209-
221+
day = lang ? _LangDicJs2['default'][lang][day.toLowerCase()] : day;
210222
weekdays.push(_react2['default'].createElement(
211223
'span',
212224
{ style: onlyClasses ? undefined : styles['Weekday'], className: classes.weekDay, key: day },
@@ -223,12 +235,13 @@ var Calendar = (function (_Component) {
223235

224236
// TODO: Split this logic into smaller chunks
225237
var styles = this.styles;
226-
var _props4 = this.props;
227-
var range = _props4.range;
228-
var minDate = _props4.minDate;
229-
var maxDate = _props4.maxDate;
230-
var format = _props4.format;
231-
var onlyClasses = _props4.onlyClasses;
238+
var _props6 = this.props;
239+
var range = _props6.range;
240+
var minDate = _props6.minDate;
241+
var maxDate = _props6.maxDate;
242+
var format = _props6.format;
243+
var onlyClasses = _props6.onlyClasses;
244+
var disableDaysBeforeToday = _props6.disableDaysBeforeToday;
232245

233246
var shownDate = this.getShownDate();
234247
var _state = this.state;
@@ -260,7 +273,13 @@ var Calendar = (function (_Component) {
260273
// Current month's days
261274
for (var i = 1; i <= dayCount; i++) {
262275
var dayMoment = shownDate.clone().date(i);
263-
days.push({ dayMoment: dayMoment });
276+
// set days before today to isPassive
277+
var _today = (0, _moment2['default'])();
278+
if (disableDaysBeforeToday && Number(dayMoment.diff(_today, "days")) <= -1) {
279+
days.push({ dayMoment: dayMoment, isPassive: true });
280+
} else {
281+
days.push({ dayMoment: dayMoment });
282+
}
264283
}
265284

266285
// Next month's days
@@ -270,7 +289,7 @@ var Calendar = (function (_Component) {
270289
days.push({ dayMoment: dayMoment, isPassive: true });
271290
}
272291

273-
var today = (0, _moment2['default'])().startOf('day');
292+
var today = (0, _moment2['default'])().endOf('day');
274293
return days.map(function (data, index) {
275294
var dayMoment = data.dayMoment;
276295
var isPassive = data.isPassive;
@@ -281,6 +300,7 @@ var Calendar = (function (_Component) {
281300
var isEndEdge = range && checkEndEdge(dayMoment, range);
282301
var isEdge = isStartEdge || isEndEdge;
283302
var isToday = today.isSame(dayMoment);
303+
var isSunday = dayMoment.day() === 0;
284304
var isOutsideMinMax = isOusideMinMax(dayMoment, minDate, maxDate, format);
285305

286306
return _react2['default'].createElement(_DayCellJs2['default'], _extends({
@@ -291,6 +311,7 @@ var Calendar = (function (_Component) {
291311
isEndEdge: isEndEdge,
292312
isSelected: isSelected || isEdge,
293313
isInRange: isInRange,
314+
isSunday: isSunday,
294315
isToday: isToday,
295316
key: index,
296317
isPassive: isPassive || isOutsideMinMax,
@@ -303,9 +324,9 @@ var Calendar = (function (_Component) {
303324
key: 'render',
304325
value: function render() {
305326
var styles = this.styles;
306-
var _props5 = this.props;
307-
var onlyClasses = _props5.onlyClasses;
308-
var classNames = _props5.classNames;
327+
var _props7 = this.props;
328+
var onlyClasses = _props7.onlyClasses;
329+
var classNames = _props7.classNames;
309330

310331
var classes = _extends({}, _stylesJs.defaultClasses, classNames);
311332

@@ -337,11 +358,16 @@ var Calendar = (function (_Component) {
337358
Calendar.defaultProps = {
338359
format: 'DD/MM/YYYY',
339360
theme: {},
361+
showMonthArrow: true,
362+
disableDaysBeforeToday: false,
340363
onlyClasses: false,
341364
classNames: {}
342365
};
343366

344367
Calendar.propTypes = {
368+
showMonthArrow: _react.PropTypes.bool,
369+
disableDaysBeforeToday: _react.PropTypes.bool,
370+
lang: _react.PropTypes.string,
345371
sets: _react.PropTypes.string,
346372
range: _react.PropTypes.shape({
347373
startDate: _react.PropTypes.object,

0 commit comments

Comments
 (0)