{
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}
/>
+
+
+
+