如何获取react datepicker格式的值yyyy-mm-dd

React Datepicker 是一个常用的日期选择组件库，可以帮助你在 React 应用中轻松地添加日期选择功能。要获取格式为 yyyy-mm-dd 的日期值，你可以使用 Datepicker 组件提供的 onChange 事件处理函数来处理选中的日期，并将其格式化为所需的格式。

以下是一个简单的示例代码，展示了如何使用 React Datepicker 并获取格式为 yyyy-mm-dd 的日期值：

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

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

  const handleDateChange = (date) => {
    const formattedDate = date.toISOString().split('T')[0];
    setStartDate(formattedDate);
  };

  return (
    <div>
      <h2>Select a Date</h2>
      <DatePicker
        selected={startDate}
        onChange={handleDateChange}
        dateFormat="yyyy-MM-dd"
      />
      <p>Selected Date: {startDate}</p>
    </div>
  );
}

export default App;

解释

1. 安装依赖：首先，你需要安装 react-datepicker 和其样式文件。
2. 安装依赖：首先，你需要安装 react-datepicker 和其样式文件。
3. 导入组件：在组件文件中导入 DatePicker 组件及其样式。
4. 状态管理：使用 useState 钩子来管理选中的日期。
5. 处理日期变化：在 handleDateChange 函数中，使用 toISOString() 方法将日期转换为 ISO 格式，然后通过 split('T') 方法将其分割为日期部分和时间部分，取第一部分即为 yyyy-mm-dd 格式的日期。
6. 渲染组件：在 JSX 中渲染 DatePicker 组件，并传递 selected 和 onChange 属性。

应用场景

• 表单中的日期输入框
• 日历应用
• 任何需要用户选择日期的场景

参考链接

• React Datepicker 官方文档

通过这种方式，你可以轻松地获取并处理 React Datepicker 组件中选中的日期值，并将其格式化为 yyyy-mm-dd 格式。