react-calendar文档详解+翻译

 

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;