rc-calendar使用简介

最新推荐文章于 2024-08-13 08:20:55 发布

SB的二狗

最新推荐文章于 2024-08-13 08:20:55 发布

阅读量7.6k

点赞数

分类专栏： react 文章标签： rc-calendar react

本文链接：https://blog.csdn.net/pkpk20044/article/details/60765538

版权

本文将介绍如何使用rc-calendar，一个由淘宝团队开发的React日期组件。通过几个简单步骤，包括安装依赖、引入组件到页面以及实际编码，你可以实现强大的日期选择功能。

摘要由CSDN通过智能技术生成

今天介绍一个比较好用的react日期控件rc-calendar(貌似是某宝制作的react日期控件)

rc-calendar的github网址：https://github.com/react-component/calendar

rc-calendar的部分功能如下图所示：

那么，就让我们一步步实现上图中日期控件以及相关功能

第一步：安装rc-calendar

在package.json中加入如下依赖，然后执行npm install

第二步：在页面中加入rc-calendar依赖

1.创建文件calendar.jsx

2.加入rc-calendar组件依赖

var React=require('react');
var Link= require('react-router').Link;
var IndexLink=require('react-router').IndexLink;
var Calendar =require('rc-calendar');
var TimePickerPanel=require('rc-time-picker/lib/Panel');
var DatePicker=require('rc-calendar/lib/Picker');
var zhCN=require('rc-calendar/lib/locale/zh_CN');
import moment from 'moment';
require('moment/locale/zh-cn');

3.加入rc-calendar样式依赖，