Question

我遇到了以下问题：我正在使用 react-dropdown-date，但在将所选日期格式化为“YYYY-MM-DD”格式时遇到问题。我的代码如下：

formatDate.js

// formats date to 'yyyy-mm-dd'
const formatDate = (day, month, year) => {
  var d = new Date(day, month, year),
    month = "" + (d.getMonth() + 1),
    day = "" + d.getDate(),
    year = d.getFullYear();

  if (month.length < 2) {
    month = '0' + month;
  } 
  if (day.length < 2) {
    day = '0' + day;
  }

  return [year, month, day].join('-');
}

export default formatDate;

组件如下：

import React, { useState, useEffect } from "react";
import { YearPicker, MonthPicker, DayPicker } from "react-dropdown-date";
import formatDate from "./formatDate";
import "./styles.scss";

const DOB = () => {
  const [date, setDate] = useState({ year: null, month: null, day: null });
  const [selectedDate, setSelectedDate] = useState(null);

  // useEffect(() => {
  //   setSelectedDate(formatDate(date.day, date.month, date.year));
  // }, [date]);
 
  console.log('selectedDate', selectedDate);
  console.log(date.day, date.month, date.year);
  return (
    <div className="dob__main-container">
      <div>
        <DayPicker
          classes={"dob__day"}
          defaultValue={"DD"}
          year={date.year} // mandatory
          month={date.month} // mandatory
          endYearGiven // mandatory if end={} is given in YearPicker
          required={true} // default is false
          value={date.day} // mandatory
          onChange={day => {
            // mandatory
            setDate({ day });
            console.log(day);
          }}
          id={"day"}
          name={"day"}
        />
        <MonthPicker
          classes={"dob__month"}
          defaultValue={"MM"}
          endYearGiven // mandatory if end={} is given in YearPicker
          year={date.year} // mandatory
          required={true} // default is false
          value={date.month} // mandatory
          onChange={month => {
            // mandatory
            setDate({ month });
            console.log(month);
          }}
          id={"month"}
          name={"month"}
        />
        <YearPicker
          classes={"dob__year"}
          defaultValue={"YYYY"}
          start={1901} // default is 1900
          end={new Date().getFullYear()} // default is current year
          reverse // default is ASCENDING
          required={true} // default is false
          value={date.year} // mandatory
          onChange={year => {
            // mandatory
            setDate({ year });
            console.log(year);
          }}
          id={"year"}
          name={"year"}
        />
      </div>
    </div>
  );
};

export default DOB;

我正在使用文档中的示例，但我无法根据需要设置所选日期的格式 (YYYY-MM-DD)。 formatDate 方法不起作用。我认为它必须以另一种方式实施。也许有使用这个包经验的人可以帮我解决这个问题。

日、月、年的值为 1, 1, 2001。所有字符串。

Answer 1

试试这个功能可能对你有帮助！

const formatDate = (date) => {
    date = new Date(date);
    if(date == 'Invalid Date') return date;
    let month = date.getMonth();
    let day = date.getDate();
    return `${date.getFullYear()}-${day<10?'0':''}${day}-${month<10?'0':''}${month+1}`;
}

export default formatDate;

问题格式化日期

1 个答案: