javascript - unable to display only year in react datepicker - Stack Overflow

admin管理员组

文章数量:1435859

Here is my below custom ponent for datepicker with yyyy format

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

I am still able to see it mm/dd/yyyy format

Here is my below custom ponent for datepicker with yyyy format

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

I am still able to see it mm/dd/yyyy format

• javascript
• reactjs
• react-datepicker

Share Improve this question Follow asked May 7, 2020 at 5:10 Abhishek KonnurAbhishek Konnur 52911 gold badge1111 silver badges3939 bronze badges 12

• which <DatePicker /> lib you're using ? Can you share more about this ? – Duc Hong Commented May 7, 2020 at 5:13
• import DatePicker from "react-datepicker"; – Abhishek Konnur Commented May 7, 2020 at 5:14
• Does this answer your question? React Antd DatePicker with custom format for input and for display – Daniel Brose Commented May 7, 2020 at 5:15
• 1 I've just opened a bug report on the github. Hopefully this might be fixed soon. For the time being please bare with current Datepicker version – Duc Hong Commented May 7, 2020 at 6:11
• 1 Great news, author has updated this patch, you should upgrade your Datepicker to version 2.15.0 – Duc Hong Commented May 7, 2020 at 10:20

 |  Show 7 more ments

3 Answers 3

Sorted by: Reset to default 1

I solved it in this way. I used '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;

Find a working link here: https://stackblitz./edit/react-tfzvsm?file=src%2Fdate-picker.jsx

if i understand correctly You want it to be displayed for only a year, but what Displayed as "Thu Jan 01 1970 07:00:01 GMT+0700". You need to use .getFullYear() in onChange , this is the method I tried and it works.

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

There is a library called react-datetime.We can pick only year using this library. Install the library using this mand:npm i react-datetime

Reference:https://www.npmjs./package/react-datetime

本文标签： javascriptunable to display only year in react datepickerStack Overflow