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}/>
)
}
}
转载于:https://www.cnblogs.com/Jayeblog/p/11427945.html
