Merge branch 'dhamilton91-dev' into dev
* dhamilton91-dev: Refactor Added enabled and disabled date properties to date picker.old
commit
ab160f7dea
|
@ -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) => {
|
|||
<IconButton id='right' className={theme.next} icon='chevron_right' onClick={this.changeViewMonth} />
|
||||
<CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
|
||||
<CalendarMonth
|
||||
enabledDates={this.props.enabledDates}
|
||||
disabledDates={this.props.disabledDates}
|
||||
key={this.state.viewDate.getMonth()}
|
||||
locale={this.props.locale}
|
||||
maxDate={this.props.maxDate}
|
||||
|
|
|
@ -5,6 +5,8 @@ import CalendarDay from './CalendarDay.js';
|
|||
|
||||
class Month extends Component {
|
||||
static propTypes = {
|
||||
disabledDates: React.PropTypes.array,
|
||||
enabledDates: React.PropTypes.array,
|
||||
locale: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.object
|
||||
|
@ -23,10 +25,25 @@ class Month extends Component {
|
|||
viewDate: PropTypes.object
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
disabledDates: [],
|
||||
enabledDates: []
|
||||
};
|
||||
|
||||
handleDayClick = (day) => {
|
||||
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 (
|
||||
<CalendarDay
|
||||
key={i}
|
||||
day={i}
|
||||
disabled={disabled}
|
||||
disabled={this.isDayDisabled(date)}
|
||||
onClick={this.handleDayClick}
|
||||
selectedDate={this.props.selectedDate}
|
||||
theme={this.props.theme}
|
||||
|
|
|
@ -18,6 +18,8 @@ const factory = (Input, DatePickerDialog) => {
|
|||
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}
|
||||
|
|
|
@ -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) => {
|
|||
|
||||
<div className={theme.calendarWrapper}>
|
||||
<Calendar
|
||||
disabledDates={this.props.disabledDates}
|
||||
display={this.state.display}
|
||||
enabledDates={this.props.enabledDates}
|
||||
handleSelect={this.handleSelect}
|
||||
maxDate={this.props.maxDate}
|
||||
minDate={this.props.minDate}
|
||||
|
@ -127,7 +131,8 @@ const factory = (Dialog, Calendar) => {
|
|||
selectedDate={this.state.date}
|
||||
theme={this.props.theme}
|
||||
locale={this.props.locale}
|
||||
sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek} />
|
||||
sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
|
||||
/>
|
||||
</div>
|
||||
</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. |
|
||||
| `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.|
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
||||
<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
|
||||
label='Start time'
|
||||
onChange={this.handleChange.bind(this, 'time1')}
|
||||
|
|
Loading…
Reference in New Issue