日历

/*日历组件*/
/**
 * date: 日期  默认当前日期
 * weekFirst：周首天 1：星期一  0：星期日
*/
import React, { Component } from 'react'
var Calendar = React.createClass({
    getInitialState: function () {
        return {
           currentdate:{},   //当前日期集
        }
    },
    componentWillMount :function(){
        this.getDates()
    },
    /*获取选择的日期集*/
    /**
     *  year: 当前年   
     *  month: 当前月
     *  day: 当前天
     *  date: 当前日期
     *  lastDay ：本月最后一天是几号
     *  parentLastDay：上月最后一天几号
     *  week：当前日期是星期几
     *  weekFirst :周首天 1：星期一  0：星期日  默认0
     */
    getDates(){
        const {date=getCurrentDate().date,weekFirst="0"}=this.props;
        let {currentdate}=this.state;
        currentdate=getCurrentDate(date); 
        currentdate.lastDay =parseInt(getLastDay(currentdate.year, currentdate.month)) //获取本月最后一天
        currentdate.parentLastDay =parseInt(getLastDay(currentdate.year, parseInt(currentdate.month)-1)) //获取上月最后一天
        currentdate.week=parseInt(getweek(date, 2)) //当前日期是星期几
        currentdate.weekFirst=weekFirst ;  //周首天是星期一还是星期日
        currentdate.weekFirstDate=getfirstday(currentdate.weekFirst,currentdate.date,currentdate.week) //获取本周首日的日期
        currentdate.parentWeekDate=getYestoday(currentdate.weekFirstDate)
        console.log(currentdate)
        this.setState({currentdate})
        console.log(getNextday("2017-07-27",-1))
    },
    render:function () {
        const {onChange=()=>{}, className=""}=this.props;
        const {currentdate}=this.state;
        return (
            <section>
                <article className={"calendar"+className}>
                    <div  className="client_month white margint_1r borderb_1r fn-hide1">
                        <span className="monthico" id="parent"></span>
                        <span className="curryear" ref="currentYear">{currentdate.year+"年"}</span>
                        <span className="currmonth" ref="currentMonth">{changecapital(currentdate.month)+"  月"}</span>
                        <span className="monthico" id="next" ></span>
                    </div>
                </article>
            </section>
        );
    }
});


//获取日期 （为空则为当天时间）
const getCurrentDate = function (str="") {
    var mydate =str==""?new Date():new Date(str);
    var year = parseInt(mydate.getFullYear());
    var month = addzerro(mydate.getMonth() + 1);
    var day = addzerro(mydate.getDate());
    var date = year + "-" + month + "-" + day;
    var gettoday = {
        "year": year,
        "month": month,
        "day": day,
        "date": date,
    }
    return gettoday;
};

//加零
const addzerro=(str)=>{
    if (parseInt(str) < 10) {
        return "0" + parseInt(str);
    }
    else {
        return parseInt(str);
    }
}

//月份小写转大写
const changecapital=(str)=>{
    var str2 = parseInt(str);
    const moneyarry={1:"一", 2:"二", 3:"三", 4:"四", 5:"五", 6:"六", 7:"七", 8:"八", 9:"九", 10:"十", 11:"十一", 12:"十二"}
    return moneyarry[str2];
}

/* 获取n天以前  默认7天前*/
 function getYestoday(date="",str=7) {
        var d = date==""?new Date():new Date(date);
        var beforday=str*1000
        var yesterday_milliseconds = d.getTime() - beforday * 60 * 60 * 24;
        var yesterday = new Date();
        yesterday.setTime(yesterday_milliseconds);
        var strYear = yesterday.getFullYear();
        var strDay = yesterday.getDate();
        var strMonth = yesterday.getMonth() + 1;
        var datastr = strYear + "-" + (strMonth < 10 ? '0' + strMonth : strMonth) + "-" + (strDay < 10 ? '0' + strDay : strDay);
        return datastr;
    }

/* 获取n天以后 默认7天后*/

 function getNextday(date="",str=7) {
        var d = date=""?new Date():new Date(date);
        var beforday=str*1000
        var yesterday_milliseconds = d.getTime() + beforday * 60 * 60 * 24;
        var yesterday = new Date();
        yesterday.setTime(yesterday_milliseconds);
        var strYear = yesterday.getFullYear();
        var strDay = yesterday.getDate();
        var strMonth = yesterday.getMonth() + 1;
        var datastr = strYear + "-" + (strMonth < 10 ? '0' + strMonth : strMonth) + "-" + (strDay < 10 ? '0' + strDay : strDay);
        return datastr;
    }
  /* 获取当前星期的首日是几号 */ 
  /**
     * date: 日期  默认当前日期
     * weekFirst：周首天 1：星期一  0：星期日
  */ 
 const getfirstday=(weekfirst,date,week)=>{
     
     const dayNum=weekfirst=="0"?parseInt(week)-0:parseInt(week)-1;  //计算距离周首天的天数 
     const  firstdate=getYestoday(date,dayNum)
     return firstdate;
 }





export default Calendar;

 

转载于:https://www.cnblogs.com/webqiand/articles/11250591.html