标签：console log listData value Ant state date Calendar degin

import React, { Component } from 'react';
import {Calendar,Tag} from "antd";
import moment from 'moment';
import 'moment/locale/zh-cn';
import './attendanceInfo.css';
moment.locale('zh-cn');
//这里接收考情状态数据
const attendanceDate=[
    {
        date:'2019-08-1',
        state:0,//正常 green
    },
    {
        date:'2019-08-2',
        state:1,//迟到 yellow
    },
    {
        date:'2019-08-3',
        state:2,//旷工 red
    },
    {
        date:'2019-08-4',
        state:3,//休假 blue
    },
    {
        date:'2019-08-5',
        state:3,//休假 blue
    },
    {
        date:'2019-08-6',
        state:3,//休假 blue
    },
    {
        date:'2019-08-7',
        state:3,//休假 blue
    }
];
// const {attendanceDate}=this.props;
function onPanelChange(value, mode) {
    // console.log("value year: "+value.year());
    // console.log(parseInt(value.month())+1);
    // console.log("value day: "+value.date());
    // console.log("mode: "+mode);
    console.log(moment(value).format('YYYY-MM-DD HH:mm:ss')+"&&&"+mode)
}

function getListData(value) {
    let listData;
    // console.log(value.date());
    for (let i = 0; i < attendanceDate.length; i++) {
        let date=attendanceDate[i].date.split("-");
        // console.log(date[2]);
        if (value.date().toString()===date[2]){
            // console.log("判断日期成功");
            switch (attendanceDate[i].state) {
                case 0:
                    listData=[
                        {color:'green',content:'正常'}
                    ];
                    break;
                case 1:
                    listData=[
                        {color:'yellow',content:'迟到'}
                    ];
                    break;
                case 2:
                    listData=[
                        {color:'red',content:'旷工'}
                    ];
                    break;
                case 3:
                    listData=[
                        {color:'blue',content:'休假'}
                    ];
                    break;
                default:
            }

        }
    }
    return listData || [];
}

function dateCellRender(value) {
    const listData = getListData(value);
    // console.log(listData);
    return (
        <ul className="events">
            {listData.map(item => (
                <li key={item.content}>
                    <Tag color={item.color}>{item.content}</Tag>
                </li>
            ))}
        </ul>
    );
}
//将要渲染到月份cell中的内容
// function getMonthData(value) {
//     if (value.month() === 8) {
//         return 1394;
//     }
// }
//渲染月份内容的方法
// function monthCellRender(value) {
//     const num = getMonthData(value);
//     return num ? (
//         <div className="notes-month">
//             <section>{num}</section>
//             <span>Backlog number</span>
//         </div>
//     ) : null;
// }
export default class AttendanceInfo extends Component{
    // constructor(){
    //     super();
    //
    // }
    // componentDidMount(){
    //     console.log(this.props.attendanceDate);
    // }
    render(){
        return(
            <Calendar className="attendanceCal"
                      onPanelChange={onPanelChange}
                      dateCellRender={dateCellRender}/>
        )
    }
}

标签：console,log,listData,value,Ant,state,date,Calendar,degin
来源： https://www.cnblogs.com/Jayeblog/p/11427945.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。