React.js：contentEditable 上的日期选择器

Question

我目前正在使用以下库来动态编辑数据。

import ContentEditable from "react-contenteditable";

我希望有可能在焦点期间添加日期选择器。

<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)}
/>

如何在 contentEditable 上添加日期选择器？我是否必须即时创建一个输入字段来启动日期选择器，然后填充日期选择器中的值？

Answer 1

您可以使用此 DatePicker 来获得 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)}
    />}
/>

React.js：contentEditable 上的日期选择器

React.js: Datepicker on contentEditable

datepicker

contenteditable

reactjs