Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
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.
DayPicker is a React component for creating date pickers, calendars, and date inputs for web applications.
📖 See daypicker.dev for guides, examples and API reference.
DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies on date-fns for date manipulation and formatting.
npm install react-day-picker
import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";
function MyDatePicker() {
const [selected, setSelected] = useState<Date>();
return (
<DayPicker
mode="single"
selected={selected}
onSelect={setSelected}
footer={
selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day."
}
/>
);
}
DayPicker is compatible with React 16.8 and later.
DayPicker is released under the MIT License.
Ask for help and share your experience with DayPicker:
Consider supporting DayPicker's maintainer with a donation. Your support helps keep the project alive and up-to-date.
FAQs
Customizable Date Picker for React
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.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.