New properties 'minDate' & 'maxDate'
parent
e7850c4668
commit
67e6a7ed8c
|
@ -8,6 +8,7 @@ $calendar-arrows-font-size: 2 * $unit;
|
|||
$calendar-arrows-ripple-duration: 450ms;
|
||||
$calendar-year-font-size: 2.4;
|
||||
$calendar-day-font-size: 1.3 * $unit;
|
||||
$calendar-day-disable-opacity: 0.25;
|
||||
$calendar-row-height: 3 * $unit;
|
||||
$calendar-day-padding: .2 * $unit;
|
||||
$calendar-total-height: $calendar-row-height * 8 + $calendar-day-padding * 12;
|
||||
|
|
|
@ -5,6 +5,7 @@ import style from './style';
|
|||
class Day extends React.Component {
|
||||
static propTypes = {
|
||||
day: React.PropTypes.number,
|
||||
disabled: React.PropTypes.bool,
|
||||
onClick: React.PropTypes.func,
|
||||
selectedDate: React.PropTypes.object,
|
||||
viewDate: React.PropTypes.object
|
||||
|
@ -26,7 +27,9 @@ class Day extends React.Component {
|
|||
}
|
||||
|
||||
render () {
|
||||
const className = this.isSelected() ? `${style.day} ${style.active}` : style.day;
|
||||
let className = this.isSelected() ? `${style.day} ${style.active}` : style.day;
|
||||
if (this.props.disabled) className += ` ${style.disabled}`;
|
||||
|
||||
return (
|
||||
<div className={className} style={this.dayStyle()}>
|
||||
<span onClick={this.props.onClick}>
|
||||
|
|
|
@ -10,6 +10,8 @@ import style from './style';
|
|||
class Calendar extends React.Component {
|
||||
static propTypes = {
|
||||
display: React.PropTypes.oneOf(['months', 'years']),
|
||||
maxDate: React.PropTypes.object,
|
||||
minDate: React.PropTypes.object,
|
||||
onChange: React.PropTypes.func,
|
||||
selectedDate: React.PropTypes.object,
|
||||
viewDate: React.PropTypes.object
|
||||
|
@ -98,6 +100,8 @@ class Calendar extends React.Component {
|
|||
<CSSTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
|
||||
<Month
|
||||
key={this.state.viewDate.getMonth()}
|
||||
maxDate={this.props.maxDate}
|
||||
minDate={this.props.minDate}
|
||||
viewDate={this.state.viewDate}
|
||||
selectedDate={this.props.selectedDate}
|
||||
onDayClick={this.handleDayClick} />
|
||||
|
|
|
@ -5,6 +5,8 @@ import style from './style';
|
|||
|
||||
class Month extends React.Component {
|
||||
static propTypes = {
|
||||
maxDate: React.PropTypes.object,
|
||||
minDate: React.PropTypes.object,
|
||||
onDayClick: React.PropTypes.func,
|
||||
selectedDate: React.PropTypes.object,
|
||||
viewDate: React.PropTypes.object
|
||||
|
@ -22,11 +24,21 @@ class Month extends React.Component {
|
|||
|
||||
renderDays () {
|
||||
return utils.range(1, utils.time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
|
||||
let active = true;
|
||||
|
||||
if (this.props.minDate || this.props.maxDate) {
|
||||
const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
|
||||
if (this.props.minDate && !(date >= this.props.minDate)) active = false;
|
||||
if (this.props.maxDate && !(date <= this.props.maxDate)) active = false;
|
||||
console.log('day', i, date, this.props.minDate, active);
|
||||
}
|
||||
|
||||
return (
|
||||
<Day
|
||||
key={i}
|
||||
day={i}
|
||||
onClick={this.handleDayClick.bind(this, i)}
|
||||
disabled={!active}
|
||||
onClick={active ? this.handleDayClick.bind(this, i) : null}
|
||||
selectedDate={this.props.selectedDate}
|
||||
viewDate={this.props.viewDate}
|
||||
/>
|
||||
|
@ -35,6 +47,7 @@ class Month extends React.Component {
|
|||
}
|
||||
|
||||
render () {
|
||||
console.info('max/min', this.props.maxDate, this.props.minDate);
|
||||
return (
|
||||
<div className={style.month}>
|
||||
<span className={style.title}>
|
||||
|
|
|
@ -50,11 +50,10 @@
|
|||
.week {
|
||||
display: flex;
|
||||
height: $calendar-row-height;
|
||||
flex-wrap: wrap;
|
||||
font-size: $calendar-day-font-size;
|
||||
line-height: $calendar-row-height;
|
||||
opacity: .5;
|
||||
|
||||
flex-wrap: wrap;
|
||||
> span {
|
||||
flex: 0 0 (100% / 7);
|
||||
}
|
||||
|
@ -62,9 +61,8 @@
|
|||
|
||||
.days {
|
||||
display: flex;
|
||||
font-size: $calendar-day-font-size;
|
||||
|
||||
flex-wrap: wrap;
|
||||
font-size: $calendar-day-font-size;
|
||||
}
|
||||
|
||||
.day {
|
||||
|
@ -75,10 +73,9 @@
|
|||
width: $calendar-row-height;
|
||||
height: $calendar-row-height;
|
||||
line-height: $calendar-row-height;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:hover:not(.active) > span {
|
||||
&:hover:not(.active):not(.disabled) > span {
|
||||
color: $calendar-primary-contrast-color;
|
||||
background: $calendar-primary-hover-color;
|
||||
}
|
||||
|
@ -86,6 +83,12 @@
|
|||
color: $calendar-primary-contrast-color;
|
||||
background: $calendar-primary-color;
|
||||
}
|
||||
&:hover:not(.disabled) > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: $calendar-day-disable-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.month {
|
||||
|
|
|
@ -7,6 +7,8 @@ import Dialog from '../dialog';
|
|||
class CalendarDialog extends React.Component {
|
||||
static propTypes = {
|
||||
active: React.PropTypes.bool,
|
||||
maxDate: React.PropTypes.object,
|
||||
minDate: React.PropTypes.object,
|
||||
onDismiss: React.PropTypes.func,
|
||||
onSelect: React.PropTypes.func,
|
||||
value: React.PropTypes.object
|
||||
|
@ -61,6 +63,8 @@ class CalendarDialog extends React.Component {
|
|||
<div className={style.wrapper}>
|
||||
<Calendar
|
||||
display={this.state.display}
|
||||
maxDate={this.props.maxDate}
|
||||
minDate={this.props.minDate}
|
||||
onChange={this.handleCalendarChange}
|
||||
selectedDate={this.state.date} />
|
||||
</div>
|
||||
|
|
|
@ -7,6 +7,8 @@ import style from './style';
|
|||
|
||||
class DatePicker extends React.Component {
|
||||
static propTypes = {
|
||||
maxDate: React.PropTypes.object,
|
||||
minDate: React.PropTypes.object,
|
||||
onChange: React.PropTypes.func,
|
||||
value: React.PropTypes.object
|
||||
};
|
||||
|
@ -32,6 +34,7 @@ class DatePicker extends React.Component {
|
|||
render () {
|
||||
const { value } = this.props;
|
||||
const date = value ? `${value.getDate()} ${time.getFullMonth(value)} ${value.getFullYear()}` : null;
|
||||
|
||||
return (
|
||||
<div data-toolbox='date-picker'>
|
||||
<Input
|
||||
|
@ -44,6 +47,8 @@ class DatePicker extends React.Component {
|
|||
/>
|
||||
<CalendarDialog
|
||||
active={this.state.active}
|
||||
maxDate={this.props.maxDate}
|
||||
minDate={this.props.minDate}
|
||||
onDismiss={this.handleDismiss}
|
||||
onSelect={this.handleSelect}
|
||||
value={this.props.value}
|
||||
|
|
Loading…
Reference in New Issue