From 6f0db34febe243d53d478fcfba37b43676ccaf21 Mon Sep 17 00:00:00 2001 From: dhamilton91 Date: Tue, 8 Nov 2016 09:06:34 -0500 Subject: [PATCH] Added enabled and disabled date properties to date picker. --- components/date_picker/Calendar.js | 4 ++++ components/date_picker/CalendarMonth.js | 18 +++++++++++++++++- components/date_picker/DatePicker.js | 6 +++++- components/date_picker/DatePickerDialog.js | 6 +++++- components/date_picker/readme.md | 2 ++ spec/components/pickers.js | 17 +++++++++++++++++ 6 files changed, 50 insertions(+), 3 deletions(-) diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js index 17d122da..b8628fe7 100644 --- a/components/date_picker/Calendar.js +++ b/components/date_picker/Calendar.js @@ -10,7 +10,9 @@ const DIRECTION_STEPS = { left: -1, right: 1 }; const factory = (IconButton) => { class Calendar extends Component { static propTypes = { + disabledDates: React.PropTypes.array, display: PropTypes.oneOf(['months', 'years']), + enabledDates: React.PropTypes.array, handleSelect: PropTypes.func, locale: React.PropTypes.oneOfType([ React.PropTypes.string, @@ -125,6 +127,8 @@ const factory = (IconButton) => { 0 && !this.findDate(date, enabledDates)) + || (disabledDates && disabledDates.length > 0 && this.findDate(date, disabledDates)); + } + + findDate (comparisonDate, dates){ + for (const date of dates){ + if (comparisonDate.getTime() === date.getTime()) return true; + } + return false; + } + renderWeeks () { const days = utils.range(0, 7).map(d => time.getDayOfWeekLetter(d, this.props.locale)); const source = (this.props.sundayFirstDayOfWeek) ? days : [...days.slice(1), days[0]]; @@ -36,7 +52,7 @@ class Month extends Component { renderDays () { return utils.range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => { const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i); - const disabled = time.dateOutOfRange(date, this.props.minDate, this.props.maxDate); + const disabled = this.isDayDisabled(date); return ( { autoOk: PropTypes.bool, cancelLabel: PropTypes.string, className: PropTypes.string, + disabledDates: React.PropTypes.array, + enabledDates: React.PropTypes.array, error: PropTypes.string, icon: PropTypes.oneOfType([ PropTypes.string, @@ -105,7 +107,7 @@ const factory = (Input, DatePickerDialog) => { render () { const { active, onDismiss,// eslint-disable-line - autoOk, cancelLabel, inputClassName, inputFormat, locale, maxDate, minDate, + autoOk, cancelLabel, enabledDates, disabledDates, inputClassName, inputFormat, locale, maxDate, minDate, okLabel, onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value, ...others } = this.props; const finalInputFormat = inputFormat || time.formatDate; @@ -134,6 +136,8 @@ const factory = (Input, DatePickerDialog) => { autoOk={autoOk} cancelLabel={cancelLabel} className={this.props.className} + disabledDates={disabledDates} + enabledDates={enabledDates} locale={locale} maxDate={maxDate} minDate={minDate} diff --git a/components/date_picker/DatePickerDialog.js b/components/date_picker/DatePickerDialog.js index d626fb0e..278f59c3 100644 --- a/components/date_picker/DatePickerDialog.js +++ b/components/date_picker/DatePickerDialog.js @@ -9,6 +9,8 @@ const factory = (Dialog, Calendar) => { autoOk: PropTypes.bool, cancelLabel: PropTypes.string, className: PropTypes.string, + disabledDates: PropTypes.array, + enabledDates: PropTypes.array, locale: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.object @@ -119,7 +121,9 @@ const factory = (Dialog, Calendar) => {
{ selectedDate={this.state.date} theme={this.props.theme} locale={this.props.locale} - sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek} /> + sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}/>
); diff --git a/components/date_picker/readme.md b/components/date_picker/readme.md index 06eeae5e..21e83383 100644 --- a/components/date_picker/readme.md +++ b/components/date_picker/readme.md @@ -49,6 +49,8 @@ If you want to provide a theme via context, the component key is `RTDatePicker`. | `active` | `Boolean` | `false` | Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. | | `autoOk` | `Boolean` | `false` | Automatically selects a date upon clicking on a day. | | `className` | `String` | | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.| +| `disabledDates` | `Array` | | An array of date objects which will be disabled in the calendar. All other dates will be enabled.| +| `enabledDates` | `Array` | | An array of date objects which will be enabled in the calendar. All other dates will be disabled.| | `inputClassName`| `String` | | This class will be applied to `Input` component of `DatePicker`. | | `inputFormat` | `Function` | | Function to format the date displayed on the input. | | `label` | `String` | | The text string to use for the floating label element in the input component.| diff --git a/spec/components/pickers.js b/spec/components/pickers.js index 3c1f996e..2f3c128b 100644 --- a/spec/components/pickers.js +++ b/spec/components/pickers.js @@ -8,6 +8,9 @@ const min_datetime = new Date(new Date(datetime).setDate(8)); const max_datetime = new Date(new Date(datetime).setDate(24)); datetime.setHours(17); datetime.setMinutes(28); +const today = new Date(); +today.setHours(0, 0, 0, 0); +const enabledDisabledDates = [new Date(today.getTime()), new Date(today.setDate(today.getDate() - 1))]; class PickersTest extends React.Component { state = { @@ -91,6 +94,20 @@ class PickersTest extends React.Component { value={this.state.date4} /> + + + +