Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
react-date-picker input integration
import React from 'react'
import assign from 'object-assign';
import Input from 'react-filed';
import join from 'classnames';
import DatePicker from 'react-date-picker';
import moment from 'moment';
import ClassName from './index.local.styl';
export default class DateInput extends React.Component {
constructor(props){
super(props);
this.state = {
focused: false
};
}
toDate(date){
if (!date){
return '';
}
return moment(date, this.props.dateFormat);
}
toDateString(date){
if (!date){
return '';
}
if (typeof date != 'string'){
date = moment(date)
.format(this.props.displayDateFormat || this.props.dateFormat);
}
return date;
}
render(){
const props = this.props;
const state = this.state;
this.date = this.toDate(props.date || props.value);
this.dateString = this.toDateString(this.date);
const className = join(
props.className,
ClassName.dateField,
state.focused? ClassName.focused: ''
);
const inputProps = assign({}, props.inputProps, {
onChange: props.onChange,
value: props.value,
placeholder: props.placeholder
});
return <div {...props} className={className}>
<Input
readOnly
{...inputProps}
value={this.dateString}
ref="input"
onFocus={this.onFocus}
onBlur={this.onBlur}
onClick={this.onClick}
/>
{this.renderPicker()}
</div>;
}
renderPicker(){
if (!this.state.focused || !this.state.pickerVisible){
return null;
}
const props = this.props;
const datePickerProps = {
className: ClassName.picker,
date: this.date,
dateFormat: props.dateFormat,
onChange: this.onChange,
style: props.pickerStyle,
onMouseDown: this.onPickerMouseDown
};
let result;
if (props.renderPicker){
result = props.renderPicker(datePickerProps);
}
if (result === undefined){
return <DatePicker {...datePickerProps}/>;
}
}
showPicker(){
this.setState({
pickerVisible: true
});
}
togglePicker(){
this.setState({
pickerVisible: !this.state.pickerVisible
});
}
onClick(){
if (this.state.focused && !this.state.pickerVisible){
this.togglePicker();
}
}
onPickerMouseDown(event){
event.preventDefault();
}
onChange(dateString){
this.setState({
pickerVisible: false
});
this.props.onChange(dateString);
}
focus(){
React.findDOMNode(this.refs.input).focus();
}
onBlur(event){
this.setState({
focused: false
});
this.props.onBlur(event);
}
onFocus(event){
this.setState({
focused: true,
pickerVisible: true
});
this.props.onFocus(event);
}
}
DateInput.propTypes = {
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onChange: PropTypes.func,
dateFormat: PropTypes.string
};
DateInput.defaultProps = {
dateFormat: 'YYYY-MM-DDTHH:mm:ss',
displayDateFormat: 'YYYY-MM-YY',
onChange: () => {},
onBlur: () => {},
onFocus: () => {}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment