操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

日期選擇器

與省市區選擇器大致相同，不同之處就是對數據的處理。這里的起始日期與終止日期可以隨意規定（如下1949-10-1--->現在當前日期）。

/**
 * 整個應用
 */
var App = React.createClass({
    onDataSelect: function (data) {
        console.log(' data:  --->' + data)
        this.data = data;
       //與渲染無關的數據  直接存在this對象里  如果存在State里面會導致頁面臟渲染，卡頓
    },
    onClick: function () {
        alert(this.data);
    },
    render: function () {
        return (

                    
點擊獲取日期
                    
                
        );
    }
});

根據年份獲取月日情況，根據月份獲取天數js日期時間選擇器，要判斷各種邊界情況；

注意：

()=() 從Date對象獲取年份；

() 從Date對象獲取月份（0-11），

因此js日期時間選擇器，要獲取真實的月份就要用：()+1；

() 從Date對象返回一個月的某一天（1-31）；

() 從Date對象返回一個周的某一天（0-6）；

獲取某年某月的天數方法：

var = new Date(Year,Month,0).();

/**
 * 彈窗組件
 */
var DataDialog = React.createClass({
    getInitialState: function () {
        return {
            year: [],//年份數組
            month: [],//月份數組
            date: [],//天數數組
            yIndex: 0,//當前的年下標
            mIndex: 0,//當前的月下標
            dIndex: 0,//當前的日下標
        }
    },
    componentDidMount: function () {
        var year = [];//年數組
        var month = [];//月數組
        var day = [];//日數組
        for (var i = this.props.startTime.getFullYear(); 
              i <= this.props.endTime.getFullYear(); i++)
        {
            year.push(i);
        }
            //起始年份等于終止年份時，月份數組的獲取
        if(this.props.startTime.getFullYear()== this.props.endTime.getFullYear())
            {
            for (var i = this.props.startTime.getMonth()+1;
                  i <= this.props.endTime.getMonth()+1; i++) {
                month.push(i);
            }
            
            //起始月份等于終止月份時，日期的獲取
            if(this.props.startTime.getMonth()==this.props.endTime.getMonth()){
                for (var i = this.props.startTime.getDate();
                           i <= this.props.endTime.getDate();i++) 
                        {
                                 day.push(i);
                        }  
            }else{  //等年不等月
                for (var i = this.props.startTime.getDate();
                         i <= new Date(year[0], month[0], 0).getDate();i++) 
                 {
                                 day.push(i);
                 }  
            }
        }else{
            for (var i = this.props.startTime.getMonth()+1; i <= 12; i++) {
                month.push(i);
            }
            for (var i = this.props.startTime.getDate();
                     i <= new Date(year[0], month[0], 0).getDate(); i++) {
                day.push(i);
            }
        } 
        this.setState({
            year: year,//年數組
            month: month,//月數組
            day: day,//日數組
            yIndex: 0,//當前的年
            mIndex: 0,//當前的月
            dIndex: 0//當前的日
        })
        var data = year[this.state.yIndex]+'-'+month[this.state.mIndex]+
                    '-'+day[this.state.dIndex];
        this.props.onDataSelect(data);//初次渲染后，觸發回調
      
    }, 
    onDataChange: function (type, index) {
        console.log(type + "--->" + index)
        
        var year = this.state.year;
        var month = [];
        var day = [];
        
        switch (type) {
            case  "year"://年帶動月日變化
                var isInStartYear = this.state.year[index] == 
                    this.props.startTime.getFullYear();
                var isInEndYear = this.state.year[index] == 
                    this.props.endTime.getFullYear();
                var isInStartYearmonth = this.state.month[0] == 
                    this.props.startTime.getMonth()+1;
                var isInEndYearmonth = this.state.month[0] == 
                    this.props.endTime.getMonth()+1;
                 
                if (isInStartYear) {//如果當前年份等于初始年份
                    for (var i = this.props.startTime.getMonth()+1; i <= 12; i++) {
                        month.push(i);
                    }
                    for (var i = this.props.startTime.getDate();
                         i <= new Date(year[0], month[0], 0).getDate(); i++) {
                        day.push(i);
                    }
                }else if (isInEndYear) {  //如果當前年份等于終止年份
                    for (var i = 1; i <= this.props.endTime.getMonth()+1; i++) {
                        month.push(i);
                    }
                    if(isInEndYearmonth){//當前月份等于終止月份
                        for (var i = 1; i <= this.props.endTime.getDate(); i++) {
                            day.push(i);
                        }
                    }else{//當前月份不等于終止月份
                        for (var i = 1; i <= new Date(this.state.year[index], 
                                   month[0], 0).getDate(); i++) {
                            day.push(i);
                        }
                    }   
                }else {//當前年份既不等于起始也不等于終止年份
                    for (var i = 1; i <= 12; i++) {
                        month.push(i);
                    }
                    for (var i = 1; i <= new Date(this.state.year[index], month[0], 0).getDate(); i++) {
                        day.push(i);
                    }
                }
                this.setState({
                    month: month,
                    day: day,
                    yIndex: index,
                    mIndex: 0,
                    dIndex: 0,
                });
                break;
            case  "month"://月帶動日變化
                 var isInStartYear = this.state.year[this.state.yIndex] == this.props.startTime.getFullYear();
                 var isInEndYear = this.state.year[this.state.yIndex] == this.props.endTime.getFullYear();
                 var isInStartYearmonth = this.state.month[index] == this.props.startTime.getMonth()+1;
                 var isInEndYearmonth = this.state.month[index] == this.props.endTime.getMonth()+1;
                 
                 //當前年月份等于起始年月份等于終止年月份
                 if (isInStartYear && isInEndYear && isInStartYearmonth && isInEndYearmonth) {
                    for (var i = this.props.startTime.getDate();
                         i <= this.props.endTime.getDate();i++) 
                    {
                             day.push(i);
                    }   
                }else if (isInStartYear && isInStartYearmonth) {  //當前年月等于起始年月
                    for (var i = this.props.startTime.getDate(); i <= new Date(this.state.year[this.state.yIndex], this.state.month[index], 0).getDate(); i++) {
                        day.push(i);
                    }
                }else if (isInEndYear && isInEndYearmonth) {  //當前年月等于終止年月
                    for (var i = 1; i <= this.props.endTime.getDate(); i++) {
                        day.push(i);
                    }
                }else {
                    for (var i = 1; i <= new Date(this.state.year[this.state.yIndex], this.state.month[index], 0).getDate(); i++) {
                        day.push(i);
                    }
                }
                this.setState({
                    mIndex: index,
                    day: day,
                    dIndex: 0,
                });
                break;
            case  "day":
                this.setState({dIndex: index});
                break;
        }
        var data = this.state.year[this.state.yIndex]+'-'+this.state.month[this.state.mIndex]+'-'+this.state.day[this.state.dIndex];
        this.props.onDataSelect(data);//數據變化之后，觸發回調
    },
    
    render: function () {
        return (
                

                    

                    
                    
                    
                
        );
    }
});

滾動組建可參考省市區選擇三聯動。。。

選擇的日期彈出來啦