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) => { { if (this.props.onDayClick) this.props.onDayClick(day); }; + isDayDisabled (date) { + const {minDate, maxDate, enabledDates, disabledDates} = this.props; + const compareDate = compDate => date.getTime() === compDate.getTime(); + const dateInDisabled = disabledDates.filter(compareDate).length > 0; + const dateInEnabled = enabledDates.filter(compareDate).length > 0; + return time.dateOutOfRange(date, minDate, maxDate) + || (enabledDates.length > 0 && !dateInEnabled) + || dateInDisabled; + } + 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,13 +53,11 @@ 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); - 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,9 +107,9 @@ const factory = (Input, DatePickerDialog) => { render () { const { active, onDismiss,// eslint-disable-line - autoOk, cancelLabel, inputClassName, inputFormat, locale, maxDate, minDate, - okLabel, onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value, - ...others } = this.props; + autoOk, cancelLabel, enabledDates, disabledDates, inputClassName, inputFormat, + locale, maxDate, minDate, okLabel, onEscKeyDown, onOverlayClick, readonly, + sundayFirstDayOfWeek, value, ...others } = this.props; const finalInputFormat = inputFormat || time.formatDate; const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined; const formattedDate = date === undefined ? '' : finalInputFormat(value, locale); @@ -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..21447056 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 049d587e..83df3596 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} /> + + + +