Skip to content

Commit

Permalink
Add possibility to define disabled days (PR #62, ISSUE #55)
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@kvolkovich-sc
kvolkovich-sc authored Aug 23, 2018
1 parent 92ccd37 commit 24ff48f
Show file tree
Hide file tree
Showing 13 changed files with 206 additions and 140 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"lint-fix": "eslint src --fix",
"start": "cross-env NODE_ENV=development && showroom-scan src && babel-node www/index",
"test": "mocha src/**/*.spec.js --compilers js:babel-register --require config/test/mocha-setup.js --require ignore-styles",
"npm-build": "rimraf lib && cross-env NODE_ENV=production WEBPACK_BUNDLE_ANALYZE=true webpack --config ./config/webpack.config.js",
"npm-build": "rimraf lib && cross-env NODE_ENV=production webpack --config ./config/webpack.config.js",
"npm-publish": "npm run npm-build && npm publish",
"publish-release": "npm run npm-publish"
},
Expand Down
4 changes: 4 additions & 0 deletions src/client/components/DateInput/DateInput.DOCUMENTATION.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com
| disabled | bool | If true - became inactive |
| isValid | bool | If false - highlight input as error |
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
| 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) |
| onBlur | func | Callback fired on input blur `(e) => {}` |
| onChange | func | Callback fired on date change `Date date => {}` |
| onFocus | func | Callback fired on input focus `(e) => {}` |
Expand Down Expand Up @@ -55,6 +56,9 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com
onFocus={(e) => console.log('Focus!', e)}
showToLeft={true}
showToTop={true}
modifiers={{
disabled: { after: new Date() }
}}
/>
```

Expand Down
20 changes: 14 additions & 6 deletions src/client/components/DateInput/DateInput.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ let propTypes = {
disabled: PropTypes.bool,
isValid: PropTypes.bool,
locale: PropTypes.string,
modifiers: PropTypes.object,
onBlur: PropTypes.func,
onChange: PropTypes.func,
onFocus: PropTypes.func,
Expand All @@ -41,6 +42,7 @@ let defaultProps = {
disabled: false,
isValid: true,
locale: 'en',
modifiers: {},
onBlur: () => {},
onFocus: () => {},
onChange: () => {},
Expand Down Expand Up @@ -113,11 +115,6 @@ class DateInput extends Component {
document.body.removeEventListener('keydown', this.handleBodyKeyDown);
}

handleDayClick = day => {
this.setState({ showPicker: false });
this.handleDateChange(day);
};

handleBodyClick = event => {
let clickedOutside = (
!this.container.contains(event.target) &&
Expand Down Expand Up @@ -171,9 +168,18 @@ class DateInput extends Component {

handleDateChange = value => {
this.props.onChange(zeroTime(value));
this.hidePicker();
this.setState({ error: null });
};

handleDayClick = (value, modifiers) => {
if (modifiers.disabled) {
return;
}

this.handleDateChange(value);
}

showPicker() {
let month = this.props.value || new Date();
this.reactDayPicker.showMonth(month);
Expand Down Expand Up @@ -243,8 +249,10 @@ class DateInput extends Component {
selectedDays={value}
tabIndex={-1}
fixedWeeks={true}
onChange={this.handleDateChange}
onDayClick={this.handleDayClick}
onDayKeyDown={this.handleDateChange}
onDayTouchEnd={this.handleDateChange}
onChange={this.handleDateChange}
{ ...dayPickerSpecificProps }
/>
);
Expand Down
24 changes: 14 additions & 10 deletions src/client/components/DatePicker/DatePicker.DOCUMENTATION.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,17 @@ Based on configured to OpusCapita defaults [react-day-picker](https://github.com

### Props Reference

| Name | Type | Description |
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
| className | string | Default HTML behavior |
| disabled | bool | If true - became inactive |
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
| showToLeft | bool | Show picker popup to left relative to button |
| showToTop | bool | Show picker popup to top relative to button |
| tabIndex | number | Default HTML behavior |
| value | instanceOf(Date) | Instance of `Date` |
| Name | Type | Description |
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
| className | string | Default HTML behavior |
| disabled | bool | If true - became inactive |
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
| 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) |
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
| showToLeft | bool | Show picker popup to left relative to button |
| showToTop | bool | Show picker popup to top relative to button |
| tabIndex | number | Default HTML behavior |
| value | instanceOf(Date) | Instance of `Date` |

***

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

Expand Down
12 changes: 9 additions & 3 deletions src/client/components/DatePicker/DatePicker.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ let propTypes = {
className: PropTypes.string,
disabled: PropTypes.bool,
locale: PropTypes.string,
modifiers: PropTypes.object,
onChange: PropTypes.func,
showToLeft: PropTypes.bool,
showToTop: PropTypes.bool,
Expand All @@ -25,6 +26,7 @@ let defaultProps = {
className: '',
disabled: false,
locale: 'en',
modifiers: {},
onChange: () => {},
showToLeft: false,
showToTop: false,
Expand Down Expand Up @@ -68,9 +70,13 @@ class DatePicker extends Component {
this.hidePicker();
};

handleDayClick = day => {
this.handleDateChange(day);
this.setState({ showPicker: false });
handleDayClick = (value, modifiers) => {
if (modifiers.disabled) {
return;
}

this.handleDateChange(value);
this.hidePicker();
};

handleToggleClick = () => {
Expand Down
43 changes: 28 additions & 15 deletions src/client/components/DateRangeInput/DateRangeInput.DOCUMENTATION.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,22 @@ Allows select date range using mouse.

### Props Reference

| Name | Type | Description |
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
| className | string | Default behavior |
| dateFormat | string | `dd/MM/yyyy`, `MM.dd.yyyy`, etc. |
| disabled | bool | If true - became inactive |
| isValid | bool | If false - highlight input as error |
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
| onFocus | func | Callback fired on input focus `(e, inputName) => {}` where `inputName === 'from |
| onBlur | func | Callback fired on input blur `(e, inputName) => {}` where `inputName === 'from |
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
| showToLeft | bool | Show picker popup to left relative to input |
| showToTop | bool | Show picker popup to top relative to input |
| tabIndex | number | Default behavior |
| value | array | `[Date from, Date to]` |
| 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. |
| Name | Type | Description |
| ------------------------------ | :---------------------- | ----------------------------------------------------------- |
| className | string | Default behavior |
| dateFormat | string | `dd/MM/yyyy`, `MM.dd.yyyy`, etc. |
| disabled | bool | If true - became inactive |
| isValid | bool | If false - highlight input as error |
| locale | string | `en`, `de`, etc. Days and months translations, first day of week, etc. depends on this property |
| 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) |
| onFocus | func | Callback fired on input focus `(e, inputName) => {}` where `inputName === 'from |
| onBlur | func | Callback fired on input blur `(e, inputName) => {}` where `inputName === 'from |
| onChange | func | Callback fired on date change `[Date from, Date to] => {}` |
| showToLeft | bool | Show picker popup to left relative to input |
| showToTop | bool | Show picker popup to top relative to input |
| tabIndex | number | Default behavior |
| value | array | `[Date from, Date to]` |
| 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. |

### Code Example

Expand All @@ -41,6 +42,18 @@ Allows select date range using mouse.
onChange={_scope.handleChange3.bind(_scope)}
value={_scope.state.value2}
/>

<hr />

<DateRangeInput
dateFormat="dd.MM.yyyy"
locale={'de'}
onChange={_scope.handleChange1.bind(_scope)}
value={_scope.state.value1}
modifiers={{
disabled: { after: new Date() }
}}
/>
```

### Component Name
Expand Down
11 changes: 8 additions & 3 deletions src/client/components/DateRangeInput/DateRangeInput.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ let propTypes = {
disabled: PropTypes.bool,
isValid: PropTypes.bool,
locale: PropTypes.string,
modifiers: PropTypes.object,
onBlur: PropTypes.func,
onChange: PropTypes.func,
onFocus: PropTypes.func,
Expand All @@ -55,6 +56,7 @@ let defaultProps = {
disabled: false,
isValid: true,
locale: 'en',
modifiers: {},
onBlur: () => {},
onChange: () => {},
onFocus: () => {},
Expand Down Expand Up @@ -198,7 +200,11 @@ class DateRangeInput extends Component {
this.props.onChange(normalizedRange);
};

handleDayClick = dayValue => {
handleDayClick = (dayValue, modifiers) => {
if (modifiers.disabled) {
return;
}

const day = zeroTime(dayValue);

let from = this.props.value[0];
Expand Down Expand Up @@ -352,12 +358,11 @@ class DateRangeInput extends Component {
let pickerElement = (
<DayPicker
className="Range"
disabledDays={{ before: from }}
fixedWeeks={true}
month={from}
hideTodayButton={true}
locale={locale}
modifiers={ { start: from, end: enteredTo || to }}
modifiers={{ start: from, end: enteredTo || to }}
numberOfMonths={2}
isRange={true}
onChange={this.handleRangeChange}
Expand Down
Loading

0 comments on commit 24ff48f

Please sign in to comment.