reactjs 无法在react datepicker中仅显示年份

czq61nw1  于 2023-04-29  发布在  React
关注(0)|答案(3)|浏览(187)

这里是我下面的自定义组件与yyyy格式的日期选择器

return (
      <DatePickerWrapper disable={disable} >
        <DatePicker
          name={this.props.name}
          selected={this.state.startDate}
          onChange={this.handleChange}
          onBlur={this.handleBlur}
          showYearPicker
          dateFormat={"yyyy"}
        />
      </DatePickerWrapper>
    );

我仍然可以看到它的mm/dd/yyyy格式

vdzxcuhz

vdzxcuhz1#

如果我理解正确的话,你希望它只显示一年,但显示为“Thu Jan 01 1970 07:00:01 GMT+0700”。你需要使用。在onChange中使用getFullYear(),这是我尝试过的方法,它很有效。

import { useState } from "react";
    import DatePicker from "react-datepicker";
    
    const [savedate, setSavedate] = useState();
    
    const <your component> = () => {
    
      return() {
            <DatePicker
               id="DatePicker"
               type="string"
               className="text-primary text-center"
               selected={birthYear}
               onChange={(date) => setSavedate(date.getFullYear())}
               showYearPicker
               dateFormat="yyyy"
               yearItemNumber={9}
               required
            />
      }
    }
d7v8vwbk

d7v8vwbk2#

有一个名为react-datetime的库。我们只能用这个图书馆选年份。使用以下命令安装库:npm i react-datetime
参考:https://www.npmjs.com/package/react-datetime

p4rjhz4m

p4rjhz4m3#

我是这样解决的。我使用了'react-datepicker' v4。11.0.

import moment from 'moment';
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';

const DatePickerComponent = () => {
  const [startDate, setStartDate] = useState(1659312000000);

  const year = moment(startDate).format('yyyy');

  return (
    <div>
      <h1>Date Picker</h1>
      <p>Selected year: {year}</p>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        showYearPicker
        dateFormat="yyyy"
      />
    </div>
  );
};

export default DatePickerComponent;

在这里找到工作链接:https://stackblitz.com/edit/react-tfzvsm?file=src%2Fdate-picker.jsx

相关问题