React.js: Datepicker on contentEditable

Question

I am currently using the following library to dynamically edit data.

import ContentEditable from "react-contenteditable";

I would like to have the possibility of adding a datepicker during the focus.

<ContentEditable
    className="date datepicker p-1"
    html={date !== null ? Moment(date).format('DD/MM/YYYY') : ''}
    disabled={false}
    onBlur={(event) => handleChangeTask(event, props.newTask.id, 'date')}
    onFocus={(event) => handleFocusTask(event)}
/>

How to add a datepicker on a contentEditable? Do I have to create on the fly an input field which launches a datepicker then which fills the value in the datepicker?

Answer 1

You can use this DatePicker which allow you to have a customInput

<DatePicker
    className="date p-1"
    selected={date !== null ? new Date(Moment(date).format('YYYY/MM/DD')) : null}
    onChange={date => handleChangeDateTask(Moment(date).format('DD/MM/YYYY'), id)}
    customInput={<ContentEditable
        html={date !== null ? Moment(date).format('DD/MM/YYYY') : ''}
        disabled={false}
        onBlur={(event) => handleChangeTask(event, id, 'date')}
        onFocus={(event) => handleFocusTask(event)}
    />}
/>