evoleasing-account/components/CalendarDatePicker/index.js

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, 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);
				}
			}
//			this.props.onChange(date.getTime !== undefined ? date.toJSON() : "", date.getTime !== undefined ? raw : null);
			/*
			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 });
	}

	_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;

//		console.log("CalendarDatePicker", { value });

		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
		{
			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={ this._parse } 
						id={ id } 
						placeholder={ placeholder } 
						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'))) : 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>
			)
		}
    }
}