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;