必备的前15个免费最佳React日期选择器组件
2021年11月28日08:20:06 发表评论 621 次浏览
<iframe data-google-container-id=”a!3″ data-google-query-id=”CLHa_JTEnPcCFUKylgodHboEAw” data-load-complete=”true” frameborder=”0″ height=”98″ id=”aswift_2″ marginheight=”0″ marginwidth=”0″ name=”aswift_2″ scrolling=”no” src=”https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5520426928387543&output=html&h=98&slotname=4873662316&adk=561446464&adf=1124467234&pi=t.ma~as.4873662316&w=728&lmt=1650247818&psa=1&format=728×98&url=https%3A%2F%2Fwww.lsbin.com%2F13349.html&wgl=1&uach=WyJtYWNPUyIsIjEyLjMuMSIsIng4NiIsIiIsIjEwMC4wLjQ4OTYuODgiLFtdLG51bGwsbnVsbCwiNjQiLFtbIiBOb3QgQTtCcmFuZCIsIjk5LjAuMC4wIl0sWyJDaHJvbWl1bSIsIjEwMC4wLjQ4OTYuODgiXSxbIkdvb2dsZSBDaHJvbWUiLCIxMDAuMC40ODk2Ljg4Il1dLGZhbHNlXQ..&tt_state=W3siaXNzdWVyT3JpZ2luIjoiaHR0cHM6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbSIsInN0YXRlIjoyMCwiaGFzUmVkZW1wdGlvblJlY29yZCI6dHJ1ZX1d&dt=1650247818039&bpp=2&bdt=1325&idt=178&shv=r20220413&mjsv=m202204060102&ptt=9&saldr=aa&abxe=1&cookie=ID%3D5c7583484108e914-226d0f5bf4d1004a%3AT%3D1650019752%3ART%3D1650019752%3AS%3DALNI_MYMbWD1Fx9mz40oS1JmIIuZ8Lta6w&prev_fmts=0x0%2C1080x136&nras=1&correlator=5287452724219&frm=20&pv=1&ga_vid=296990529.1650247818&ga_sid=1650247818&ga_hid=314718358&ga_fc=0&u_tz=480&u_his=5&u_h=900&u_w=1440&u_ah=793&u_aw=1440&u_cd=30&u_sd=2&dmc=8&adx=183&ady=442&biw=1425&bih=714&scr_x=0&scr_y=0&eid=44759876%2C44759927%2C44759842%2C44760333%2C31061829%2C21067496%2C31064019&oid=2&pvsid=3243940871806174&pem=743&tmod=887583237&uas=0&nvt=3&ref=https%3A%2F%2Fwww.google.com%2F&eae=0&fc=1920&brdim=0%2C25%2C0%2C25%2C1440%2C25%2C1440%2C793%2C1440%2C714&vis=2&rsz=%7C%7CoeEr%7C&abl=CS&pfx=0&fu=0&bc=31&ifi=3&uci=a!3&fsb=1&xpc=WulnzQbXrO&p=https%3A//www.lsbin.com&dtd=183″ width=”728″></iframe>
React日期选择器组件有哪些？你想在下一个项目中使用最好的 React Date Picker 组件吗？你来对地方了。他们就在路上！在这篇博文中，我为 React 项目精心挑选了前 15 个免费的最佳 React 日期选择器。但首先，让我们快速了解一下 最佳React日期选择器组件合集的全部内容。
React日期选择器
日期选择器，也被称为一个弹出的日历，日期和时间选择器，或时间选择器，是一个图形用户接口小窗口，其允许用户选择从日历和/或从一个时间范围内的时间的日期。因此，React datepicker 组件也做同样的工作。React Datepicker 组件是一种基于 React.js 的特殊用户界面组件。
这些简单的可重用组件已经成为 React 最流行的库。
注意：在为你的项目选择日期选择器之前，请仔细查看演示、规格和要求。最好通过 Github 存储库进行详细检查。不同的 React 日期选择器支持不同类型的工作。因此，请仔细检查先决条件是否与你的系统完全匹配，或者，如有必要，请先安装它们。
React Datepickers 有什么好处？
最好的日期选择器组件是 React Datepicker 组件。这些点说明了原因。
- 用户只需使用鼠标即可设置或选择日期。
- 无需写下日期。
- 优秀的社区支持。
- 极快。
- 可重复使用的组件。
- 简单而现代的外观。
- 易于设置。
- 轻的。
以及许多其他方面使 React.js Datepicker 组件成为最好的组件之一。
最佳React日期选择器组件合集
哪个React日期选择器组件最好？下面是详细的介绍。注意：下面的列表没有特定的顺序。
1. Wojtekmaj / React Date Picker
React日期选择器组件有哪些
主要特点
- 日期选择器
- 时间选择器
- 日期时间范围选择器
- 时间范围选择器
- 日期范围选择器
- 日期时间选择器
- 日历
- 时钟
- 可定制
- 轻量级库
<iframe data-google-container-id=”a!4″ data-google-query-id=”CMKAlJ3GnPcCFRrSlgodCB8Caw” data-load-complete=”true” frameborder=”0″ height=”0″ id=”aswift_3″ marginheight=”0″ marginwidth=”0″ name=”aswift_3″ scrolling=”no” src=”https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5520426928387543&output=html&h=187&slotname=1271605795&adk=786259738&adf=3274657232&pi=t.ma~as.1271605795&w=747&fwrn=4&lmt=1650248365&rafmt=11&psa=1&format=747×187&url=https%3A%2F%2Fwww.lsbin.com%2F13349.html&wgl=1&uach=WyJtYWNPUyIsIjEyLjMuMSIsIng4NiIsIiIsIjEwMC4wLjQ4OTYuODgiLFtdLG51bGwsbnVsbCwiNjQiLFtbIiBOb3QgQTtCcmFuZCIsIjk5LjAuMC4wIl0sWyJDaHJvbWl1bSIsIjEwMC4wLjQ4OTYuODgiXSxbIkdvb2dsZSBDaHJvbWUiLCIxMDAuMC40ODk2Ljg4Il1dLGZhbHNlXQ..&tt_state=W3siaXNzdWVyT3JpZ2luIjoiaHR0cHM6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbSIsInN0YXRlIjoyOSwiaGFzUmVkZW1wdGlvblJlY29yZCI6dHJ1ZX1d&dt=1650247818041&bpp=2&bdt=7774&idt=185&shv=r20220413&mjsv=m202204060102&ptt=9&saldr=aa&abxe=1&cookie=ID%3D5c7583484108e914-226d0f5bf4d1004a%3AT%3D1650019752%3ART%3D1650019752%3AS%3DALNI_MYMbWD1Fx9mz40oS1JmIIuZ8Lta6w&prev_fmts=0x0%2C1080x136%2C728x98%2C1425x714%2C320x600&nras=2&correlator=5287452724219&frm=20&pv=1&ga_vid=296990529.1650247818&ga_sid=1650247818&ga_hid=314718358&ga_fc=0&rplot=4&u_tz=480&u_his=5&u_h=900&u_w=1440&u_ah=793&u_aw=1440&u_cd=30&u_sd=2&dmc=8&adx=174&ady=2185&biw=1425&bih=714&scr_x=0&scr_y=0&eid=44759876%2C44759927%2C44759842%2C44760333%2C31061829%2C21067496%2C31064019&oid=2&pvsid=3243940871806174&pem=743&tmod=887583237&uas=0&nvt=3&ref=https%3A%2F%2Fwww.google.com%2F&eae=0&fc=1920&brdim=0%2C25%2C0%2C25%2C1440%2C25%2C1440%2C793%2C1440%2C714&vis=1&rsz=%7C%7CeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=4&uci=a!4&btvi=1&fsb=1&xpc=ZAzki6IxxL&p=https%3A//www.lsbin.com&dtd=M” width=”747″></iframe>
安装命令
npm install react-date-picker --save代码片段
import React, { useState } from 'react';
import DatePicker from 'react-date-picker';
export default function MyDatePicker() {
const [value, updateValue] = useState(new Date());
const onChange = (date) => {
updateValue(date);
}
return (
<div>
<DatePicker
onChange={onChange}
value={value}
/>
</div>
);
}2.React day picker
React日期选择器组件有哪些
主要特点
- 简单的图书馆
- 易于定制
- 可本地化
- 广泛的示例列表
- 原生 TypeScript 支持
- 日期选择器
- 唱腔支持
安装命令
npm install react-day-picker --save代码片段
import React, { useState } from "react";
import DayPickerInput from "react-day-picker/DayPickerInput";
import "react-day-picker/lib/style.css";
export default function ReactDayPicker() {
const [date, setDate] = useState(new Date());
function onChange(date) {
setDate(date);
}
return <DayPickerInput onDayChange={onChange} />;
}3. Material UI 日期/时间选择器
最佳React日期选择器组件合集
主要特点
- 遵循 Material UI 设计
- 支持 4 种不同的日期库（date-fns、Day.js、Luxon、Moment.js）
- 日期选择器
- 时间选择器
- 日期时间选择器
- 日期范围选择器
- 可本地化
安装命令
Core Material UI 库：
npm install @material-ui/core date-fns @date-io/date-fns@^1.3.13 @material-ui/pickers --save代码 片段
import React, { useState } from 'react';
import DateFnsUtils from '@date-io/date-fns';
import {
MuiPickersUtilsProvider,
KeyboardDatePicker,
} from '@material-ui/pickers';
export default function MaterialDatePicker() {
const [selectedDate, setSelectedDate] = useState(new Date());
const handleDateChange = (date) => {
setSelectedDate(date);
};
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date picker inline"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</MuiPickersUtilsProvider>
);
}4.Carbon Design System DatePicker
主要特点
- 日期选择器
- IBM 的开源设计系统
- 支持 React、Vue、Angular、Svelte、Vanilla JS
- 通过使用flatpickr 选项完全可定制。
- 便于使用
安装命令
npm install carbon-components carbon-components-react carbon-icons --save代码片段
import React from 'react';
import { DatePickerInput } from 'carbon-components-react';
export default function CarbonDatePicker() {
return (
<DatePickerInput
placeholder="mm/dd/yyyy"
labelText="Date Picker label"
id="date-picker-single"
onChange={date => {
console.log(date);
}}
/>
</DatePicker>
);
}5. Airbnb React Dates
React日期选择器组件有哪些
主要特点
- 移动友好
- 可本地化
- 日期选择器
- 日期范围选择器
安装命令
npm install react-dates --save代码片段
import React, { useState } from "react";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { SingleDatePicker } from "react-dates";
export default function ReactdatesDatepicker() {
const [date, setDate] = useState(null);
const [isFocused, setIsFocused] = useState(false);
function onDateChange(date) {
setDate(date);
}
function onFocusChange({ focused }) {
setIsFocused(focused);
}
return (
<SingleDatePicker
id="date_input"
date={date}
focused={isFocused}
onDateChange={onDateChange}
onFocusChange={onFocusChange}
/>
);
}6. React Datepicker
主要特点
- 可重复使用的
- 便于使用
- 简单的设计
- 用于本地化的 date-fns
- 日期选择器
安装命令
npm install react-datepicker --save代码片段
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function HackeroneDatepicker() {
const [date, setDate] = useState(new Date());
function onChange(date) {
setDate(date);
}
return <DatePicker selected={date} onChange={onChange} />;
}7. React Rainbow 组件日期选择器
注意： React Rainbow 是一个 UI 组件库。你必须采用整个库才能使用它。
主要特点
- 日期选择器
- 日期时间选择器
- 日期选择器模式
- 简单的设计
- 支持深色模式
- 可定制
安装命令
npm install react-rainbow-components --save代码片段
import React, { useState } from "react";
import { DatePicker } from "react-rainbow-components";
export default function RainbowDatepicker() {
const [date, setDate] = useState(null);
function onChange(date) {
setDate(date);
}
return (
<DatePicker
id="datePicker-1"
value={date}
onChange={onChange}
label="DatePicker Label"
formatStyle="large"
/>
);
}8. Ant Design DatePicker
哪个React日期选择器组件最好
主要特点
- 日期选择器
- 时间选择器
- 日期时间选择器
- 日期范围选择器
- 提供 UI 组件库
- 可本地化
- 打字稿支持
- 可定制
- 遵循 Ant 设计规范
- 简约设计
- 更好的用户体验
安装命令
npm install antd --save代码片段
import React, { useState } from "react";
import { DatePicker } from "antd";
import "antd/dist/antd.css";
export default function AntDatepicker() {
const [date, setDate] = useState(new Date());
function onChange(date, dateString) {
setDate(date);
}
return <DatePicker onChange={onChange} />;
}9. Hypeserver / React Date Range
主要特点
- 日历输入
- 日期范围选择器
- 高度可定制
- 单击并按住选择
安装命令
npm install react-date-range date-fns --save代码片段
import React, { useState } from "react";
import { Calendar } from "react-date-range";
import "react-date-range/dist/styles.css";
import "react-date-range/dist/theme/default.css";
export default function HypeserverDatepicker() {
const [date, setDate] = useState(new Date());
function onChange(date) {
setDate(date);
}
return <Calendar date={date} onChange={onChange} />;
}10. RC Datepicker
React日期选择器组件有哪些
主要特点
- 体面的设计
- 日期选择器
- 易于设置
- 可定制
安装命令
npm install --save rc-datepicker代码片段
import React from 'react';
// Import Datepicker
import { DatePicker, DatePickerInput } from 'rc-datepicker';
// Import the default style
import 'rc-datepicker/lib/style.css';
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
// Initial state with date
this.state = {
// or Date or Moment.js
selectedDate: '2017-08-13'
};
// This binding is necessary to make `this` work in the callback
this.onChange = this.onChange.bind(this);
}
onChange(date) {
this.setState({
selectedDate: date
});
}
render() {
return (
<div>
<DatePickerInput
onChange={this.onChange}
value={this.state.selectedDate}
className='my-custom-datepicker-component'
/>
{/* this renders only a fixed datepicker */}
<DatePicker onChange={this.onChange} value={this.state.selectedDate} />
</div>
);
}
}11.React Datepicker CS
最佳React日期选择器组件合集
主要特点
- 简化的日期选择器
- 安装简单
- 多语言支持
- 只有 5 个属性
安装命令
npm install react-date-picker-cs --save代码片段
import React from 'react';
// Import Datepicker
import ReactDatePicker from 'react-date-picker-cs';
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
// Initial state with date
this.state = {
selectedDate: '2017-08-13'
};
// This binding is necessary to make `this` work in the callback
this.handleLog = this.handleLog.bind(this);
}
handleLog(date) {
this.setState({
selectedDate: date
});
}
render() {
return (
<div>
<ReactDatePicker
onChange={this.handleLog}
range={[2013, 2020]}
value={this.state.selectedDate}
disabled={true}
/>
</div>
);
}
}12. Input Moment
最佳React日期选择器组件合集
<iframe data-google-container-id=”a!5″ data-google-query-id=”CLOs1KvGnPcCFWXJFgUdkF4Ieg” data-load-complete=”true” frameborder=”0″ height=”0″ id=”aswift_4″ marginheight=”0″ marginwidth=”0″ name=”aswift_4″ scrolling=”no” src=”https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5520426928387543&output=html&h=187&slotname=6512517709&adk=3776125500&adf=1424411011&pi=t.ma~as.6512517709&w=747&fwrn=4&lmt=1650248396&rafmt=11&psa=1&format=747×187&url=https%3A%2F%2Fwww.lsbin.com%2F13349.html&wgl=1&uach=WyJtYWNPUyIsIjEyLjMuMSIsIng4NiIsIiIsIjEwMC4wLjQ4OTYuODgiLFtdLG51bGwsbnVsbCwiNjQiLFtbIiBOb3QgQTtCcmFuZCIsIjk5LjAuMC4wIl0sWyJDaHJvbWl1bSIsIjEwMC4wLjQ4OTYuODgiXSxbIkdvb2dsZSBDaHJvbWUiLCIxMDAuMC40ODk2Ljg4Il1dLGZhbHNlXQ..&tt_state=W3siaXNzdWVyT3JpZ2luIjoiaHR0cHM6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbSIsInN0YXRlIjoyOSwiaGFzUmVkZW1wdGlvblJlY29yZCI6dHJ1ZX1d&dt=1650247818043&bpp=2&bdt=7777&idt=185&shv=r20220413&mjsv=m202204060102&ptt=9&saldr=aa&abxe=1&cookie=ID%3D5c7583484108e914-226d0f5bf4d1004a%3AT%3D1650019752%3ART%3D1650019752%3AS%3DALNI_MYMbWD1Fx9mz40oS1JmIIuZ8Lta6w&prev_fmts=0x0%2C1080x136%2C728x98%2C1425x714%2C320x600%2C747x187%2C728x90%2C320x600&nras=3&correlator=5287452724219&frm=20&pv=1&ga_vid=296990529.1650247818&ga_sid=1650247818&ga_hid=314718358&ga_fc=0&rplot=4&u_tz=480&u_his=5&u_h=900&u_w=1440&u_ah=793&u_aw=1440&u_cd=30&u_sd=2&dmc=8&adx=174&ady=19474&biw=1425&bih=714&scr_x=0&scr_y=16635&eid=44759876%2C44759927%2C44759842%2C44760333%2C31061829%2C21067496%2C31064019&oid=2&pvsid=3243940871806174&pem=743&tmod=887583237&uas=1&nvt=3&ref=https%3A%2F%2Fwww.google.com%2F&eae=0&fc=1920&brdim=0%2C25%2C0%2C25%2C1440%2C25%2C1440%2C793%2C1440%2C714&vis=1&rsz=%7C%7CeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=5&uci=a!5&btvi=4&fsb=1&xpc=0635aEPtyF&p=https%3A//www.lsbin.com&dtd=M” width=”747″></iframe>
注意：此模块需要 Moment.js 作为 peerDependency。
主要特点
- 日期时间选择器
- 来自 Ionicons 的图标
- 由 Moment.js 提供支持
- 国际学习中心执照
- 易于安装
安装命令
npm i input-moment --save代码片段
<iframe data-google-container-id=”a!6″ data-google-query-id=”CMqG5avGnPcCFYm8lgod9pgAGw” data-load-complete=”true” frameborder=”0″ height=”0″ id=”aswift_5″ marginheight=”0″ marginwidth=”0″ name=”aswift_5″ scrolling=”no” src=”https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5520426928387543&output=html&h=187&slotname=7645442457&adk=1614333015&adf=3389954585&pi=t.ma~as.7645442457&w=747&fwrn=4&lmt=1650248396&rafmt=11&psa=1&format=747×187&url=https%3A%2F%2Fwww.lsbin.com%2F13349.html&wgl=1&uach=WyJtYWNPUyIsIjEyLjMuMSIsIng4NiIsIiIsIjEwMC4wLjQ4OTYuODgiLFtdLG51bGwsbnVsbCwiNjQiLFtbIiBOb3QgQTtCcmFuZCIsIjk5LjAuMC4wIl0sWyJDaHJvbWl1bSIsIjEwMC4wLjQ4OTYuODgiXSxbIkdvb2dsZSBDaHJvbWUiLCIxMDAuMC40ODk2Ljg4Il1dLGZhbHNlXQ..&tt_state=W3siaXNzdWVyT3JpZ2luIjoiaHR0cHM6Ly9wYWdlYWQyLmdvb2dsZXN5bmRpY2F0aW9uLmNvbSIsInN0YXRlIjoyOSwiaGFzUmVkZW1wdGlvblJlY29yZCI6dHJ1ZX1d&dt=1650247818045&bpp=1&bdt=7779&idt=532&shv=r20220413&mjsv=m202204060102&ptt=9&saldr=aa&abxe=1&cookie=ID%3D5c7583484108e914-226d0f5bf4d1004a%3AT%3D1650019752%3ART%3D1650019752%3AS%3DALNI_MYMbWD1Fx9mz40oS1JmIIuZ8Lta6w&prev_fmts=0x0%2C1080x136%2C728x98%2C1425x714%2C320x600%2C747x187%2C728x90%2C320x600%2C747x187&nras=3&correlator=5287452724219&frm=20&pv=1&ga_vid=296990529.1650247818&ga_sid=1650247818&ga_hid=314718358&ga_fc=0&rplot=4&u_tz=480&u_his=5&u_h=900&u_w=1440&u_ah=793&u_aw=1440&u_cd=30&u_sd=2&dmc=8&adx=174&ady=19961&biw=1425&bih=714&scr_x=0&scr_y=17120&eid=44759876%2C44759927%2C44759842%2C44760333%2C31061829%2C21067496%2C31064019&oid=2&pvsid=3243940871806174&pem=743&tmod=887583237&uas=1&nvt=3&ref=https%3A%2F%2Fwww.google.com%2F&eae=0&fc=1920&brdim=0%2C25%2C0%2C25%2C1440%2C25%2C1440%2C793%2C1440%2C714&vis=1&rsz=%7C%7CeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=6&uci=a!6&btvi=5&fsb=1&xpc=DH7g5tvCGp&p=https%3A//www.lsbin.com&dtd=M” width=”747″></iframe>
import '../src/less/input-moment.less';
import './app.less';
import moment from 'moment';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import InputMoment from '../src/input-moment';
import packageJson from '../package.json';
class App extends Component {
state = {
m: moment()
};
handleChange = m => {
this.setState({ m });
};
handleSave = () => {
console.log('saved', this.state.m.format('llll'));
};
render() {
return (
<div className="app">
<h1>
{packageJson.name}: {packageJson.version}
</h1>
<h2>{packageJson.description}</h2>
<form>
<div className="input">
<input type="text" value={this.state.m.format('llll')} readOnly />
</div>
<InputMoment
moment={this.state.m}
onChange={this.handleChange}
minStep={5}
onSave={this.handleSave}
/>
</form>
</div>
);
}
}13. React Bootstrap 日期选择器
注意：为此，你必须导入 Bootstrap 主题。
主要特点
- 基于 Bootstrap
- 极简设计
- 日期选择器
- 可定制
安装命令
npm install react-bootstrap-date-picker代码片段
import React from 'react';
// Import Datepicker
import DatePicker from "react-bootstrap-date-picker";
// Import Bootstrap components
import FormGroup from 'react-bootstrap/lib/FormGroup';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
import HelpBlock from 'react-bootstrap/lib/HelpBlock';
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
// Initial state with date
this.state = {
selectedDate: new Date().toISOString()
};
// This binding is necessary to make `this` work in the callback
this.onChange = this.onChange.bind(this);
}
onChange(value, formattedValue) {
this.setState({
value: value, // ISO String, ex: "2016-11-19T12:00:00.000Z"
formattedValue: formattedValue // Formatted String, ex: "11/19/2016"
});
}
componentDidUpdate() {
// Access ISO String and formatted values from the DOM.
var hiddenInputElement = document.getElementById("example-datepicker");
console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z"
console.log(hiddenInputElement.getAttribute('data-formattedvalue')) // Formatted String, ex: "11/19/2016"
}
render() {
return (
<div>
<FormGroup>
<ControlLabel>Label</ControlLabel>
<DatePicker id="example-datepicker" value={this.state.selectedDate} onChange={this.onChange} />
<HelpBlock>Help</HelpBlock>
</FormGroup>
</div>
);
}
}14.React Infinite Calendar
哪个React日期选择器组件最好
主要特点
- 无限滚动
- 灵活性
- 可本地化
- 可定制
- 日期选择器
- 可扩展
- 移动友好
- 键盘支持
- 事件和回电
- 主题
安装命令
npm install react-infinite-calendar --save用法
import React from 'react';
import { render } from 'react-dom';
import InfiniteCalendar from 'react-infinite-calendar';
import 'react-infinite-calendar/styles.css'; // only needs to be imported once
// Render the Calendar
var today = new Date();
var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
render(
<InfiniteCalendar
width={400}
height={600}
selected={today}
disabledDays={[0,6]}
minDate={lastWeek}
/>,
document.getElementById('root')
);15. React Input Calendar
主要特点
- 简单组件
- 用 CSS 编写的所有系统
- 日期输入日历
- 极简设计
- 易于安装
安装命令
npm install react-input-calendar用法
import Calendar from 'react-input-calendar'
<Calendar format='DD/MM/YYYY' date='4-12-2014' />最佳React日期选择器组件合集总结
React日期选择器组件有哪些？最后，你对最好的 Vue 日期选择器的追求似乎已经结束。在这些免费的 React.js 日期选择器中进行选择是一项具有挑战性的挑战。但是，如果你坚持自己的标准，你应该能够快速缩小 3 到 4 个最适合你的项目的日期选择器的范围。因此，请彻底检查这些日期选择器组件并获得积极的用户体验。感谢你与我们在一起，我们祝你一切顺利。
原创文章，作者：carmelaweatherly，如若转载，请注明出处：https://blog.ytso.com/245591.html