Ant design 3 Year picker selected value not display

Question

Im using react type script project for ant design3 date picker, they are not provided year picker and i got a some solution and is it here mode="year", then year picker is working but cant bind the value , selected year not display. any one know some solution for this?

stack blitz here

Thanks

code here

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { DatePicker } from 'antd';

const { MonthPicker, RangePicker, WeekPicker, } = DatePicker;

function onChange(date, dateString) {
  console.log(date, dateString);
}

ReactDOM.render(
  <div>
    <DatePicker onChange={onChange} mode="year" placeholder="Select year"/>
    <br />
        <br />
   

  </div>,
  document.getElementById('container'),
);

Answer 1

Are you using a different version of antd? This demo is working correctly. click here.

  <DatePicker onChange={onChange} picker="year" />

Answer 2

Here's one of FAQ on antd version 3

When I set mode to DatePicker/RangePicker, I cannot select year or month anymore?

In a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add mode to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won't close now.

Like the explaination here, that is because do not equal to YearPicker, do not equal to MonthRangePicker either. The mode property was added to support showing time picker panel in DatePicker in antd 3.0, which simply control the displayed panel and won't change the original date picking behavior of DatePicker/RangePicker (for instance you still need to click date cell to finish selection in a DatePicker, whatever the mode is).

And here is one of the workaround

You can refer to this article or this article, using mode and onPanelChange to encapsulate a YearPicker or MonthRangePicker for your needs. Or you can wait for our [email protected], in which we are planing to add more XxxPickers for those requirments.

Seems that you can use the onPanelChange to get the value

<Datepicker mode="year" onPanelChange={(value) => console.log(value)} />

check working code here stackblitz