JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

'use strict';

const Heading = ({date, changeMonth, resetDate}) => (

changeMonth(date.month() - 1)}>‹

resetDate()}>{date.format('MMMM')} {date.format('YYYY')}

changeMonth(date.month() + 1)}>›

);

const Day = ({currentDate, date, startDate, endDate, onClick}) => {

let className = [];

if (moment().isSame(date, 'day')) {

className.push('active');

}

if (date.isSame(startDate, 'day')) {

className.push('start');

}

if (date.isBetween(startDate, endDate, 'day')) {

className.push('between');

}

if (date.isSame(endDate, 'day')) {

className.push('end');

}

if (! date.isSame(currentDate, 'month')) {

className.push('muted');

}

return (

onClick(date)} currentDate={date} className={className.join(' ')}>{date.date()}

)

};

const Days = ({date, startDate, endDate, onClick}) => {

const thisDate = moment(date);

const daysInMonth = moment(date).daysInMonth();

const firstDayDate = moment(date).startOf('month');

const previousMonth = moment(date).subtract(1, 'month');

const previousMonthDays = previousMonth.daysInMonth();

const nextsMonth = moment(date).add(1, 'month');

let days = [];

let labels = [];

for (let i = 1; i <= 7; i++) {

labels.push({moment().day(i).format('ddd')});

}

for (let i = firstDayDate.day(); i > 1; i--) {

previousMonth.date(previousMonthDays - i + 2);

days.push(

onClick(date)} currentDate={date} date={moment(previousMonth)} startDate={startDate} endDate={endDate} />

);

}

for (let i = 1; i <= daysInMonth; i++) {

thisDate.date(i);

days.push(

onClick(date)} currentDate={date} date={moment(thisDate)} startDate={startDate} endDate={endDate} />

);

}

const daysCount = days.length;

for (let i = 1; i <= (42 - daysCount); i++) {

nextsMonth.date(i);

days.push(

onClick(date)} currentDate={date} date={moment(nextsMonth)} startDate={startDate} endDate={endDate} />

);

}

return (

{labels.concat()}

{days.concat()}

);

};

class Calendar extends React.Component {

constructor(props) {

super(props);

this.state = {

date: moment(),

startDate: moment().subtract(5, 'day'),

endDate: moment().add(3, 'day')

};

}

resetDate() {

this.setState({

date: moment()

});

}

changeMonth(month) {

const {date} = this.state;

date.month(month);

this.setState(

date

);

}

changeDate(date) {

let {startDate, endDate} = this.state;

if (startDate === null || date.isBefore(startDate, 'day') || ! startDate.isSame(endDate, 'day')) {

startDate = moment(date);

endDate = moment(date);

} else if (date.isSame(startDate, 'day') && date.isSame(endDate, 'day')) {

startDate = null;

endDate = null;

} else if (date.isAfter(startDate, 'day')) {

endDate = moment(date);

}

this.setState({

startDate,

endDate

});

}

render() {

const {date, startDate, endDate} = this.state;

return (

);

}

}

ReactDOM.render(

,

document.getElementById('calendar')

)