144 lines
4.1 KiB
JavaScript
144 lines
4.1 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: "Выбрать дату",
|
|
};
|
|
|
|
export default class CalendarDatePicker extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.state = {
|
|
readonly: true,
|
|
input_value: undefined,
|
|
};
|
|
}
|
|
|
|
_handle_onChange = (date, raw) =>
|
|
{
|
|
// console.log("CalendarDatePicker", "_handle_onChange", { date, raw });
|
|
|
|
const { readonly } = this.state;
|
|
if(this.props.onChange !== undefined)
|
|
{
|
|
if(!readonly)
|
|
{
|
|
if(moment(date).isValid())
|
|
{
|
|
this.props.onChange(date, raw);
|
|
}
|
|
else
|
|
{
|
|
this.props.onChange(null, null);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
_handle_onFocus = () =>
|
|
{
|
|
this.setState({ readonly: false });
|
|
}
|
|
|
|
_handle_onBlur = () =>
|
|
{
|
|
this.setState({ readonly: true });
|
|
}
|
|
|
|
_parse = (str) =>
|
|
{
|
|
const { min, max } = this.props;
|
|
const date = moment(str, 'DD.MM.YYYY');
|
|
|
|
if(date.isValid())
|
|
{
|
|
if(min !== undefined)
|
|
{
|
|
const min_to_compare = moment(moment(min).format("YYYY-MM-DD 00:00:00"));
|
|
if(date < min_to_compare)
|
|
{
|
|
return null;
|
|
}
|
|
}
|
|
|
|
if(max !== undefined)
|
|
{
|
|
const max_to_compare = moment(moment(max).format("YYYY-MM-DD 00:00:00"));
|
|
if(date > max_to_compare)
|
|
{
|
|
return null;
|
|
}
|
|
}
|
|
|
|
return date.toDate();
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
render()
|
|
{
|
|
const { id, placeholder, value, min, max, disabled, plain, style, required, className } = this.props;
|
|
const { readonly, input_value } = 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 }
|
|
//onKeyDown={ this._handle_onKeyDown }
|
|
parse={ this._parse }
|
|
id={ id }
|
|
placeholder={ placeholder }
|
|
value={ value !== "" && value !== undefined && value !== null ? new Date(Date.parse(moment(value, "YYYY-MM-DD").format('YYYY-MM-DD 00:00:00'))) : null }
|
|
min={ min !== undefined ? new Date(Date.parse(moment(min).format('YYYY-MM-DD 00:00:00'))) : undefined }
|
|
max={ max !== undefined ? new Date(Date.parse(moment(max).format('YYYY-MM-DD 00:00:00'))) : undefined }
|
|
onChange={ this._handle_onChange }
|
|
inputProps={{ required }}
|
|
/>
|
|
<div style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", opacity: 0.0 }} onClick={ (event) => { event.stopPropagation(); event.preventDefault(); } }/>
|
|
</>
|
|
) }
|
|
</div>
|
|
)
|
|
}
|
|
else
|
|
{
|
|
const date_value = input_value !== undefined ? input_value : value !== "" && value !== undefined && value !== null ? new Date(Date.parse(moment(value, "YYYY-MM-DD").format('YYYY-MM-DD 00:00:00'))) : max !== undefined ? new Date(Date.parse(moment(max).format('YYYY-MM-DD 00:00:00'))) : null;
|
|
|
|
return (
|
|
<div className={ `date_input_wrapper ${ className } ${ value !== null ? "" : "date_input_wrapper_with_ph" }` } style={ this.props.style }>
|
|
<DatePicker
|
|
messages={ messages }
|
|
onFocus={ this._handle_onFocus }
|
|
onBlur={ this._handle_onBlur }
|
|
parse={ this._parse }
|
|
id={ id }
|
|
placeholder={ placeholder }
|
|
value={ date_value }
|
|
min={ min !== undefined ? new Date(Date.parse(moment(min).format('YYYY-MM-DD 00:00:00'))) : undefined }
|
|
max={ max !== undefined ? new Date(Date.parse(moment(max).format('YYYY-MM-DD 00:00:00'))) : undefined }
|
|
onChange={ this._handle_onChange }
|
|
inputProps={{ required, style: { color: value !== "" && value !== undefined && value !== null ? "#212529" : input_value !== null && input_value !== undefined && input_value !== "" ? "#212529" : "#FFF" } }}
|
|
calendarProps={{ onCurrentDateChange: () => { console.log("onCurrentDateChange") } }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
} |