如何向react datepicker添加自定义文本？

Question

我想添加“from”（date）来响应datepicker输入，但到目前为止，我有一些奇怪的行为。

我的代码：

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”转变为“从周一9月14 2020 17:19:38格林尼治标准时间0400（留尼汪岛）”，这是不必要的行为，因为我绝对想要法语日期。任何想法？谢啦

Answer 1

正如我所知，没有办法在输入中添加文本，但是您可以在输入中添加一个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;
}