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
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 (
<div>
<DropdownDate
startDate={ // optional, if not provided 1900-01-01 is startDate
'2012-01-01' // 'yyyy-mm-dd' format only
}
endDate={ // optional, if not provided current date is endDate
'2013-12-31' // 'yyyy-mm-dd' format only
}
selectedDate={ // optional
this.state.selectedDate // 'yyyy-mm-dd' format only
}
order={[ // optional
DropdownComponent.year, // Order of the dropdowns
DropdownComponent.day,
DropdownComponent.month
]}
onMonthChange={(month) => { // 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
}
}
/>
</div>
);
}
}
export default App;
HTML Reference for classes
<!-- dateContainer -->
<div class="classes">
<!-- yearContainer -->
<div class="classes">
<!-- year -->
<select class="classes classes">
<option value="" class="classes">select year</option>
</select>
</div>
<!-- monthContainer -->
<div class="classes">
<!-- month -->
<select class="classes classes">
<option value="" class="classes">select month</option>
</select>
</div>
<!-- dayContainer -->
<div class="classes">
<!-- day -->
<select class="classes classes">
<option value="" class="classes">select day</option>
</select>
</div>
</div>
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 (
<div>
<YearPicker
defaultValue={'select year'}
start={2010} // default is 1900
end={2020} // default is current year
reverse // default is ASCENDING
required={true} // default is false
disabled={true} // default is false
value={this.state.year} // mandatory
onChange={(year) => { // mandatory
this.setState({ year });
console.log(year);
}}
id={'year'}
name={'year'}
classes={'classes'}
optionClasses={'option classes'}
/>
<MonthPicker
defaultValue={'select month'}
numeric // to get months as numbers
short // default is full name
caps // default is Titlecase
endYearGiven // mandatory if end={} is given in YearPicker
year={this.state.year} // mandatory
required={true} // default is false
disabled={true} // default is false
value={this.state.month} // mandatory
onChange={(month) => { // mandatory
this.setState({ month });
console.log(month);
}}
id={'month'}
name={'month'}
classes={'classes'}
optionClasses={'option classes'}
/>
<DayPicker
defaultValue={'select day'}
year={this.state.year} // mandatory
month={this.state.month} // mandatory
endYearGiven // mandatory if end={} is given in YearPicker
required={true} // default is false
disabled={true} // default is false
value={this.state.day} // mandatory
onChange={(day) => { // mandatory
this.setState({ day });
console.log(day);
}}
id={'day'}
name={'day'}
classes={'classes'}
optionClasses={'option classes'}
/>
</div>
);
}
}
export default App;
