使用 react-day-picker 遇到的问题及解决方案-JavaScript中文网-JavaScript教程资源分享门户

moment 是一个非常优秀的日期处理库。然而，它越来越被 date-fns 所替代。

不过，我们依旧可以使用一些 react-day-picker 依赖 moment.js 的代码。在这篇教程中，我们会讨论使用 react-day-picker 时遇到的问题以及解决方案。

安装 react-day-picker

首先，我们需要使用 npm 安装 react-day-picker。

npm install react-day-picker

开始使用

react-day-picker 是一个简单易用的日历组件。我们只需要在页面中引入 react-day-picker 和 moment.js（如果需要）即可开始使用。

下面是一个简单的示例：

-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------------
------ ----------------- ---- --------------------------
------ ----------------------

------ ------- ----- ---- ------- --------------- -
  ------------------ -
    -------------
    ---------- - -
      ------------ ---------
    --
  -

  -------------- - ----- - -------- -- -- -
    ---------------
      ------------ -------- - --------- - ---
    ---
  --

  -------- -
    ------ -
      ----------
        -------------------------------
        ----------------
        -------------------------------------
        --------------------------------
      --
    --
  -
-

遇到的问题

我们不能使用 MomentLocaleUtils

MomentLocaleUtils 最近已经被移除了，并且在 v9 之后将完全移出，因为 Moment.js 这个库已经停止开发了。

为了更好地支持国际化，我们应该使用 Day.js 和 @dayjs/locale。

我们无法选择今天以后的日期

在上面的代码中，我们只能选择今天及今天以前的日期。如果希望能够选择今天以后的日期，可以使用 min 和 max 属性。

<DayPicker
  localeUtils={DayjsLocaleUtils}
  locale={"zh-cn"}
  minDate={dayjs().toDate()}
  selectedDays={this.state.selectedDay}
  onDayClick={this.handleDayClick}
/>

我们无法使用 Moment.js

如前所述，Moment.js 已经被取代。因此，react-day-picker 也应该尽量使用较新的库。

我们无法使用日期格式化

在实际项目中，我们通常需要将日期格式化为对应的字符串。但是 react-day-picker 在这方面并不强大，我们可以使用其他库来进行日期格式化。

-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------------
------ ----- ---- --------
------ ---------------------

------ ------- ----- ---- ------- --------------- -
  ------------------ -
    -------------
    ---------- - -
      ------------ ---------
    --
  -

  -------------- - ----- - -------- -- -- -
    ---------------
      ------------ -------- - --------- - ---
    ---
  --

  -------- -
    ----- ---------- - ---------------------------------------------------
    ------ -
      -----
        ----------
          ----------------
          --------------------------
          -------------------------------------
          --------------------------------
        --
        ----------------------- -- ------------------------
      ------
    --
  -
-

以上就是使用 react-day-picker 遇到的问题及解决方案。我们应该避免使用 Moment.js，同时使用 Day.js 和 @dayjs/locale 以及自定义日期格式化方法。这样，我们才能更好地使用 react-day-picker。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/79389

使用 react-day-picker 遇到的问题及解决方案