57 lines
1.2 KiB
JavaScript
57 lines
1.2 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 = () =>
|
|
{
|
|
console.log("F");
|
|
this.setState({ readonly: false });
|
|
}
|
|
|
|
_handle_onBlur = () =>
|
|
{
|
|
console.log("B");
|
|
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 }/>
|
|
</div>
|
|
)
|
|
}
|
|
} |