如何将自定义文本添加到react-datepicker？

如何解决如何将自定义文本添加到react-datepicker？

我想在“ react-datepicker”输入中添加“ from”（日期），但到目前为止，我的行为很奇怪。

我的代码：

const [ data,setData ] = useState({
        startDate: new Date(),endDate: new Date()
    })

const handleChangeDate = (name,date) => {
        setData({
            ...data,[name]: date
        })
    }

<label className={classes.Label}>Date de début </label>
                        <DatePicker
                            className={classes.Input}
                            value={state.startingDate}
                            name="startingDate"
                            onChange={(date) => handleChangeDate('startDate',date)}
                            showTimeSelect
                            selected={data.startDate}
                            value={data.startDate}
                            timeFormat="HH:mm"
                            locale='fr'
                            timeIntervals={15}
                            dateFormat="d MMMM,yyyy HH:mm"
                            timeCaption="Time"
                            inputStyle={{ textAlign: 'center' }}
                            popperModifiers={{
                                flip: {
                                    behavior: ["bottom"] // don't allow it to flip to be above
                                },preventOverflow: {
                                    enabled: false // tell it not to try to stay within the view (this prevents the popper from covering the element you clicked)
                                },hide: {
                                    enabled: false // turn off since needs preventOverflow to be enabled
                                }
                            }}
                        />

到目前为止，我已经尝试过：

value={`from ${state.startingDate}`}

和

value={'from' + state.startingDate}

但是这两种解决方案都将我的日期从“ 2020年9月14日16:43”更改为“从2020年9月14日星期一17:19:38 GMT + 0400（Heure de LaRéunion）”，这是不受欢迎的行为，因为我绝对希望法语约会。任何想法 ？谢谢

解决方法

据我所知，无法在输入中添加文本，但您可以向输入中添加 padding-left 并将文本绝对放置在容器内。

这是 JSX :

import React,{ useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import "../Css/Datepicker.css";

function Datepicker() {
    const [startDate,setStartDate] = useState(new Date());

    return (
        <div>
            <h4 className="datepicker__title" > From </h4>
            <DatePicker
                selected={startDate}
                onChange={(date) => setStartDate(date)}
            />
        </div>
    );
}

export default Datepicker;

这是CSS：

input {
  box-shadow: inset 2px 2px 5px #b8b9be,inset -3px -3px 7px #fff;
  background: transparent;
  padding: 0.4375rem 0.75rem;
  border: 0;
  outline: 1px solid #eeeef0;
  font-size: 0.875rem;
  height: 30px;
  line-height: 1.5;
  border-radius: 0.3rem;
  width: 250px;
  padding-left: 70px;
}

.datepicker__title {
  position: absolute;
  top: 27px;
  margin-left: 20px;
  font-weight: 400;
}