import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { withTranslation } from 'react-i18next';
import Proptypes from 'prop-types';
import { DatePicker } from "@progress/kendo-react-dateinputs";
//import { CustomWeekCell } from '../ExtendedClasses';
import moment from 'moment-timezone';

class MyDatePicker extends Component {
    static propTypes = {
        //required
        t: Proptypes.func.isRequired,
        name: Proptypes.string.isRequired,
        callback: Proptypes.func.isRequired,
        style: Proptypes.objectOf(Proptypes.string),
        //optional
        defaultValue: Proptypes.oneOfType([Proptypes.string, Proptypes.number]),
        disabled: Proptypes.bool,
        readOnly: Proptypes.bool,
        required: Proptypes.bool,
        width: Proptypes.number,
        tabIndex: Proptypes.number,
        //Extended by Telerik Component
        labelWidth: Proptypes.oneOfType([Proptypes.string, Proptypes.number]),
        labelHeight: Proptypes.oneOfType([Proptypes.string, Proptypes.number]),
        floatingLabel: Proptypes.string,
        fixedLabel: Proptypes.string,
        labelPosition: Proptypes.string,
        formatPlaceholder: Proptypes.objectOf(Proptypes.string),
        weekNumber: Proptypes.bool,
        format: Proptypes.string,
        value: Proptypes.string,
    }

    static defaultProps = {
        _datepicker: null,
        style: {},
        defaultValue: '',
        disabled: false,
        readOnly: false,
        required: false,
        width: 100,
        tabIndex: -1,
        //Extended by Telerik Component
        labelWidth: "auto",
        labelHeight: "auto",
        floatingLabel: '',
        fixedLabel: '',
        labelPosition: 'left',
        formatPlaceholder: { year: "    ", month: "  ", day: "  " },
        weekNumber: false,
        format: "dd/MM/yyyy",
        value: "",
    }

    /**
     * @constructor
     * @param {Object} props - props of the component
     * @description instantiate component and his state
     */
    constructor(props) {
        super(props);
        this.state = {
            value: props.defaultValue,
        };
    }

    /**
     * 
     */
    componentDidMount() {
        console.log("componentDidMount")
        const {
            value,
            defaultValue,
            format,
        } = this.props;

        console.log(this.props)
        this.setState({
            defaultValue: null,
        });
        this.setState({
            defaultValue: defaultValue,//no effect !!!
            value: value,//no effect !!!
        });
        console.log("value from props");
        console.log(value);

        console.log("value from state");
        console.log(this.state.value);

        console.log("defaultValue from props");
        console.log(defaultValue);

        console.log("defaultValue from state");
        console.log(this.sdefaultValue);

        var root = ReactDOM.findDOMNode(this._root);
        var input = root.querySelector('input');

        console.log("input from DOM");
        console.log(input);

        console.log("input value from DOM");
        console.log(input.value);

        if (input && defaultValue) {
            console.log("force setting manually")
            var s1 = moment(defaultValue, format).format("X");
            input.value = value;//no effect !!!
            input.ariaValuetext = "01/01/2021";//no effect !!!
            input.ariaValuenow = s1 + "000";//no effect !!!
            console.log("check after forcing")
            console.log(input) //no effect !!!
        }
    }

    /**
     * @param {Object} prevProps - the previous props of component
     * @description setDefaultValue if props changed
     */
    componentDidUpdate(prevProps) {
        console.log("componentDidUpdate")
        const {
            value,
            defaultValue,
        } = this.props;

        if (prevProps !== this.props) {
            this.setState({
                defaultValue: defaultValue,
                value: value,
            });
        }
    }

    /**
     * valudeChanged
     * @method
     * @param {Object} e - the event fired
     * @description fired when a value changed - check validators -
     * set the state of component - call callback to notify changed
     */
    onChange = (e) => {
        const {
            //callback,
            //name,
            readOnly,
        } = this.props;
        const value = e.value;
        if (readOnly) {
            return;
        }
        this.setState({
            value,
        });
        //callback({ name: name, value: value }, this, null);
    }

    /**
     * render
     * @description templates the component
     */
    render() {
        const {
            defaultValue,
            value,
        } = this.state;
        const {
            name,
            width,
            disabled,
            style,
            tabIndex,
            readOnly,
            //Extended by Telerik Component
            floatingLabel,
            fixedLabel,
            labelWidth,
            labelHeight,
            labelPosition,
            formatPlaceholder,
            weekNumber,
            format,
        } = this.props;
        const showFixedLabel = fixedLabel && labelPosition && !floatingLabel && (labelWidth || labelHeight);
        let display = "";
        let templateColumns = "";
        let templateRows = "";
        let w = labelWidth ? labelWidth : "auto";
        let h = labelHeight ? labelHeight : "auto";
        if (showFixedLabel) {
            display = "grid";
            switch (labelPosition) {
                case "top": templateRows = h + "px auto"; break;
                case "right": templateColumns = "auto" + w + "px"; break;
                case "bottom": templateRows = "auto" + h + "px"; break;
                case "left": templateColumns = w + "px auto"; break;
                default:
                    return;
            }
        }
        return (
            <div className="k-MyDatePicker-Container k-Theme-Palette-Primary"
                ref={(c) => this._root = c}
                style={{ ...style, display: `${display}`, width: `${w + 2}px`, height: `${h + 2}px`, gridTemplateColumns: `${templateColumns}`, gridTemplateRows: `${templateRows}` }}>
                {showFixedLabel &&
                    (<div className="k-MyDatePicker-Label" style={{ ...style, width: `${w}px`, height: `${h}px` }}>
                        {fixedLabel}
                    </div>)}
                <DatePicker style={{ ...style, width: `${width}px` }}
                    ref={(c) => this._datepicker = c}
                    defaultValue={defaultValue instanceof Date ? defaultValue : null}
                    className="k-MyDatePicker-DatePicker k-Theme-Palette-Secondary"
                    width={width}
                    formatPlaceholder={formatPlaceholder}
                    tabIndex={tabIndex}
                    label={floatingLabel}
                    name={name}
                    weekNumber={weekNumber}
                    disabled={disabled}
                    readonly={readOnly}
                    //weekCell={CustomWeekCell}
                    format={format}
                    onChange={this.onChange} />
            </div>
        )
    }
}

export { MyDatePicker };
const o = withTranslation()(MyDatePicker);
o.displayName = 'MyDatePicker';
export default o;

    "@progress/kendo-data-query": "^1.5.5",
    "@progress/kendo-drawing": "^1.10.1",
    "@progress/kendo-licensing": "^1.1.4",
    "@progress/kendo-react-animation": "^4.7.0",
    "@progress/kendo-react-data-tools": "^4.7.0",
    "@progress/kendo-react-dateinputs": "^4.7.0",
    "@progress/kendo-react-dropdowns": "^4.7.0",
    "@progress/kendo-react-grid": "^4.7.0",
    "@progress/kendo-react-inputs": "^4.7.0",
    "@progress/kendo-react-intl": "^4.7.0",
    "@progress/kendo-react-layout": "^4.7.0",
    "@types/react-transition-group": "^4.4.1",

<Grid filterable={false} pageable={true} sortable={false}
                                    data={dataSource}
                                    reorderable={true}
                                    onItemChange={this.itemChange}
                                    editField={"inEdit"}>
                                    <Column title="Ligne">
                                        <Column field="NoLig" width="50px" cell={this.cellFormat} />
                                        <Column field="FlagAnnul" width="50px" cell={this.cellFormat} />
                                        <Column field="Classification" width="64px" cell={this.cellFormat} />
                                    </Column>
</Grid>

    cellFormat = (props) => {
        const { dataItem } = props;
        const { dataBinding } = this.state;
        let value = props.dataItem[props.field];
        let editor = "";
        let max = 0;
        let min = 0;
        let maxLength = 0;
        let formatOptions = "";
        let valueDate = null;
        const index = dataBinding.dataScheme.findIndex((o) => o.Name === props.field);
        if (index > -1) {
            const scheme = dataBinding.dataScheme[index];
            editor = scheme.Type;
            switch (editor) {
                case "boolean":
                    break;
                case "text":
                    maxLength = scheme.MaxLength;
                    break;
                case "date":
                    valueDate = moment(value, 'DD/MM/YYYY').toDate();
                    break;
                case "int":
                    if (value)
                        value = parseInt(value);
                    min = parseInt(scheme.Min);
                    max = parseInt(scheme.Max);
                    formatOptions = "n0";
                    break;
                case "float":
                    if (value)
                        value = parseFloat(value);
                    min = parseFloat(scheme.Min);
                    max = parseFloat(scheme.Max);
                    formatOptions = "n" + scheme.Min.split(",")[1].length;
                    break;
            }
        }
        return (
            <td colSpan={props.colSpan}
                className={props.className}
                role="gridcell"
                aria-colindex={props.ariaColumnIndex}
                aria-selected={props.isSelected}
                expanded={props.expanded.toString()}
                data-grid-col-index={props.columnIndex}
                editor={editor}>
                {dataItem.inEdit ? (<>
                    {editor === "boolean" && (<Input />)}
                    {editor === "text" && (<Input field={props.field} maxLength={maxLength} defaultValue={value} onChange={(e, dataItem) => this.cellValueOnChange(e, props.dataItem)} />)}
                    {editor === "date" && (<DateInput field={props.field}
                        defaultValue={valueDate}
                        data-required-msg=""
                        validationMessage="" />)}
                    {(editor === "int" || editor === "float") && (<NumericTextBox field={props.field} max={max} min={min} format={formatOptions} defaultValue={value} onChange={(e, dataItem) => this.cellValueOnChange(e, props.dataItem)} />)}
                </>) : (value)}
            </td>)
        };

Warning: React does not recognize the `firstDate` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `firstdate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in td (created by CalendarWeekCell)
    in CalendarWeekCell (created by View)

<div>
<DatePicker
    name="OperationDate" className="OperationDate"
    defaultValue={fromData.Date}
    format="dd/MM/yyyy"
    width={116}
    tabIndex={8}
    weekNumber={true}
    weekCell={CustomWeekCell}
    onChange={this.handleChange}
    {...this.props} />
</div>