68 lines
1.3 KiB
JavaScript
68 lines
1.3 KiB
JavaScript
import React from "react";
|
|
import DatePicker from "react-widgets/DatePicker";
|
|
import "react-widgets/styles.css";
|
|
|
|
const messages = {
|
|
moveToday: "Сегодня",
|
|
moveBack: "Назад",
|
|
moveForward: "Вперед",
|
|
dateButton: "Выбрать дату",
|
|
};
|
|
|
|
const formats = [
|
|
'DD.MM.YYYY'
|
|
];
|
|
|
|
export default class DateInput extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.state = {
|
|
readonly: true,
|
|
}
|
|
}
|
|
|
|
_handle_onChange = (date) =>
|
|
{
|
|
if(this.props.onChange !== undefined)
|
|
{
|
|
this.props.onChange(date);
|
|
}
|
|
}
|
|
|
|
_handle_onFocus = () =>
|
|
{
|
|
this.setState({ readonly: false });
|
|
}
|
|
|
|
_handle_onBlur = () =>
|
|
{
|
|
this.setState({ readonly: true });
|
|
}
|
|
|
|
render()
|
|
{
|
|
const { id, placeholder, value, min, max } = this.props;
|
|
const { readonly } = this.state;
|
|
|
|
return (
|
|
<div className="date_input_wrapper">
|
|
<DatePicker
|
|
messages={ messages }
|
|
onFocus={ this._handle_onFocus }
|
|
onBlur={ this._handle_onBlur }
|
|
parse={ formats } id={ id }
|
|
placeholder={ placeholder }
|
|
value={ value }
|
|
min={ min }
|
|
max={ max }
|
|
onChange={ this._handle_onChange }
|
|
inputProps={{
|
|
component: props => <input {...props} readOnly />
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
} |