This repo is no longer supported, however it is open to pll requests. Apologies for any inconvenience.
Always on the lookout for people to help maintain this plugin, please submit PR's and we can make this happen!
There is currently two ways to implement React-datez, as a redux-form component or a standlone date picker.
npm i --save react-datez
Add css to to your project (uses post-css)
@import 'react-datez/dist/css/react-datez.css';
Than import into your components
import { ReactDatez, ReduxReactDatez } from 'react-datez'
ReactDatez.propTypes = {
input: PropTypes.object,
style: PropTypes.object,
inputStyle: PropTypes.object,
className: PropTypes.string,
inputClassName: PropTypes.string,
disableInputIcon: PropTypes.bool,
disable: PropTypes.bool,
wrapperStyle: PropTypes.object,
handleChange: PropTypes.func,
value: PropTypes.string,
displayCalendars: PropTypes.number,
isRedux: PropTypes.bool,
highlightWeekends: PropTypes.bool,
allowPast: PropTypes.bool,
allowFuture: PropTypes.bool,
startDate: PropTypes.string,
endDate: PropTypes.string,
position: PropTypes.oneOf(['center', 'left', 'right']),
dateFormat: PropTypes.string,
yearJump: PropTypes.bool,
placeholder: PropTypes.string,
defaultMonth: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
locale: PropTypes.string,
yearButton: PropTypes.node,
firstDayOfWeek: PropTypes.oneOf(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']),
currentMonthYearFormat: PropTypes.string
}
Passed through by redux <Field />
component. Meta is also automatically added to this component to display errors.
Add additional style to the wrapper div element
Add additional styles directly on main input element
Add additional classes to the wrapper div element
Disables the input
Add additional classes to the main input element
Disable the calender icon on input
Default: false
Pass through parent onChange function. Omitted if using redux-forms - (See example stand-alone picker).
Parent input state. Omitted if using redux-forms - (See example stand-alone picker).
Show multiple calendars (Max 2).
Default: 1
Highlight weekends for visual representation
Default: false
Allow year/month button functionality
Default: true
Allow dates in the past to be selected.
Default: false
Allow dates in the future to be selected.
Default: true
Disallow dates before a given date
Disallow dates after a given date
Format for the date to be displayed and stored as. See moment.js for formatting.
Default: DD/MM/YYYY
Positioning of the popup, 'left', 'center', 'right'
Default: 'left'
Add a placeholder in the input fields
Default: ''
Default month when there is no input value. Can be moment object or a moment formatted string.
Change moment locale - This will change the all moment dates to be the locale.
Default: 'en'
Change year select button with custom element
Set the first day of the week, in standard 2 letter format (e.g. Mo, Tu, We, Th, Fr, Sa, Su)
Default: 'Mo'
Change month year format on title. See moment.js for formatting.
Default: 'MMMM YYYY'
<div className="form-group">
<label htmlFor="exampleDate1">Date</label>
<Field name="exampleDate1" component={ReduxReactDatez} displayCalendars={2} highlightWeekends />
</div>
constructor(props) {
super(props)
this.state = {
dateInput: ''
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(value) {
this.setState({ dateInput: value })
}
render() {
return (
<div className="form-group">
<label htmlFor="exampleDate2">Check-in Date</label>
<ReactDatez name="dateInput" handleChange={this.handleChange} value={this.state.dateInput} />
</div>
)
}