Added enabled and disabled date properties to date picker.
parent
89647815cb
commit
6f0db34feb
|
@ -10,7 +10,9 @@ const DIRECTION_STEPS = { left: -1, right: 1 };
|
||||||
const factory = (IconButton) => {
|
const factory = (IconButton) => {
|
||||||
class Calendar extends Component {
|
class Calendar extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
disabledDates: React.PropTypes.array,
|
||||||
display: PropTypes.oneOf(['months', 'years']),
|
display: PropTypes.oneOf(['months', 'years']),
|
||||||
|
enabledDates: React.PropTypes.array,
|
||||||
handleSelect: PropTypes.func,
|
handleSelect: PropTypes.func,
|
||||||
locale: React.PropTypes.oneOfType([
|
locale: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.string,
|
React.PropTypes.string,
|
||||||
|
@ -125,6 +127,8 @@ const factory = (IconButton) => {
|
||||||
<IconButton id='right' className={theme.next} icon='chevron_right' onClick={this.changeViewMonth} />
|
<IconButton id='right' className={theme.next} icon='chevron_right' onClick={this.changeViewMonth} />
|
||||||
<CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
|
<CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
|
||||||
<CalendarMonth
|
<CalendarMonth
|
||||||
|
enabledDates={this.props.enabledDates}
|
||||||
|
disabledDates={this.props.disabledDates}
|
||||||
key={this.state.viewDate.getMonth()}
|
key={this.state.viewDate.getMonth()}
|
||||||
locale={this.props.locale}
|
locale={this.props.locale}
|
||||||
maxDate={this.props.maxDate}
|
maxDate={this.props.maxDate}
|
||||||
|
|
|
@ -5,6 +5,8 @@ import CalendarDay from './CalendarDay.js';
|
||||||
|
|
||||||
class Month extends Component {
|
class Month extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
disabledDates: React.PropTypes.array,
|
||||||
|
enabledDates: React.PropTypes.array,
|
||||||
locale: React.PropTypes.oneOfType([
|
locale: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.string,
|
React.PropTypes.string,
|
||||||
React.PropTypes.object
|
React.PropTypes.object
|
||||||
|
@ -27,6 +29,20 @@ class Month extends Component {
|
||||||
if (this.props.onDayClick) this.props.onDayClick(day);
|
if (this.props.onDayClick) this.props.onDayClick(day);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
isDayDisabled (date) {
|
||||||
|
const {minDate, maxDate, enabledDates, disabledDates} = this.props;
|
||||||
|
return time.dateOutOfRange(date, minDate, maxDate)
|
||||||
|
|| (enabledDates && enabledDates.length > 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 () {
|
renderWeeks () {
|
||||||
const days = utils.range(0, 7).map(d => time.getDayOfWeekLetter(d, this.props.locale));
|
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]];
|
const source = (this.props.sundayFirstDayOfWeek) ? days : [...days.slice(1), days[0]];
|
||||||
|
@ -36,7 +52,7 @@ class Month extends Component {
|
||||||
renderDays () {
|
renderDays () {
|
||||||
return utils.range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
|
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 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 (
|
return (
|
||||||
<CalendarDay
|
<CalendarDay
|
||||||
|
|
|
@ -18,6 +18,8 @@ const factory = (Input, DatePickerDialog) => {
|
||||||
autoOk: PropTypes.bool,
|
autoOk: PropTypes.bool,
|
||||||
cancelLabel: PropTypes.string,
|
cancelLabel: PropTypes.string,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
|
disabledDates: React.PropTypes.array,
|
||||||
|
enabledDates: React.PropTypes.array,
|
||||||
error: PropTypes.string,
|
error: PropTypes.string,
|
||||||
icon: PropTypes.oneOfType([
|
icon: PropTypes.oneOfType([
|
||||||
PropTypes.string,
|
PropTypes.string,
|
||||||
|
@ -105,7 +107,7 @@ const factory = (Input, DatePickerDialog) => {
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { active, onDismiss,// eslint-disable-line
|
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,
|
okLabel, onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
|
||||||
...others } = this.props;
|
...others } = this.props;
|
||||||
const finalInputFormat = inputFormat || time.formatDate;
|
const finalInputFormat = inputFormat || time.formatDate;
|
||||||
|
@ -134,6 +136,8 @@ const factory = (Input, DatePickerDialog) => {
|
||||||
autoOk={autoOk}
|
autoOk={autoOk}
|
||||||
cancelLabel={cancelLabel}
|
cancelLabel={cancelLabel}
|
||||||
className={this.props.className}
|
className={this.props.className}
|
||||||
|
disabledDates={disabledDates}
|
||||||
|
enabledDates={enabledDates}
|
||||||
locale={locale}
|
locale={locale}
|
||||||
maxDate={maxDate}
|
maxDate={maxDate}
|
||||||
minDate={minDate}
|
minDate={minDate}
|
||||||
|
|
|
@ -9,6 +9,8 @@ const factory = (Dialog, Calendar) => {
|
||||||
autoOk: PropTypes.bool,
|
autoOk: PropTypes.bool,
|
||||||
cancelLabel: PropTypes.string,
|
cancelLabel: PropTypes.string,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
|
disabledDates: PropTypes.array,
|
||||||
|
enabledDates: PropTypes.array,
|
||||||
locale: React.PropTypes.oneOfType([
|
locale: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.string,
|
React.PropTypes.string,
|
||||||
React.PropTypes.object
|
React.PropTypes.object
|
||||||
|
@ -119,7 +121,9 @@ const factory = (Dialog, Calendar) => {
|
||||||
|
|
||||||
<div className={theme.calendarWrapper}>
|
<div className={theme.calendarWrapper}>
|
||||||
<Calendar
|
<Calendar
|
||||||
|
disabledDates={this.props.disabledDates}
|
||||||
display={this.state.display}
|
display={this.state.display}
|
||||||
|
enabledDates={this.props.enabledDates}
|
||||||
handleSelect={this.handleSelect}
|
handleSelect={this.handleSelect}
|
||||||
maxDate={this.props.maxDate}
|
maxDate={this.props.maxDate}
|
||||||
minDate={this.props.minDate}
|
minDate={this.props.minDate}
|
||||||
|
@ -127,7 +131,7 @@ const factory = (Dialog, Calendar) => {
|
||||||
selectedDate={this.state.date}
|
selectedDate={this.state.date}
|
||||||
theme={this.props.theme}
|
theme={this.props.theme}
|
||||||
locale={this.props.locale}
|
locale={this.props.locale}
|
||||||
sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek} />
|
sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}/>
|
||||||
</div>
|
</div>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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. |
|
| `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. |
|
| `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.|
|
| `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`. |
|
| `inputClassName`| `String` | | This class will be applied to `Input` component of `DatePicker`. |
|
||||||
| `inputFormat` | `Function` | | Function to format the date displayed on the input. |
|
| `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.|
|
| `label` | `String` | | The text string to use for the floating label element in the input component.|
|
||||||
|
|
|
@ -8,6 +8,9 @@ const min_datetime = new Date(new Date(datetime).setDate(8));
|
||||||
const max_datetime = new Date(new Date(datetime).setDate(24));
|
const max_datetime = new Date(new Date(datetime).setDate(24));
|
||||||
datetime.setHours(17);
|
datetime.setHours(17);
|
||||||
datetime.setMinutes(28);
|
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 {
|
class PickersTest extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
|
@ -91,6 +94,20 @@ class PickersTest extends React.Component {
|
||||||
value={this.state.date4}
|
value={this.state.date4}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<DatePicker
|
||||||
|
label='Date picker with enabled dates'
|
||||||
|
onChange={this.handleChange.bind(this, 'date5')}
|
||||||
|
enabledDates={enabledDisabledDates}
|
||||||
|
value={this.state.date5}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DatePicker
|
||||||
|
label='Date picker with disabled dates'
|
||||||
|
onChange={this.handleChange.bind(this, 'date6')}
|
||||||
|
disabledDates={enabledDisabledDates}
|
||||||
|
value={this.state.date6}
|
||||||
|
/>
|
||||||
|
|
||||||
<TimePicker
|
<TimePicker
|
||||||
label='Start time'
|
label='Start time'
|
||||||
onChange={this.handleChange.bind(this, 'time1')}
|
onChange={this.handleChange.bind(this, 'time1')}
|
||||||
|
|
Loading…
Reference in New Issue