简介
React Day Picker是一个独立的日期选择器组件，该组件使用React创建并可供许多React应用程序使用。React-day-picker-radium是基于React Day Picker的一个npm包，它使用Radium使CSS更易于编写和维护。
在这篇文章中，我们将深入了解如何使用React Day Picker Radium包来为React应用程序实现日期选择器。
安装
我们可以使用npm直接下载react-day-picker-radium包:
npm install react-day-picker-radium --save
如何使用
我们将学习在React应用程序中使用react-day-picker-radium来实现一个基础的日历界面，包括：
- 渲染日历表
- 选择日期和显示所选日期
渲染日历表
首先，我们需要引入组件和样式：
import DayPicker from 'react-day-picker-radium'; import 'react-day-picker/lib/style.css';
然后，我们可以在组件中渲染日历表，并为其设置相关的props：
<DayPicker
initialMonth={new Date()}
selectedDays={this.state.selectedDay}
disabledDays={{before: new Date()}}
onDayClick={this.handleDayClick}
/>- initialMonth: 指定日历表显示的月份；
- selectedDays: 指定被选中日期的样式；
- disabledDays: 指定不能选择的日期；
- onDayClick: 指定某个日期被点击时触发的事件。
选择日期和显示所选日期
当我们点击日历表中的某个日期时，我们可以通过onDayClick事件来更新所选日期，并将其渲染到UI中：
handleDayClick = (day, {selected}) => {
const selectedDay = selected ? undefined : day;
this.setState({selectedDay});
}在render()函数中，我们可以渲染选择的日期：
-- -------------------- ---- -------
----- ------------- - -----------
------ -
-----
---------- - --------
------------
- ------- ----- ---------------------------------------
- ---------- ------ - ----------
------
--综合示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- --------------------------
------ ---------------------------------
----- --- ------- --------------- -
----- - -
------------ ---------
--
-------------- - ----- ----------- -- -
----- ----------- - -------- - --------- - ----
-----------------------------
--
-------- -
----- ------------- - -----------
------ -
-----
---------- - --------
----------
----------------- -------
--------------------------
---------------------- --- --------
--------------------------------
--
------------
- ------- ----- ---------------------------------------
- ---------- ------ - ----------
------
--
-
-
------ ------- ----结论
在这篇文章中，我们学习了两个基本功能，如何渲染日历表并选择日期以及如何显示所选日期。react-day-picker-radium是一个很方便的npm包，它可以帮助我们快速实现具有较高可定制性的日期选择器组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596a81e8991b448d6ef2