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

【问题标题】：How can i add custom text to react-datepicker?如何将自定义文本添加到 react-datepicker？
【发布时间】：2021-01-01 05:28:43
【问题描述】：

我想在 react-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”转换为“从 2020 年 9 月 14 日星期一 17:19:38 GMT+0400（heure de La Réunion）”，这是不受欢迎的行为，因为我绝对想要法语日期。任何想法？谢谢

【问题讨论】：

标签： reactjs react-datepicker

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

【讨论】：