150 lines
3.6 KiB
JavaScript
150 lines
3.6 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 CalendarDatePicker extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
readonly: true,
|
||
input_value: undefined,
|
||
};
|
||
}
|
||
|
||
_handle_onChange = (date) =>
|
||
{
|
||
//console.log("CalendarDatePicker", "_handle_onChange", date);
|
||
const { readonly } = this.state;
|
||
if(this.props.onChange !== undefined)
|
||
{
|
||
this.props.onChange(date.getTime !== undefined ? date.toJSON() : "");
|
||
/*
|
||
if(!readonly)
|
||
{
|
||
this.setState({ value: date });
|
||
}
|
||
else
|
||
{
|
||
}
|
||
*/
|
||
}
|
||
}
|
||
|
||
/*
|
||
_handle_onKeyDown = (event) =>
|
||
{
|
||
const { input_value } = this.state;
|
||
if(event.keyCode >= 48 && event.keyCode <= 57)
|
||
{
|
||
//const input_value
|
||
console.log("CalendarDatePicker", "_handle_onKeyChange", "key", event.key, event);
|
||
let new_value = `${ input_value !== undefined ? input_value : "" }${ event.key }`;
|
||
|
||
let masks = "ДД.ММ.ГГГГ".split("");
|
||
let letters = new_value.split("");
|
||
|
||
let chars = [];
|
||
console.log({ new_value, letters, masks });
|
||
|
||
for(let i in masks)
|
||
{
|
||
if(letters[i] !== undefined)
|
||
{
|
||
chars.push(letters[i]);
|
||
}
|
||
else
|
||
{
|
||
chars.push(masks[i]);
|
||
}
|
||
}
|
||
console.log("chars", chars, chars.join(""));
|
||
|
||
this.setState({ input_value: chars.join("") });
|
||
}
|
||
}
|
||
*/
|
||
|
||
_handle_onFocus = () =>
|
||
{
|
||
this.setState({ readonly: false });
|
||
}
|
||
|
||
_handle_onBlur = () =>
|
||
{
|
||
this.setState({ readonly: true });
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { id, placeholder, value, min, max, disabled, plain, style, required, className } = this.props;
|
||
const { readonly, input_value } = this.state;
|
||
|
||
console.log("DATE", className);
|
||
|
||
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={ str => { return moment(str, 'DD.MM.YYYY').toDate() } }
|
||
id={ id }
|
||
placeholder={ placeholder }
|
||
value={ value !== "" && value !== null ? new Date(value) : null }
|
||
min={ min }
|
||
max={ max }
|
||
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
|
||
{
|
||
return (
|
||
<div className={ `date_input_wrapper ${ className }` } style={ this.props.style }>
|
||
<DatePicker
|
||
//valueEditFormat={{ dateStyle: "short" }}
|
||
messages={ messages }
|
||
onFocus={ this._handle_onFocus }
|
||
onBlur={ this._handle_onBlur }
|
||
//onKeyDown={ this._handle_onKeyDown }
|
||
parse={ str => { return moment(str, 'DD.MM.YYYY').toDate() } }
|
||
id={ id }
|
||
placeholder={ placeholder }
|
||
value={ input_value !== undefined ? input_value : value !== "" && value !== null ? new Date(value) : null }
|
||
min={ min }
|
||
max={ max }
|
||
onChange={ this._handle_onChange }
|
||
inputProps={{ required }}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
} |