在 onChange 中获取 React DatePicker 日期值
Get React DatePicker date value in onChange
我正在使用 react-datepicker
,但无法获得 onChange
中的实际日期。
这是我的组件:
import DatePicker from "react-datepicker";
const DatePick = () => {
return (
<DatePicker
locale="fr"
dateFormat="dd/MM/yyyy"
onChange={(date) => {
console.log(date);
}}
/>
);
};
export default DatePick;
在 console.log 中,我得到了这种字符串 Thu Dec 09 2021 00:00:00 GMT+0100 (heure normale d’Europe centrale)
。
我需要在 onChange
中获取日期 dd-MM-yyyy
或我可以格式化并稍后在表单中使用并提交其值的日期。
您可以使用 Date 对象,根据需要设置日期格式。例如:
onChange={(date) => {
const dateString = new Date(date).toLocaleDateString()
console.log(dateString)
}}
然后您将获得格式化为您所在地区时区的日期。但是,如果您在 DatePicker
中指定的格式与本地时区格式不同,则可以将其指定为 toLocaleDateString
:
的参数
new Date(date).toLocaleDateString("fr-FR")
使用下面的代码,它会非常有效
const [Cdate, setDate] = useState(new Date().toLocaleDateString('fr-FR'));
return (
<>
<DatePicker
dateFormat="dd/MM/yyyy"
value={Cdate}
onChange={(date) => {
const d = new Date(date).toLocaleDateString('fr-FR');
console.log(d);
setDate(d);
}}
/>
</>
);
stackblitz link: https://stackblitz.com/edit/react-nov8it?file=src/App.js
我正在使用 react-datepicker
,但无法获得 onChange
中的实际日期。
这是我的组件:
import DatePicker from "react-datepicker";
const DatePick = () => {
return (
<DatePicker
locale="fr"
dateFormat="dd/MM/yyyy"
onChange={(date) => {
console.log(date);
}}
/>
);
};
export default DatePick;
在 console.log 中,我得到了这种字符串 Thu Dec 09 2021 00:00:00 GMT+0100 (heure normale d’Europe centrale)
。
我需要在 onChange
中获取日期 dd-MM-yyyy
或我可以格式化并稍后在表单中使用并提交其值的日期。
您可以使用 Date 对象,根据需要设置日期格式。例如:
onChange={(date) => {
const dateString = new Date(date).toLocaleDateString()
console.log(dateString)
}}
然后您将获得格式化为您所在地区时区的日期。但是,如果您在 DatePicker
中指定的格式与本地时区格式不同,则可以将其指定为 toLocaleDateString
:
new Date(date).toLocaleDateString("fr-FR")
使用下面的代码,它会非常有效
const [Cdate, setDate] = useState(new Date().toLocaleDateString('fr-FR'));
return (
<>
<DatePicker
dateFormat="dd/MM/yyyy"
value={Cdate}
onChange={(date) => {
const d = new Date(date).toLocaleDateString('fr-FR');
console.log(d);
setDate(d);
}}
/>
</>
);
stackblitz link: https://stackblitz.com/edit/react-nov8it?file=src/App.js