问题设定日期

Question

我无法确定日期。据我所见，它只设定了正确的日期，而不是月份和年份。我不明白我做错了什么。

这是我的密码：

格式化ate.js

// formats date to 'yyyy-mm-dd'
const formatDate = (date) => {
  var d = new Date(date),
    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 { format } from "date-fns";
import formatDate from "./formatDate";
import "./styles.scss";

const DOB = () => {
  const [day, setDay] = useState('');
  const [month, setMonth] = useState('');
  const [year, setYear] = useState('');
  const [selectedDate, setSelectedDate] = useState('');

  useEffect(() => {
    setSelectedDate(formatDate(day, month, year));
    
  }, [day, month, year]);
 console.log('formatDate===', formatDate(day, month, year))
 console.log('selectedDate', selectedDate);
  
  // console.log(day, month, year);
  
  return (
    <div className="dob__main">
      <div>
        <DayPicker
          classes={"dob__day"}
          defaultValue={"DD"}
          year={year}
          month={month}
          endYearGiven
          required={true}
          value={day}
          onChange={day => {
            setDay(day);
            console.log(day);
          }}
          id={"day"}
          name={"day"}
        />
        <MonthPicker
          classes={"dob__month"}
          defaultValue={"MM"}
          endYearGiven 
          year={year}
          required={true} 
          value={month}
          onChange={month => {
            setMonth(month);
            console.log(month);
          }}
          id={"month"}
          name={"month"}
        />
        <YearPicker
          classes={"dob__year"}
          defaultValue={"YYYY"}
          start={1901} 
          end={new Date().getFullYear()} 
          reverse 
          required={true} 
          value={year} 
          onChange={year => {
            setYear(year);
            console.log(year);
          }}
          id={"year"}
          name={"year"}
        />
      </div>
    </div>
  );
};

export default DOB;

我使用的npm反应下拉日期，并遵循从他们的留档的例子。也许我用错了useState或Use效应钩子？也许有人与React和日期的经验可以帮助我解决这个问题。

Answer 1

这是我能做的最好的，而不需要改变你的代码。我添加了一个条件，仅当选择了所有三个日、月和年时才更新selectedDate状态。

您正在使用的库返回从索引-0开始的月份，因此我还增加了1，以便在formatDate方法中获得正确的月份号。

function App() {
    const [day, setDay] = useState('');
    const [month, setMonth] = useState('');
    const [year, setYear] = useState('');
    const [selectedDate, setSelectedDate] = useState('');

    const formatDate = (d, m, y) => {
        let day = d, month = (parseInt(m) + 1).toString(), year = y;
        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;
        return ([year, month, day].join('-'))
    }
    useEffect(() => {
        if (day && month && year) {
            setSelectedDate(formatDate(day, month, year));
        }
    }, [day, month, year]);

    const onDayChange = (day) => {
        setDay(day);
    };

    const onMonthChange = (month) => {
        setMonth(month);
    };

    const onYearChange = (year) => {
        setYear(year);
    };

    console.log('---selectedDate ----', selectedDate);

    return (
        <div className="dob__main">
            <div>
                <DayPicker
                    defaultValue={"DD"}
                    year={year}
                    month={month}
                    endYearGiven
                    value={day}
                    onChange={onDayChange}
                    id={"day"}
                    name={"day"}
                />
                <MonthPicker
                    defaultValue={"MM"}
                    endYearGiven
                    year={year}
                    value={month}
                    onChange={onMonthChange}
                    id={"month"}
                    name={"month"}
                />
                <YearPicker
                    defaultValue={"YYYY"}
                    start={1901}
                    end={new Date().getFullYear()}
                    reverse
                    value={year}
                    onChange={onYearChange}
                    id={"year"}
                    name={"year"}
                />
            </div>
        </div>
    );
};

export default App;