Reactjs 如何向react datepicker添加自定义文本?
我想添加“from”(date)来响应datepicker输入,但到目前为止,我有一些奇怪的行为 我的代码:Reactjs 如何向react datepicker添加自定义文本?,reactjs,react-datepicker,Reactjs,React Datepicker,我想添加“from”(date)来响应datepicker输入,但到目前为止,我有一些奇怪的行为 我的代码: const [ data, setData ] = useState({ startDate: new Date(), endDate: new Date() }) const handleChangeDate = (name, date) => { setData({ ...data,
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
}
}}
/>
及
但这两种解决方案都将我的日期从“2020年9月14日16:43”改为“从2020年9月14日星期一17:19:38 GMT+0400(heure de La Réunion)”,这是不必要的行为,因为我绝对想要法语的日期。有什么想法吗?谢谢因为我知道没有办法在输入中添加文本,但是您可以在输入中添加一个
左填充
,并将文本完全放在容器中
这是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;
value={'from' + state.startingDate}
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;
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;
}