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

【问题标题】：React.js: Datepicker on contentEditableReact.js：contentEditable 上的日期选择器
【发布时间】：2020-11-19 05:52:29
【问题描述】：

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

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 上添加日期选择器？我是否必须即时创建一个输入字段来启动日期选择器，然后填充日期选择器中的值？

【问题讨论】：

标签： reactjs datepicker contenteditable

【解决方案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)}
    />}
/>

【讨论】：