DateTimePicker.tsx

import cx from 'classnames';
import {
  KeyboardDatePicker,
  KeyboardDateTimePicker,
  MuiPickersUtilsProvider,
	MaterialUiPickersDate,
  KeyboardDatePickerProps,
	KeyboardDateTimePickerProps,
} from "@material-ui/pickers";
import DateMomentUtils from "@date-io/moment";

import React, { Component } from 'react';

import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';

import styles from './DateTimePicker.module.scss';
import { TextFieldProps } from "@material-ui/core/TextField";

interface IOwnProps {
  value: Date | null;

  minDate?: Date;
  maxDate?: Date;
	disablePast?: boolean;
  disableFuture?: boolean;

  title?: string;
  error?: boolean;
  className?: string;
  onlyDate?: boolean;
  disabled?: boolean;
  placeholder?: string;

  onBlur?(): void;
  onChange(date: any): void;
}

type Props = IOwnProps;

type State = {
	isOpen: boolean;
};

const muiThemeParams = {
	palette: {
		primary: {
			main: '#00a1dc'
		}
	},
};


class DateTimePicker extends Component<Props, State> {
	private _d: Date | null = null;
	private readonly inputEl = React.createRef<HTMLInputElement>();

	state = {
		isOpen: false,
	};

	checkValidDate = () => {
		const {
			value,
			onChange,
		} = this.props;

		if (this._d && isNaN(this._d.getTime())) {
			const newValue = value || new Date();

			this._d = newValue;
			onChange(newValue);
		}
	}

	handleChange = (date: MaterialUiPickersDate) => {
		const { onChange } = this.props;

		if (date) {
			// @ts-ignore _d
			const dateMomentValue = date._d;
			this._d = dateMomentValue;

			if (!isNaN(dateMomentValue.getTime())) {
				onChange(dateMomentValue);
			}
		}
	}

	handleBlur = () => {
		const { onBlur } = this.props;

		if (onBlur) onBlur();
		this.checkValidDate();
	}

	renderInput = (props: TextFieldProps) => {
		const {
			error,
			disabled,
			placeholder = 'Укажите дату',
		} = this.props;

		const inputProps: any = {
			type: 'text',
			placeholder,
			id: props.id,
			ref: this.inputEl,
			value: props.value,
			onBlur: props.onBlur,
			onChange: props.onChange,
			disabled: props.disabled || disabled,
			className: cx(styles.input, {
				[styles.error]: error,
			}),
		};

		console.log(props)

		return <input {...inputProps} />;
	}

	render() {
		const {
			value,
			title,
			minDate,
			maxDate,
			onlyDate,
			disabled,
			className,
			disablePast,
			disableFuture,
		} = this.props;
		const { isOpen } = this.state;

		const pickerProps: KeyboardDatePickerProps & Partial<KeyboardDateTimePickerProps> = {
			value,
			disabled,
			ampm: false,
			disablePast,
			open: isOpen,
			autoOk: true,
			disableFuture,
			variant: 'inline',
			TextFieldComponent: this.renderInput,
			format: onlyDate ? 'DD.MM.YYYY' : 'DD.MM.YYYY HH:mm',
			PopoverProps: {
				anchorOrigin: { horizontal: "center", vertical: "bottom" },
				transformOrigin: { horizontal: "center", vertical: "bottom" }
			},

			onBlur: this.handleBlur,
			onAccept: this.handleChange,
			onChange: this.handleChange,
			onOpen: () => this.setState({ isOpen: true }),
			onClose: () => this.setState({ isOpen: false }),
		};

		if (minDate) pickerProps.minDate = minDate;
		if (maxDate) pickerProps.maxDate = maxDate;

		return (
			<div
				className={cx(styles.wrapper, {
					[className!]: !!className,
				})}
			>
				{
					title && (
						<div className={styles.title}>
							{title}
						</div>
					)
				}
				<div className={styles.pickZone}>
					<MuiPickersUtilsProvider utils={DateMomentUtils}>
						<MuiThemeProvider theme={createMuiTheme(muiThemeParams)}>
							{
								onlyDate
									? <KeyboardDatePicker {...pickerProps} />
									: <KeyboardDateTimePicker {...pickerProps} />
							}
							<div
								onClick={() => this.setState({ isOpen: !isOpen })}
								className={cx(styles.picker, {
									[styles.disabled]: disabled,
								})}
							>
								<i className="zmdi zmdi-calendar"/>
							</div>
						</MuiThemeProvider>
					</MuiPickersUtilsProvider>
				</div>
			</div>
		);
	}
}

export default DateTimePicker;