reactjs 是否有任何方法来自定义一年的文本或标签的一年选择器是使用React日期选择库创建

wgx48brx  于 2023-05-06  发布在  React
关注(0)|答案(1)|浏览(214)

我的要求是创建一个财务日期选择器,其中有一个年标签或年文本为20-21而不是2020等。我已经通过了React日期选择器文档,但我还没有找到任何 prop 来更改年份。
下面是我的年选择器代码。

<DatePicker
  showIcon
  selected={selectedDate}
  onChange={handleYearChange}
  dateFormat="yyyy"
  showYearPicker
  className={classes.datepicker}
  placeholderText="yyyy"
  renderCustomHeader={renderCustomYearHeader}
  ref={calRef}
/>

Thanks in Advance..

4xy9mtcn

4xy9mtcn1#

虽然在react date picker library中没有直接使用prop来更改年份标签或文本的方法,但您可以将自定义头组件传递给renderCustomHeader prop。
在这个自定义组件中,您可以访问所显示的日期,从中可以获得年份,然后对其应用任何修改。
示例:

const CustomYearHeader = ({ date, decreaseYear, increaseYear }) => {
  const year = new Date(date).getFullYear() % 100;
  return (
    <div>
      <button onClick={decreaseYear}>{"<"}</button>
      <span>{year}</span>
      <button onClick={increaseYear}>{">"}</button>
    </div>
  );
};

const FinancialDatePicker = ({ selectedDate, handleYearChange }) => {
  return (
    <DatePicker
      selected={selectedDate}
      onChange={handleYearChange}
      dateFormat="yyyy"
      showYearPicker
      renderCustomHeader={CustomYearHeader}
      placeholderText="yyyy"
    />
  );
};

相关问题