Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-day-picker
Advanced tools
The react-day-picker package is a flexible date picker component for React applications. It allows users to select dates or ranges of dates within a calendar interface. It is customizable and can be used to create various date-picking experiences in web applications.
Single Date Selection
This feature allows users to select a single date from the calendar. The 'onDayClick' event handler updates the state with the selected date.
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
function MyDatePicker() {
const [selectedDay, setSelectedDay] = useState();
return (
<DayPicker
selectedDays={selectedDay}
onDayClick={(day) => setSelectedDay(day)}
/>
);
}
Range Selection
This feature enables users to select a range of dates. The 'DateUtils.addDayToRange' function is used to update the range state.
import DayPicker, { DateUtils } from 'react-day-picker';
import 'react-day-picker/lib/style.css';
function MyDateRangePicker() {
const [range, setRange] = useState({ from: undefined, to: undefined });
const handleDayClick = (day) => {
const range = DateUtils.addDayToRange(day, this.state.range);
setRange(range);
};
return (
<DayPicker
selectedDays={[range.from, { from: range.from, to: range.to }]}
onDayClick={handleDayClick}
/>
);
}
Customization
This feature allows for extensive customization of the calendar's appearance and behavior, including custom class names and replacing default components with custom ones.
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
function MyStyledDatePicker() {
return (
<DayPicker
className='my-custom-class'
weekdayElement={<div>Custom Weekday</div>}
navbarElement={<div>Custom Navbar</div>}
/>
);
}
react-datepicker is a comprehensive date picker library for React. It offers similar functionalities to react-day-picker, such as single date selection, range selection, and customization options. It also provides additional features like time selection and predefined date ranges.
material-ui-pickers is a set of components that implement Material Design pickers for date and time in React. It integrates well with Material-UI and offers a different look and feel compared to react-day-picker, with similar functionality for date selection.
antd, or Ant Design, is a UI design language and React UI library that includes a DatePicker component. It offers a wide range of features and is designed to work within the Ant Design system, providing a different user experience compared to react-day-picker.
Customizable date picker and calendar component for React.js. See docs and examples.
š Go to the website for examples with code, API and tips
If you need support, drop a line in the gitter room or check the issues. Release notes are here.
npm install react-day-picker --save
import React from "react";
import DayPicker from "react-day-picker";
function myComponent() {
return (
<div>
<DayPicker initialMonth={ new Date(2015, 10) } />
</div>
)
}
Create your own CSS starting from style.css. For testing, you can also import it from react-day-picker/lib/style.css
.
npm run test
or npm run test:watch
to run the unit tests.npm run cover
for a test coverage report.npm run lint
cd site && npm install && npm start
, then visit localhost:3000
npm install
before running it!v1.1.0
Release Date: 2015-11-06
New features
fromMonth
and toMonth
props. Use the
fromMonth
and
toMonth
props to restrict the months within which the calendar can work. See
this example.dateUtils
includes some useful function to set custom modifierslocaleUtils
are the default functions used to localize the Day Picker in
english. See
https://github.com/gpbl/react-day-picker/issues/46#issuecomment-153498039 for
a sample usage of this library.FAQs
Customizable Date Picker for React
The npm package react-day-picker receives a total of 1,466,197 weekly downloads. As such, react-day-picker popularity was classified as popular.
We found that react-day-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Ā It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.