react-calendar文档详解+翻译

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

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;


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页