# react-dropdown-date Highly customizable react based date picker. Select date from Day, Month and Year dropdown ## npm ```npm i react-dropdown-date``` https://www.npmjs.com/package/react-dropdown-date ## [Demo Link](https://codesandbox.io/s/react-dropdown-date-demo-gbm2k) https://codesandbox.io/s/react-dropdown-date-demo-gbm2k ## `Date` component, with combined functionality see further below for individual components ``` import React, { Component } from 'react'; import { DropdownDate, DropdownComponent } from 'react-dropdown-date'; const formatDate = (date) => { // formats a JS date to 'yyyy-mm-dd' var d = new Date(date), month = '' + (d.getMonth() + 1), day = '' + d.getDate(), year = d.getFullYear(); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return [year, month, day].join('-'); } class App extends Component { constructor(props) { super(props); this.state = { date: null, selectedDate: '2012-11-15' }; } render() { return (

{ // optional console.log(month); }} onDayChange={(day) => { // optional console.log(day); }} onYearChange={(year) => { // optional console.log(year); }} onDateChange={(date) => { // optional console.log(date); this.setState({ date: date, selectedDate: formatDate(date) }); }} ids={ // optional { year: 'select-year', month: 'select-month', day: 'select-day' } } names={ // optional { year: 'year', month: 'month', day: 'day' } } classes={ // optional { dateContainer: 'classes', yearContainer: 'classes', monthContainer: 'classes', dayContainer: 'classes', year: 'classes classes', month: 'classes classes', day: 'classes classes', yearOptions: 'classes', monthOptions: 'classes', dayOptions: 'classes' } } defaultValues={ // optional { year: 'select year', month: 'select month', day: 'select day' } } options={ // optional { yearReverse: true, // false by default monthShort: true, // false by default monthCaps: true // false by default } } />

); } } export default App; ``` #### HTML Reference for classes ```

``` ## Individual Components: `YearPicker`, `MonthPicker`, `DayPicker` ``` import React, { Component } from 'react'; import { YearPicker, MonthPicker, DayPicker } from 'react-dropdown-date'; class App extends Component { constructor(props) { super(props); this.state = { year: null, month: null, day: null }; } render() { return (

{ // mandatory this.setState({ year }); console.log(year); }} id={'year'} name={'year'} classes={'classes'} optionClasses={'option classes'} /> { // mandatory this.setState({ month }); console.log(month); }} id={'month'} name={'month'} classes={'classes'} optionClasses={'option classes'} /> { // mandatory this.setState({ day }); console.log(day); }} id={'day'} name={'day'} classes={'classes'} optionClasses={'option classes'} />

); } } export default App; ```

	Stars	Issues	Version	Updated	Created
react-day-picker	5,743	34	8.10.1	10 days ago	9 years ago
react-dropdown-date	27	14	2.2.7	3 years ago	6 years ago
react-input-calendar	139	17	0.5.4	6 years ago	9 years ago
react-select-datepicker	20	3	2.1.2	2 years ago	5 years ago

react-day-picker vs react-dropdown-date vs react-input-calendar vs react-select-datepicker

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past