New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-dropdown-date
Advanced tools
react-dropdown-date - npm Package Compare versions
Comparing version 2.2.1 to 2.2.2
| { | ||
| "name": "react-dropdown-date", | ||
| "version": "2.2.1", | ||
| "version": "2.2.2", | ||
| "description": "Highly customizable react based date picker. Select date from Day, Month and Year dropdown", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
325
README.md
@@ -13,98 +13,100 @@ # react-dropdown-date | ||
| import React, { Component } from 'react'; | ||
| import { DropdownDate } from 'react-dropdown-date'; | ||
| 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(); | ||
| 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; | ||
| if (month.length < 2) month = '0' + month; | ||
| if (day.length < 2) day = '0' + day; | ||
| return [year, month, day].join('-'); | ||
| return [year, month, day].join('-'); | ||
| } | ||
| class App extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { date: null, selectedDate: '2012-11-15' }; | ||
| } | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { date: null, selectedDate: '2012-11-15' }; | ||
| } | ||
| render() { | ||
| return ( | ||
| <div> | ||
| 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 | ||
| ['year', 'month', 'day'] // Order of the dropdowns | ||
| } | ||
| 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> | ||
| ); | ||
| } | ||
| <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> | ||
| ); | ||
| } | ||
| } | ||
@@ -157,89 +159,66 @@ | ||
| class App extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { year: null, month: null, day: null }; | ||
| } | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { year: null, month: null, day: null }; | ||
| } | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <YearPicker | ||
| defaultValue={'select year'} | ||
| // default is 1900 | ||
| start={2010} | ||
| // default is current year | ||
| end={2020} | ||
| // default is ASCENDING | ||
| reverse | ||
| // default is false | ||
| required={true} | ||
| // default is false | ||
| disabled={true} | ||
| // mandatory | ||
| value={this.state.year} | ||
| // mandatory | ||
| onChange={(year) => { | ||
| this.setState({ year }); | ||
| console.log(year); | ||
| }} | ||
| id={'year'} | ||
| name={'year'} | ||
| classes={'classes'} | ||
| optionClasses={'option classes'} | ||
| /> | ||
| <MonthPicker | ||
| defaultValue={'select month'} | ||
| // to get months as numbers | ||
| numeric | ||
| // default is full name | ||
| short | ||
| // default is Titlecase | ||
| caps | ||
| // mandatory if end={} is given in YearPicker | ||
| endYearGiven | ||
| // mandatory | ||
| year={this.state.year} | ||
| // default is false | ||
| required={true} | ||
| // default is false | ||
| disabled={true} | ||
| // mandatory | ||
| value={this.state.month} | ||
| // mandatory | ||
| onChange={(month) => { | ||
| this.setState({ month }); | ||
| console.log(month); | ||
| }} | ||
| id={'month'} | ||
| name={'month'} | ||
| classes={'classes'} | ||
| optionClasses={'option classes'} | ||
| /> | ||
| <DayPicker | ||
| defaultValue={'select day'} | ||
| // mandatory | ||
| year={this.state.year} | ||
| // mandatory | ||
| month={this.state.month} | ||
| // mandatory if end={} is given in YearPicker | ||
| endYearGiven | ||
| // default is false | ||
| required={true} | ||
| // default is false | ||
| disabled={true} | ||
| // mandatory | ||
| value={this.state.day} | ||
| // mandatory | ||
| onChange={(day) => { | ||
| this.setState({ day }); | ||
| console.log(day); | ||
| }} | ||
| id={'day'} | ||
| name={'day'} | ||
| classes={'classes'} | ||
| optionClasses={'option classes'} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| 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> | ||
| ); | ||
| } | ||
| } | ||
@@ -246,0 +225,0 @@ |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.54%
79054
- Number of lines in readme file
- decreased by-8.5%
226
No dependency changes