Skip to content

Instantly share code, notes, and snippets.

@marr
Created July 12, 2015 22:33
Show Gist options
  • Save marr/c4b861cfeb58f6e47cba to your computer and use it in GitHub Desktop.
Save marr/c4b861cfeb58f6e47cba to your computer and use it in GitHub Desktop.
import React from 'react';
import { Calendar, DateInput, Popover } from 'react-datepicker';
import moment from 'moment';
require('react-datepicker/dist/react-datepicker.css');
export class CreditCardForm extends React.Component {
constructor(props) {
super(props);
this.state = {
focus: false,
selected: props.selected
};
}
hideCalendar() {
setTimeout(() => {
this.setState({
focus: false
});
}, 0);
}
handleSelect(date) {
this.setSelected(date);
setTimeout(function(){
this.hideCalendar();
}.bind(this), 200);
}
setSelected(date) {
var moment = date.moment();
this.props.onChange(moment);
this.setState({
selected: moment
});
}
calendar() {
if (this.state.focus) {
return (<Popover>
<Calendar
weekdays={this.props.weekdays}
locale={this.props.locale}
moment={this.props.moment}
dateFormat={this.props.dateFormatCalendar}
selected={this.state.selected}
onSelect={this.handleSelect}
hideCalendar={this.hideCalendar}
minDate={this.props.minDate}
maxDate={this.props.maxDate}
excludeDates={this.props.excludeDates}
weekStart={this.props.weekStart} />
</Popover>);
}
}
render() {
return (<div>
<DateInput
name={this.props.name}
date={this.state.selected}
dateFormat={this.props.dateFormat}
focus={this.state.focus}
onFocus={this.handleFocus}
handleClick={this.onInputClick}
handleEnter={this.hideCalendar}
setSelected={this.setSelected}
clearSelected={this.clearSelected}
hideCalendar={this.hideCalendar}
placeholderText={this.props.placeholderText}
disabled={this.props.disabled}
className={this.props.className} />
{this.props.disabled ? null : this.calendar()}
</div>);
}
};
CreditCardForm.defaultProps = {
weekdays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
locale: 'en',
dateFormatCalendar: "MMMM YYYY",
moment: moment,
onChange: function() {},
disabled: false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment