React实现的日历

使用React实现的JS日历

class Calendar extends Dialog {

    constructor(props) {
        super(props);
        this.state.url = null;
        this.state.date = null;
        this.state.today = null;
 
        this.pick = this.onpick.bind(this);
        this.change = this.onChange.bind(this);
    }

    clear() {
        this.props.node.value = "";
        this.close();
    }

    today() {
        this.props.node.value = this.state.today.FormatDate(Local_DateFormat );
        this.close();
    }

    onpick(date) {
        this.props.node.value = date.FormatDate(Local_DateFormat );
        this.close();
    }

    onPrevYear() {
        this._cal_year.selectedIndex -- ;
        this.onChange();
    }

    onPrevMonth() {
        if (this._cal_month.selectedIndex == 0) {
            this._cal_month.selectedIndex = 11;
            this.onPrevYear();
        }
        else {
            this._cal_month.selectedIndex--;
            this.onChange();
        }
    }

    onChange() {
        const years = Array.prototype.slice.call(this._cal_year);
        const year = years.filter(op => op.selected);
        const y = parseInt(year[0].value);

        const months = Array.prototype.slice.call(this._cal_month);
        const month = months.filter(op => op.selected);
        const m = parseInt(month[0].value);

        let d = this.state.date;
        d.setFullYear(y);
        d.setMonth(m - 1);
        this.getContent(d);
        return true;
    }

    onNextMonth() {
        if (this._cal_month.selectedIndex == 11) {
            this._cal_month.selectedIndex = 0;
            this.onNextYear();
        }
        else {
            this._cal_month.selectedIndex++;
            this.onChange();
        }
    }

    onNextYear() {
        this._cal_year.selectedIndex ++ ;
        this.onChange();
    }

	getButtons() {
        return [ <button className="clear-button" key="_calendar_button_clear" onClick={this.clear.bind(this)}>{Environment.getText("calendar.Clear")}</button>, <button className="today-button" key="_calendar_button_today" onClick={this.today.bind(this)}>{Environment.getText("calendar.Today")}</button>, <button key="_calendar_button_close" onClick={this.close.bind(this)}>{Environment.getText("calendar.Done")}</button> ];
    }

    componentWillMount() {
    }

    show() {
        this.state.url = "Calendar.do?d=" + this.props.node.value;
        var that = this;
        
        window.fetch(this.state.url).then(function(response) { 
            return response.json();
        }).then(function(j) {
            that.getContent( new Date(  parseInt(j.now)), new Date(  parseInt(j.today)) );
        });
        super.show();
    }
    
    getContent(now, today) {
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let week = getWeek(now);
        let firstDate = getCalendarFirstDate(now);
        let weeks = getWeeks(now);

        let head = [];
        head.push(<a key="py1" href="#" onClick={()=>this.onPrevYear()}>&lt;&lt;{' '} </a>);
        head.push(<a key="pm2" href="#" onClick={()=>this.onPrevMonth()}>&lt;{' '} </a>);
        let t = [];
        for (let i=year - 10; i<=year + 10; i++) {
            t.push(<option key={i} value={i}>{i}</option> );
        }
        head.push(<select key="1" ref={f=>this._cal_year=f} value={year} onChange={()=>this.change()}>{t}</select> );
        head.push(<span key="spt">{' '}</span>);

        t = [];
        for (let i=1; i<=12; i++) {
            t.push(<option key={i} value={i}>{i}</option>);
        }
        head.push(<select key="2" ref={f=>this._cal_month=f} value={month} onChange={()=>this.change()}>{t}</select>);
        head.push(<a key="nm3" href="#" onClick={()=>this.onNextMonth()}>{' '}  &gt;</a>);
        head.push(<a key="ny4" href="#" onClick={()=>this.onNextYear()}>{' '}  &gt;&gt;</a>);

        let body = [];
        for (let i=1; i<=weeks; i++) {
            
            let tds = [];
            for (let j=1; j<=7; j++) {

                let klass = "day";
                if (equlas(firstDate, now)) {
                    klass += " today";
                }
                else  if (j == 1) {
                    klass += " sunday";
                }
                else  if (week == i) {
                    klass +=  " week";
                }

                let dup = firstDate;
                tds.push(<td key={i*j} className={klass}><a key={i*j} href="#" onClick={()=>this.pick(dup)}>{firstDate.getDate()}</a></td>);
                firstDate = firstDate.inc();
            }
            body.push(<tr key={i}>{tds}</tr>);
        }

        let ret = (
            <div className="calendar">
               {head}
               <hr/>
                <table>
                    <thead>
                        <tr>
                            <th key="_calendar_title_sunday">{Environment.getText("calendar.Sunday")}</th>
                            <th key="_calendar_title_monday">{Environment.getText("calendar.Monday")}</th>
                            <th key="_calendar_title_tuesday">{Environment.getText("calendar.Tuesday")}</th>
                            <th key="_calendar_title_wednesday">{Environment.getText("calendar.Wednesday")}</th>
                            <th key="_calendar_title_thursday">{Environment.getText("calendar.Thursday")}</th>
                            <th key="_calendar_title_friday">{Environment.getText("calendar.Friday")}</th>
                            <th key="_calendar_title_satursday">{Environment.getText("calendar.Satursday")}</th>
                        </tr>
                    </thead>
                    <tbody >
                        {body}
                    </tbody>
                </table>
            </div>
        );
        this.setState( { content : ret, date: now, today: today });
    }
}

效果如下: