rc-picker

What is rc-picker?

The rc-picker package is a React component library for date and time picking. It provides a set of components that allow users to select dates and times in a flexible and customizable manner. It supports a variety of formats and can be easily integrated into React applications.

What are rc-picker's main functionalities?

Date Selection

This feature allows users to select a date. The DatePicker component can be used to render a date input field, and it provides an onChange event to handle the selected value.

import React from 'react';
import DatePicker from 'rc-picker';

function App() {
  return (
    <DatePicker onChange={(value) => console.log(value)} />
  );
}

export default App;

Time Selection

This feature enables users to select a time. The TimePicker component, which is part of the rc-picker library, allows for time input with an onChange event to capture the time selected by the user.

import React from 'react';
import TimePicker from 'rc-picker/lib/TimePicker';

function App() {
  return (
    <TimePicker onChange={(value) => console.log(value)} />
  );
}

export default App;

Date Range Selection

This feature is for selecting a range of dates. The RangePicker component allows users to pick a start and end date, which is useful for defining periods like reservations or event durations.

import React from 'react';
import RangePicker from 'rc-picker/lib/RangePicker';

function App() {
  return (
    <RangePicker onChange={(values) => console.log(values)} />
  );
}

export default App;

Other packages similar to rc-picker

react-datepicker

react-datepicker is a popular date picking component for React. It offers similar functionalities to rc-picker, such as date selection, date range selection, and time selection. It is highly customizable and has a large community of users.

antd

antd, or Ant Design, is a comprehensive UI design language and React UI library that includes date and time pickers as part of its component suite. While it offers similar date and time picking functionalities, it is part of a larger design system and component library.

material-ui-pickers

material-ui-pickers provides date and time picking components that integrate with Material-UI, a React UI framework that follows Material Design guidelines. It offers a different look and feel compared to rc-picker, aligning with Material Design aesthetics.

README

rc-picker

Pretty Footer react component used in ant.design.

Live Demo

https://react-component.github.io/picker/

Install

Usage

import Footer from 'rc-footer';
import 'rc-footer/assets/index.css'; // import 'rc-footer/asssets/index.less';
import { render } from 'react-dom';

render(
  <Footer
    columns={[
      {
        icon: (
          <img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" />
        ),
        title: '语雀',
        url: 'https://yuque.com',
        description: '知识创作与分享工具',
        openExternal: true,
      },
    ]}
    bottom="Made with ❤️ by AFX"
  />,
  mountNode,
);

API

Property	Type	Default	Description
prefixCls	string	rc-footer
className	string	''	additional class name of footer
style	React.CSSProperties		style properties of footer
columns	Column Array	[]	columns data inside footer
bottom	ReactNode		extra bottom area beneath footer columns
theme	'light' | 'dark'	'dark'	preset theme of footer
backgroundColor	string	'#000'	background color of footer
columnLayout	'space-around' or 'space-between'	'space-around'	justify-content value of columns element
maxColumnsPerRow	number	-	max count of columns for each row

Column

Property	Type	Default	Description
icon	ReactNode		icon that before column title
title	ReactNode		title of column
items	Item Array	[]	items data inside each column
className	string	''	additional class name of footer
style	React.CSSProperties		style properties of footer

Column Item

Property	Type	Default	Description
icon	ReactNode		icon that before column title
title	ReactNode		title of column
description	ReactNode		description of column, come after title
url	string		link url of item title
openExternal	boolean	false	link target would be _blank if openExternal is ture
className	string	''	additional class name of footer
style	React.CSSProperties		style properties of footer
LinkComponent	React.ReactType	'a'	the link element to render item

Development

npm install
npm start

License

rc-picker is released under the MIT license.