99 lines
2.3 KiB
JavaScript
99 lines
2.3 KiB
JavaScript
import React from "react";
|
|
import DatePicker from "react-widgets/DatePicker";
|
|
import "react-widgets/styles.css";
|
|
import moment from "moment";
|
|
|
|
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.getTime !== undefined ? date : "");
|
|
}
|
|
}
|
|
|
|
_handle_onFocus = () =>
|
|
{
|
|
this.setState({ readonly: false });
|
|
}
|
|
|
|
_handle_onBlur = () =>
|
|
{
|
|
this.setState({ readonly: true });
|
|
}
|
|
|
|
render()
|
|
{
|
|
const { id, placeholder, value, min, max, disabled, plain, style } = this.props;
|
|
const { readonly } = this.state;
|
|
|
|
if(disabled)
|
|
{
|
|
return (
|
|
<div className="date_input_wrapper" style={{ ...{ position: "relative" }, ...this.props.style }}>
|
|
{ plain ? (
|
|
moment(value).format("DD.MM.YYYY")
|
|
) : (
|
|
<>
|
|
<DatePicker
|
|
//valueEditFormat={{ dateStyle: "short" }}
|
|
messages={ messages }
|
|
onFocus={ this._handle_onFocus }
|
|
onBlur={ this._handle_onBlur }
|
|
parse={ str => { return moment(str, 'DD.MM.YYYY').toDate() } }
|
|
id={ id }
|
|
placeholder={ placeholder }
|
|
value={ value }
|
|
min={ min }
|
|
max={ max }
|
|
onChange={ this._handle_onChange }
|
|
/>
|
|
<div style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", opacity: 0.0 }} onClick={ (event) => { event.stopPropagation(); event.preventDefault(); } }/>
|
|
</>
|
|
) }
|
|
</div>
|
|
)
|
|
}
|
|
else
|
|
{
|
|
return (
|
|
<div className="date_input_wrapper" style={ this.props.style }>
|
|
<DatePicker
|
|
//valueEditFormat={{ dateStyle: "short" }}
|
|
messages={ messages }
|
|
onFocus={ this._handle_onFocus }
|
|
onBlur={ this._handle_onBlur }
|
|
parse={ str => { return moment(str, 'DD.MM.YYYY').toDate() } }
|
|
id={ id }
|
|
placeholder={ placeholder }
|
|
value={ value }
|
|
min={ min }
|
|
max={ max }
|
|
onChange={ this._handle_onChange }
|
|
className={ this.props.className }
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
} |