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 this.state.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 {this.state.attendanceDate}=this.props;// const reciveDate=AttendanceInfo.this.state.attendanceDate;// 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)// console.log(reciveDate)// }//将要渲染到月份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(props){ super(props); this.state={ attendanceDate:[], } } getListData(value) { let listData=[]; for (let i = 0; i < this.state.attendanceDate.length; i++) { let date=this.state.attendanceDate[i].date.split("-"); let handleDate=date[2]; //对01-09日的日期进行处理 if (handleDate<10) { handleDate=date[2].substring(1); // console.log("处理后的日期为"+handleDate); } if (value.date().toString()===handleDate){ // console.log("判断日期成功"); // console.log("状态码"+this.state.attendanceDate[i].state); //对有两个状态码的日期进行处理 let handleState=this.state.attendanceDate[i].state.split(','); console.log(handleState); for (let j = 0; j < handleState.length; j++) { switch (handleState[j]) { case '0801': listData.push({color:'green',content:'正常'}); break; case '0802': listData.push({color:'yellow',content:'迟到'}); break; case '0803': listData.push({color:'red',content:'旷工'}); break; case '0804': listData.push({color:'blue',content:'休假'}); break; default: } } } } return listData; } dateCellRender(value) { const listData = this.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> ); } componentDidMount(){ this.setState({ attendanceDate:this.props.attendanceDate, }); console.log("组件已挂载"); console.log(this.props.attendanceDate); } render(){ return( <Calendar className="attendanceCal" dateCellRender={this.dateCellRender.bind(this)}/> ) }}//备注：this.props.attendanceDate是父组件传过来的json数据
转载于:https://www.cnblogs.com/Jayeblog/p/11428824.html
