unable to display only year in react datepicker

Question

Here is my below custom component 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

Does this answer your question? [React Antd DatePicker with custom format for input and for display](https://stackoverflow.com/questions/59495987/react-antd-datepicker-with-custom-format-for-input-and-for-display) — Daniel Brose, May 07 '20 at 05:15
Your code should work fine. Please create a [small demo](https://stackoverflow.com/help/minimal-reproducible-example) for this using [codesandbox.io](https://codesandbox.io/s/new) to show the issue happening. — palaѕн, May 07 '20 at 05:19
https://codesandbox.io/s/eloquent-gauss-envsb?file=/src/App.js — Abhishek Konnur, May 07 '20 at 05:39
your sample works fine, the returned value was in YYYY format. What would you expect this to be ? — Duc Hong, May 07 '20 at 05:43
sorry, I see what you meant. Maybe you only want the Year Picker ? There might be something wrong with the lib itself, the example on its site works but yours doesn't — Duc Hong, May 07 '20 at 05:54
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, May 07 '20 at 06:11
The `YearPicker` function is added yesterday (2020/5/6), so it is normal to have some bugs. I have tired on their demo, it's ok, but when deploy on codepen, I got the same problem. — Kuo-hsuan Hsu, May 07 '20 at 06:22
Great news, author has updated this patch, you should upgrade your Datepicker to version 2.15.0 — Duc Hong, May 07 '20 at 10:20

score 0 · Answer 1 · answered Apr 17 '22 at 06:57

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 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
            />
      }
    }

Rekha Rajasekaran · Answer 2 · 2022-10-17T12:13:17.757

0

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

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

edited Oct 17 '22 at 12:13

answered Oct 11 '22 at 06:46

Rekha Rajasekaran

3
3

This library is rather outdated. I'd suggest using something more recent of accepting year as a textbox with validation instead. – Andrii Oct 14 '22 at 22:36
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/32915278) – Vojin Purić Oct 15 '22 at 07:53
@Andrii & @Vojin Purić thank you for all your valuable comments. Yes, the react-year-picker library is outdated. We can use `react-datetime` library with dateFormat="YYYY" in HTML tag. Like this, – Rekha Rajasekaran Oct 17 '22 at 12:10

score 0 · Answer 3 · answered Apr 28 '23 at 10:05

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.com/edit/react-tfzvsm?file=src%2Fdate-picker.jsx

unable to display only year in react datepicker

3 Answers3