Skip to content

Commit 24ff48f

Browse files
kvolkovich-sckvolkovich-sc
authored
Add possibility to define disabled days (PR OpusCapita#62, ISSUE OpusCapita#55)
API changes === Added new property `modifiers`. Implemented default `disabled` modifier. Disabled days validation and display for `DateInput` and `DateRangeInput` components can be implemented by validation at parent component level and passing validation result to `isValid` property. For validation use `import { ModifiersUtils } from @opuscapita/react-dates`. See component documentation for details.
1 parent 92ccd37 commit 24ff48f

File tree

13 files changed

+206
-140
lines changed

13 files changed

+206
-140
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"lint-fix": "eslint src --fix",
1919
"start": "cross-env NODE_ENV=development && showroom-scan src && babel-node www/index",
2020
"test": "mocha src/**/*.spec.js --compilers js:babel-register --require config/test/mocha-setup.js --require ignore-styles",
21-
"npm-build": "rimraf lib && cross-env NODE_ENV=production WEBPACK_BUNDLE_ANALYZE=true webpack --config ./config/webpack.config.js",
21+
"npm-build": "rimraf lib && cross-env NODE_ENV=production webpack --config ./config/webpack.config.js",
2222
"npm-publish": "npm run npm-build && npm publish",
2323
"publish-release": "npm run npm-publish"
2424
},

‎src/client/components/DateInput/DateInput.DOCUMENTATION.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com
1515
| disabled | bool | If true - became inactive |
1616
| isValid | bool | If false - highlight input as error |
1717
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
18+
| modifiers | object | [Info](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/modifiers.md). Use `disabled` modifier to select disabled days. Check, is it using [`import { ModifiersUtils } from @opuscapita/react-dates`](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/utils-modifiers.md) |
1819
| onBlur | func | Callback fired on input blur `(e) => {}` |
1920
| onChange | func | Callback fired on date change `Date date => {}` |
2021
| onFocus | func | Callback fired on input focus `(e) => {}` |
@@ -55,6 +56,9 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com
5556
onFocus={(e) => console.log('Focus!', e)}
5657
showToLeft={true}
5758
showToTop={true}
59+
modifiers={{
60+
disabled: { after: new Date() }
61+
}}
5862
/>
5963
```
6064

‎src/client/components/DateInput/DateInput.react.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ let propTypes = {
2121
disabled: PropTypes.bool,
2222
isValid: PropTypes.bool,
2323
locale: PropTypes.string,
24+
modifiers: PropTypes.object,
2425
onBlur: PropTypes.func,
2526
onChange: PropTypes.func,
2627
onFocus: PropTypes.func,
@@ -41,6 +42,7 @@ let defaultProps = {
4142
disabled: false,
4243
isValid: true,
4344
locale: 'en',
45+
modifiers: {},
4446
onBlur: () => {},
4547
onFocus: () => {},
4648
onChange: () => {},
@@ -113,11 +115,6 @@ class DateInput extends Component {
113115
document.body.removeEventListener('keydown', this.handleBodyKeyDown);
114116
}
115117

116-
handleDayClick = day => {
117-
this.setState({ showPicker: false });
118-
this.handleDateChange(day);
119-
};
120-
121118
handleBodyClick = event => {
122119
let clickedOutside = (
123120
!this.container.contains(event.target) &&
@@ -171,9 +168,18 @@ class DateInput extends Component {
171168

172169
handleDateChange = value => {
173170
this.props.onChange(zeroTime(value));
171+
this.hidePicker();
174172
this.setState({ error: null });
175173
};
176174

175+
handleDayClick = (value, modifiers) => {
176+
if (modifiers.disabled) {
177+
return;
178+
}
179+
180+
this.handleDateChange(value);
181+
}
182+
177183
showPicker() {
178184
let month = this.props.value || new Date();
179185
this.reactDayPicker.showMonth(month);
@@ -243,8 +249,10 @@ class DateInput extends Component {
243249
selectedDays={value}
244250
tabIndex={-1}
245251
fixedWeeks={true}
246-
onChange={this.handleDateChange}
247252
onDayClick={this.handleDayClick}
253+
onDayKeyDown={this.handleDateChange}
254+
onDayTouchEnd={this.handleDateChange}
255+
onChange={this.handleDateChange}
248256
{ ...dayPickerSpecificProps }
249257
/>
250258
);

‎src/client/components/DatePicker/DatePicker.DOCUMENTATION.md‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,17 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com
88

99
### Props Reference
1010

11-
| Name | Type | Description |
12-
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
13-
| className | string | Default HTML behavior |
14-
| disabled | bool | If true - became inactive |
15-
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
16-
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
17-
| showToLeft | bool | Show picker popup to left relative to button |
18-
| showToTop | bool | Show picker popup to top relative to button |
19-
| tabIndex | number | Default HTML behavior |
20-
| value | instanceOf(Date) | Instance of `Date` |
11+
| Name | Type | Description |
12+
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
13+
| className | string | Default HTML behavior |
14+
| disabled | bool | If true - became inactive |
15+
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
16+
| modifiers | object | [Info](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/modifiers.md). Use `disabled` modifier to select disabled days. Check, is it using [`import { ModifiersUtils } from @opuscapita/react-dates`](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/utils-modifiers.md) |
17+
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
18+
| showToLeft | bool | Show picker popup to left relative to button |
19+
| showToTop | bool | Show picker popup to top relative to button |
20+
| tabIndex | number | Default HTML behavior |
21+
| value | instanceOf(Date) | Instance of `Date` |
2122

2223
***
2324

@@ -35,6 +36,9 @@ See react-day-picker [methods reference](http://react-day-picker.js.org/APIMetho
3536
locale="de"
3637
onChange={_scope.handleChange.bind(_scope)}
3738
value={_scope.state.value}
39+
modifiers={{
40+
disabled: { after: new Date() }
41+
}}
3842
/>
3943
</div>
4044

‎src/client/components/DatePicker/DatePicker.react.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ let propTypes = {
1414
className: PropTypes.string,
1515
disabled: PropTypes.bool,
1616
locale: PropTypes.string,
17+
modifiers: PropTypes.object,
1718
onChange: PropTypes.func,
1819
showToLeft: PropTypes.bool,
1920
showToTop: PropTypes.bool,
@@ -25,6 +26,7 @@ let defaultProps = {
2526
className: '',
2627
disabled: false,
2728
locale: 'en',
29+
modifiers: {},
2830
onChange: () => {},
2931
showToLeft: false,
3032
showToTop: false,
@@ -68,9 +70,13 @@ class DatePicker extends Component {
6870
this.hidePicker();
6971
};
7072

71-
handleDayClick = day => {
72-
this.handleDateChange(day);
73-
this.setState({ showPicker: false });
73+
handleDayClick = (value, modifiers) => {
74+
if (modifiers.disabled) {
75+
return;
76+
}
77+
78+
this.handleDateChange(value);
79+
this.hidePicker();
7480
};
7581

7682
handleToggleClick = () => {

‎src/client/components/DateRangeInput/DateRangeInput.DOCUMENTATION.md‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,22 @@ Allows select date range using mouse.
66

77
### Props Reference
88

9-
| Name | Type | Description |
10-
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
11-
| className | string | Default behavior |
12-
| dateFormat | string | `dd/MM/yyyy`, `MM.dd.yyyy`, etc. |
13-
| disabled | bool | If true - became inactive |
14-
| isValid | bool | If false - highlight input as error |
15-
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
16-
| onFocus | func | Callback fired on input focus `(e, inputName) => {}` where `inputName === 'from |
17-
| onBlur | func | Callback fired on input blur `(e, inputName) => {}` where `inputName === 'from |
18-
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
19-
| showToLeft | bool | Show picker popup to left relative to input |
20-
| showToTop | bool | Show picker popup to top relative to input |
21-
| tabIndex | number | Default behavior |
22-
| value | array | `[Date from, Date to]` |
23-
| variants | array | `[ { getLabel: (locale) => string, getRange: (locale) => [ from<Date>, to<Date>] } ]` List of pre-defined date-ranges. Examples: current month, last week, next week, etc. |
9+
| Name | Type | Description |
10+
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
11+
| className | string | Default behavior |
12+
| dateFormat | string | `dd/MM/yyyy`, `MM.dd.yyyy`, etc. |
13+
| disabled | bool | If true - became inactive |
14+
| isValid | bool | If false - highlight input as error |
15+
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
16+
| modifiers | object | [Info](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/modifiers.md). Use `disabled` modifier to select disabled days. Check, is it using [`import { ModifiersUtils } from @opuscapita/react-dates`](https://github.com/gpbl/react-day-picker/blob/v6.1.0/docs/docs/utils-modifiers.md) |
17+
| onFocus | func | Callback fired on input focus `(e, inputName) => {}` where `inputName === 'from |
18+
| onBlur | func | Callback fired on input blur `(e, inputName) => {}` where `inputName === 'from |
19+
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
20+
| showToLeft | bool | Show picker popup to left relative to input |
21+
| showToTop | bool | Show picker popup to top relative to input |
22+
| tabIndex | number | Default behavior |
23+
| value | array | `[Date from, Date to]` |
24+
| variants | array | `[ { getLabel: (locale) => string, getRange: (locale) => [ from<Date>, to<Date>] } ]` List of pre-defined date-ranges. Examples: current month, last week, next week, etc. |
2425

2526
### Code Example
2627

@@ -41,6 +42,18 @@ Allows select date range using mouse.
4142
onChange={_scope.handleChange3.bind(_scope)}
4243
value={_scope.state.value2}
4344
/>
45+
46+
<hr />
47+
48+
<DateRangeInput
49+
dateFormat="dd.MM.yyyy"
50+
locale={'de'}
51+
onChange={_scope.handleChange1.bind(_scope)}
52+
value={_scope.state.value1}
53+
modifiers={{
54+
disabled: { after: new Date() }
55+
}}
56+
/>
4457
```
4558

4659
### Component Name

‎src/client/components/DateRangeInput/DateRangeInput.react.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ let propTypes = {
3636
disabled: PropTypes.bool,
3737
isValid: PropTypes.bool,
3838
locale: PropTypes.string,
39+
modifiers: PropTypes.object,
3940
onBlur: PropTypes.func,
4041
onChange: PropTypes.func,
4142
onFocus: PropTypes.func,
@@ -55,6 +56,7 @@ let defaultProps = {
5556
disabled: false,
5657
isValid: true,
5758
locale: 'en',
59+
modifiers: {},
5860
onBlur: () => {},
5961
onChange: () => {},
6062
onFocus: () => {},
@@ -198,7 +200,11 @@ class DateRangeInput extends Component {
198200
this.props.onChange(normalizedRange);
199201
};
200202

201-
handleDayClick = dayValue => {
203+
handleDayClick = (dayValue, modifiers) => {
204+
if (modifiers.disabled) {
205+
return;
206+
}
207+
202208
const day = zeroTime(dayValue);
203209

204210
let from = this.props.value[0];
@@ -352,12 +358,11 @@ class DateRangeInput extends Component {
352358
let pickerElement = (
353359
<DayPicker
354360
className="Range"
355-
disabledDays={{ before: from }}
356361
fixedWeeks={true}
357362
month={from}
358363
hideTodayButton={true}
359364
locale={locale}
360-
modifiers={ { start: from, end: enteredTo || to }}
365+
modifiers={{ start: from, end: enteredTo || to }}
361366
numberOfMonths={2}
362367
isRange={true}
363368
onChange={this.handleRangeChange}

0 commit comments

Comments
 (0)