react-day-picker - 每天显示 2 个日历（格鲁吉亚语和回历）

Question

如何使用 react-day-picker 在每一天显示格鲁吉亚和回历日？目标是这样的

Answer 1

其实解决方法很简单，我就是赶时间。如果您使用react-day- picker，您可以利用 renderDay 属性来计算回历日期并自定义每一天的单元格。

这是一个工作示例

import React from "react";
import ReactDOM from "react-dom";
import DayPicker from "react-day-picker";
import hijriDate from "hijrah-date";

import "react-day-picker/lib/style.css";
import "./styles.css";

const renderDay = day => {
  const date = day.getDate();
  const hijDate = new hijriDate(day);
  const d = hijDate.getDate();

  return (
    <div>
      <span>{date}</span>
      <br />
      <small>{d}</small>
    </div>
  );
};
function App() {
  return (
    <div className="App">
      <DayPicker renderDay={renderDay} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);