给Ant degin中Calendar渲染当前月份日期标记
时间:2019-08-29
本文章向大家介绍给Ant degin中Calendar渲染当前月份日期标记,主要包括给Ant degin中Calendar渲染当前月份日期标记使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CentOS下使用LibreOffice实现文档格式的转换方式
- 详解在Linux中怎么使用cron计划任务
- Linux系统删除文件夹和文件的命令
- 详解Linux防火墙iptables禁IP与解封IP常用命令
- 在Ubuntu 16.04 Server上安装Zabbix的方法
- Centos7.3安装部署最新版Zabbix3.4的方法(图文)
- Linux系统下移植busybox中mkfs.vfat命令
- Linux服务器配置ip白名单防止远程登录以及端口暴露的问题
- Ubuntu上释放空间的5种简单方法
- Linux下Redis允许远程连接的实现方法
- Linux Socket 编程简介和实现
- Linux (Ubuntu 18.04) 下安装vim编辑器的方法
- 把windows下的字体安装到Linux系统下的方法介绍
- Ubuntu 7.10修改软件源的方法
- Linux 僵尸进程产生原因及解决方法