Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
react-date-picker
Advanced tools
The react-date-picker package is a flexible and customizable date picker component for React applications. It allows users to select dates from a calendar interface and provides various customization options to fit different use cases.
Basic Date Picker
This code demonstrates a basic usage of the react-date-picker component. It initializes a date state and renders a DatePicker component that allows the user to select a date.
import React, { useState } from 'react';
import DatePicker from 'react-date-picker';
function MyApp() {
const [date, setDate] = useState(new Date());
return (
<div>
<DatePicker
onChange={setDate}
value={date}
/>
</div>
);
}
export default MyApp;
Date Range Picker
This code demonstrates how to use react-date-picker to select a date range by using two DatePicker components, one for the start date and one for the end date.
import React, { useState } from 'react';
import DatePicker from 'react-date-picker';
function MyApp() {
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
return (
<div>
<DatePicker
onChange={setStartDate}
value={startDate}
/>
<DatePicker
onChange={setEndDate}
value={endDate}
/>
</div>
);
}
export default MyApp;
Custom Date Format
This code demonstrates how to customize the date format displayed in the react-date-picker component. The 'format' prop is used to specify the desired date format.
import React, { useState } from 'react';
import DatePicker from 'react-date-picker';
function MyApp() {
const [date, setDate] = useState(new Date());
return (
<div>
<DatePicker
onChange={setDate}
value={date}
format="y-MM-dd"
/>
</div>
);
}
export default MyApp;
Disable Specific Dates
This code demonstrates how to disable specific dates in the react-date-picker component. The 'tileDisabled' prop is used to specify which dates should be disabled.
import React, { useState } from 'react';
import DatePicker from 'react-date-picker';
function MyApp() {
const [date, setDate] = useState(new Date());
const disableDates = [
new Date(2023, 9, 10),
new Date(2023, 9, 15)
];
return (
<div>
<DatePicker
onChange={setDate}
value={date}
tileDisabled={({ date }) => disableDates.some(disabledDate => date.getTime() === disabledDate.getTime())}
/>
</div>
);
}
export default MyApp;
react-datepicker is another popular date picker component for React. It offers a wide range of features including date and time selection, custom date formats, and localization support. Compared to react-date-picker, react-datepicker provides more advanced features such as time selection and inline display.
react-dates is a date picker component developed by Airbnb. It is highly customizable and supports date ranges, single date selection, and internationalization. It is known for its accessibility and mobile-friendly design. Compared to react-date-picker, react-dates offers more comprehensive support for date ranges and better accessibility features.
rc-calendar is a date picker component from the rc-components library. It provides a flexible and customizable calendar interface with support for date and time selection. Compared to react-date-picker, rc-calendar offers more customization options and supports both date and time selection.
A carefully crafted date picker for React
See demo at jslog.com/react-date-picker
$ npm install react-date-picker
See changelog
Don't forget to include index.css or index.styl! ( require('react-date-picker/index.css') )
If you use the files from the dist
directory, (eg: dist/react-date-picker.js
), you will need to make sure you have both React
and moment
global variables, so make sure you include ReactJS and MomentJS
The preferred React version for react-date-picker
is >=0.12. The initial version of react-date-picker
worked with React 0.11.2 as well, but I do not intend to continue to support it, in order to be able to focus on advancing the current features and developing other high-quality React components.
var date = '2014-10-10' //or Date.now()
function onChange(dateString, moment){
//...
}
<DatePicker
minDate='2014-04-04'
maxDate='2015-10-10'
date={date}
onChange={onChange}
/>
For rendering the date picker with a custom locale, there are two options
The first option is to simply require the appropriate momentjs locale before require
-ing react-date-picker
Example:
//make sure you require this first!
var nl = require('moment/locale/nl')
//and then require the date picker - it will use
//the locale you previously required
var DatePicker = require('react-date-picker')
The second option is specifying the locale
prop on the date picker. This assumes you have momentjs with the locale already into page (for example, you are using moment-with-locales.js
)
<DatePicker locale="fr" />
weekDayNames
- either an array of week day names, or a function that returns an array. In case you specify weekDayNames
as an array, it should have Sunday as the first day. If not specified, will be built with momentjs
using moment.weekdaysShort()
weekStartDay
: Number - Sun 0, Monday 1, etc... If not specified, the locale specific value will be used.locale
: StringhideFooter: Boolean - by default footer is shown, so specify this to true if you don't want the footer
date : Date / String / Moment / Number
minDate
: Date / String / Moment / Number
maxDate
: Date / String / Moment / Number
dateFormat
: String see moment.js formats. Default date format is 'YYYY-MM-DD'
onChange
: Function(dateText, moment, event) - called when the user selects a date
onSelect
: Function(dateText, moment, view) - called when the user selects a year/month
onNav
: Function(dateText, moment, view, direction) - called when the user navigates to the next/previous month/year/decade.
renderDay
: Function - (optional) A function that should return a React DOM for the day cell. The first param is the props object. You can use this to have full control over what gets rendered for a day.
onRenderDay
: Function - (optional) A function that can manipulate the props object for a day, and SHOULD return a new props object. Use this for custom day styling. You can use this to take full control over the styles/css classes/attributes applied to the day cell in the month view.
dayFormat
- The format in which days should be rendered (on the MonthView)monthFormat
- The format in which months should be rendered (on the YearView)yearFormat
- The format in which years should be rendered (on the DecadeView)defaultViewDate
: Date / String / Moment / Number - a date for the period to show in the picker. If none specified, defaults to date
or to the current date.
viewDate
: Date / String / Moment / Number - controlled version for defaultViewDate
onViewDateChange
: Function(dateText, moment , view) - called when navigating to another viewDate.
defaultView
: String - the view to render initially in the datepicker - if no defaultView is specified, the "month" view is rendered. Possible values: "month", "year", "decade".
view
: String - controlled version for defaultView
.
onViewChange
: Function - function called when the view is changed. If using the controlled view
version, make sure you update the view
prop in this function if you want to navigate to another view as expected.
navOnDateClick
: Boolean - defaults to true. If false, will not navigate to the date that was clicked, even if that date is in the prev/next month
function onRenderDay(props){
if (props.date.isBefore('2010-01-01')){
props.className += ' invalid'
}
props.style.border = '1px solid red'
return props
}
<DatePicker
onChange={this.onChange}
onRenderDay={onRenderDay}
/>
When contributing, please work on the src
dir.
You'll need to run the following commands:
$ npm run serve # starts a local http server
$ npm run dev # starts webpack-dev-server, which does all the bundling and live reloading
Now navigate to http://localhost:8080/
.
With this setup, you have an environment which live-reloads all your changes, so you have a rapid development cycle.
In order to build a new production version, make sure you run npm run build
(it builds the lib
directory from the src
directory, it concats all files and builds the dist
directory, and also prepares the css files)
react-date-picker
uses the awesome moment.js
library ( Big thanks!)
If you don't use npm you can include any of the following:
dist/react-date-picker.js
- the full sources. NOTE: You'll need to include React
separatelydist/react-date-picker.min.js
- minified & optimized version. NOTE: You'll need to include React
separatelydist/react-date-picker.nomoment.js
- the full sources. NOTE: You'll need to include React
AND moment.js
separatelydist/react-date-picker.nomoment.min.js
- minified & optimized version. NOTE: You'll need to include React
AND moment.js
separatelyMIT
FAQs
A date picker for your React app.
The npm package react-date-picker receives a total of 208,430 weekly downloads. As such, react-date-picker popularity was classified as popular.
We found that react-date-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.