日历

1. 例子 -- 日历开发

效果：

1-1. 前提知识

• 决定一个月的样子，由三个要素决定：
  ① 本月1号星期几
  ② 这个月一共几天
  ③ 上一个月有几天

javascript中日期的用法，js内置了一个Date对象，注意月份是从0月开始

2020年3月30日
d.getDay() --- 查看星期几
d.getDate()---查看几号

• 解决第一个问题：某月第一天星期几
  2020年3月第一天为星期日
  

• 解决第二个问题：我们要得到2020年03月共几天？
  只需要求2020年03月的下一月(4月）的1号的前1毫秒是哪天就行。
  (new Date(new Date(2020 , 2 + 1 , 1) - 1)).getDate() //30
  

• 解决第三个问题：我们要得到2020年02月有几天，只需要求2020年3月1日上一秒有几天
  (new Date(new Date(2020,02,1) - 1)).getDate() //31

2. Month组件

2-1. 计算出某年某月的所有日子（含上下月尾巴）

2-2. 将所有日子拆分，每7天为一组，压入一个大数组ARR，创造一个二维数组

    var ARR = []
    for(var i=0;i<总日子;i=i+7){
      ARR.push(arr.slice(i,i+7))
    }

2-3. 上树

//封装一个函数，根据ARR返回JSX结构 将数组压到中，然后再讲数组压入中 ARR[0][1]为27

    function showMonth(){
      var domarr = []
      for(var i=0;ivar temparr = []
       		 for(var j=0;j<7;j++){
        		 temparr.push(<td key={j}>{ARR[i][j]}td>)
       		 }
         domarr.push(<tr key={i}>{temparr}tr>)
      }
    return domarr
    }

3. Decade组件

点开切换到年份选择视图，会出现16个年份，父组件传来的年份前8年和后7年

1. 若列出16个年份
2. 以4*4格式上树

3-1. 罗列年份

var arr =[]
    var setYear = this.props.setYear;
    for(var i =0;i<8;i++){
        arr.push(parseInt(this.props.year)+i)
        arr.unshift(this.props.year-i-1)//向前插8年
    }

3-2. 上树

    const showYears =() =>{   
       var domarr = []
       for(let i=0;i4){
           var temp = []
           for(let j=0;j<4;j++){
              temp.push(<td className=  {classnames({"hong":j+i == 8})}              
              onClick = { () => {setYear(arr[i+j])} } key={j}>{arr[i+j]}td>) 
           }
           domarr.push(<tr key={i}>{temp}tr>)
       }
       return domarr
    }