react-calendar文档详解+翻译

原创 2018年04月17日 14:57:41

react-calendar

是一个 基于react的日期显示控件。

显示效果:1、


2、

3、

示例demo: + 注释

import React, { Component } from 'react';
import Calendar from 'react-calendar';
import { MonthView, YearView, DecadeView, CenturyView } from "react-calendar";
import moment from 'moment';

class MyApp extends Component {
state = {
date: new Date(),
}

onChange = date => {
console.log(date, "onchange");
this.setState({ date })
}

formatMonth = (value, type) => {
console.log(value, type);
return value.getMonth() + 1 + "月";
}

render() {
return (
<div>
{/* Calendar 组件 注释 文档 */}
<Calendar
onChange={this.onChange} //最小的日期发生改变时触发
value={this.state.date} // 日历的值 可以是 一个 Date对象,也可以是 一个 数组: [new Date(2017, 0, 1), new Date(2017, 7, 1)]
activeStartDate={new Date(2017, 0, 1)} // 没有设置值时,默认开始的时间(默认显示的时间)
calendarType="ISO 8601" //默认值 : US ,us表示第一天是周天, 其他的 都是 ISO8601 第一天是周一
className="my-calendar" //在 calendar 最外层 盒子添加 类名
formatMonth={(value) => this.formatMonth(value, "MMM")} //自定义格式化 月份
maxDate={(new Date(2019, 10, 1))} //允许选择 的最大日期
maxDetail={"month"} // 视图中展示的最大细节,可取的值 为: "month", "year", "decade" or "century". Defaults to "month".  "month"
minDate={new Date()}
nextLabel={<div className="444">next</div>} //下一个月的图标显示 值可以是dom元素,也可以是 string类型的字符串
onActiveDateChange={({ activeStartDate, view }) => alert('Changed view to: ', activeStartDate, view)} //点击下一个月 或者 下一年 时触发(比较大的日期改变时触发)
// onClickDay={(value) => alert('Clicked day: '+ value)} //只有点击 “天” 时 触发 点击事件
// onClickDecade={(value) => alert('Clicked decade: ', value)}
// onClickMonth={(value) => alert('Clicked month: ', value)}
// onClickWeekNumber={(weekNumber, date) => alert('Clicked week: ', weekNumber, 'that starts on: ', date)}
// onClickYear={(value) => alert('Clicked year: ', value)} //点击 “年” 的时候触发
onDrillDown={({ activeStartDate, view }) => alert('Drilled down to: ', activeStartDate, view)}
returnValue="range" // 取值范围 是 : "start", "end" or "range". 当 触发 onchange 或者 onClick事件 时,回调函数中 日期分别为 这一天的 开始时间 ,结束时间。range返回一个数组,这一天的开始时间和结束时间
showNavigation={true} //顶部导航 是否 显示 ,默认 true
showNeighboringMonth={true} //上一个 月的是否渲染
selectRange={false} //是否必须选取一个范围的值, 两个值之间。 默认 false
showWeekNumbers={false} //是否显示第几周,默认false
tileClassName="aa bb cc" //给按钮 增加类名 可以是 String: "class1 class2" 或者给一个数组 Array of strings: ["class1", "class2 class3"] ,可以是function : Function: ({ date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null
tileContent="" // 在每一个格中显示的内容 1、String: "Sample" 2、 React element: <TileContent /> 3、 Function: ({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null
view="month" // 默认展示的视图,月份,年份,还是 十年 世纪 "month", "year", "decade" or "century".
/>

<br />

{/* MonthView, YearView, DecadeView, CenturyView 注释文档 */}

<MonthView
activeStartDate={(new Date())}
hover={new Date(2017, 0, 1)}
maxDate={(new Date(2018, 10, 8))}
minDate={(new Date(2015, 10, 8))}
onClick={(data) => { console.log(JSON.stringify(data)) }}
tileClassName="33 44 555"

tileContent={({ date, view }) => (view === 'month' && date.getDay() === 5 ? <p>It's Sunday!</p> : null)} //每个日历 表格 的渲染的 组件 或者文本
value={['2017-01-01', '2017-08-01']}
/>

<br />

<YearView
activeStartDate={(new Date())}
hover={new Date(2017, 0, 1)}
maxDate={(new Date(2018, 10, 8))}
minDate={(new Date(2015, 10, 8))}
onClick={(data) => { console.log(JSON.stringify(data)) }}
tileClassName="33 44 555"

tileContent={({ date, view }) => (view === 'month' && date.getDay() === 5 ? <p>It's Sunday!</p> : null)} //每个日历 表格 的渲染的 组件 或者文本
value={['2017-01-01', '2017-08-01']}
/>

<br />

<DecadeView
activeStartDate={(new Date())}
hover={new Date(2017, 0, 1)}
maxDate={(new Date(2018, 10, 8))}
minDate={(new Date(2015, 10, 8))}
onClick={(data) => { console.log(JSON.stringify(data)) }}
tileClassName="33 44 555"

tileContent={({ date, view }) => (view === 'month' && date.getDay() === 5 ? <p>It's Sunday!</p> : null)} //每个日历 表格 的渲染的 组件 或者文本
value={['2017-01-01', '2017-08-01']}
/>

<br />

<CenturyView
activeStartDate={(new Date())}
hover={new Date(2017, 0, 1)}
maxDate={(new Date(2018, 10, 8))}
minDate={(new Date(2015, 10, 8))}
onClick={(data) => { console.log(JSON.stringify(data)) }}
tileClassName="33 44 555"

tileContent={({ date, view }) => (view === 'month' && date.getDay() === 5 ? <p>It's Sunday!</p> : null)} //每个日历 表格 的渲染的 组件 或者文本
value={['2017-01-01', '2017-08-01']}
/>

</div>
);
}
}

export default MyApp;


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ITzhongzi/article/details/79974886

IAP 苹果官方文档翻译 超级详解

原文地址: http://gaohaijun.blog.163.com/blog/static/176698271201143194018328/ 一、In App Purch...
  • u011574810
  • u011574810
  • 2016-12-01 14:13:44
  • 759

SciPy入门指南(译)

SciPy入门指南 这个教程是为了帮助初学者掌握scipy并且肯能快地实际使用。 什么是scipy、numpy、matplotlib?它们是用来干什么的?如何使用scipy工作学习使用sc...
  • zt_706
  • zt_706
  • 2013-09-09 14:03:49
  • 1660

rfc文档(中文翻译)目前最全的

  • 2009年03月18日 11:25
  • 3.48MB
  • 下载

SOAP协议规范详解

  • 2010年03月28日 19:04
  • 32KB
  • 下载

python官方文档(自翻译)

python官方文档(自翻译)The Python TutorialPython 是一种简单易学且功能强大的编程语言。它具有高效且高层次的数据结构和简单有效面向对象编程方法。Python优雅的语法和动...
  • broken_promise
  • broken_promise
  • 2017-08-23 10:33:10
  • 156

Spring官方文档翻译(1~6章)

Spring官方文档翻译
  • tangtong1
  • tangtong1
  • 2016-05-05 22:26:39
  • 29268

Thumbnailator的简介和使用范例

1.简单介绍         借用红薯对Thumbnailator 的描述:Thumbnailator是一个用来生成图像缩略图的 Java类库,通过很简单的代码即可生成图片缩略图,也可直接对一整...
  • a351945755
  • a351945755
  • 2015-06-26 14:44:33
  • 905

用谷歌浏览器将英文文档翻译成中文的方法(无字数限制)

思路:用谷歌翻译文档有5000字的限制,但是翻译网页就不会有字数限制。需要的软件:Adobe Acrobat 、谷歌浏览器提供下载地址Adobe Acrobat XI Pro: https://pan...
  • fuzimango
  • fuzimango
  • 2017-08-20 01:09:24
  • 6644

关于Linux内核文档的翻译

我是一名山东大学的在校本科生,其实我的英语也不是很好,只是一般水平。我去翻译Linux文档只是觉得这份文档还没有中文版的,觉得翻译它们是一件很有意义的事情,并且还能通过翻译文档来理解Linux操作系统...
  • luoyhang003
  • luoyhang003
  • 2014-09-29 15:08:55
  • 1791

Google可翻译Word或PDF文档

Google翻译的强大功能一直为很多人所津津乐道。殊不知,除了在线翻译某段文字或网页,Google还可以直接翻译Word或PDF文档!也就是说,当你输入 Word或PDF文档的URL地址,再点击“翻...
  • johennes
  • johennes
  • 2013-10-23 10:57:25
  • 7460
收藏助手
不良信息举报
您举报文章:react-calendar文档详解+翻译
举报原因:
原因补充:

(最多只允许输入30个字)