npm 包 react-day-picker-input 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，日期选择是一个不可避免的需求。react-day-picker-input 是一个基于 React 的日期选择库，可以方便地集成到 React 项目中使用。本文将介绍如何使用 react-day-picker-input 库，其中包括它的安装、基本使用、高级用法以及常用的 API。

安装

使用 npm 安装 react-day-picker-input：

npm install react-day-picker-input --save

如果你的项目使用的是 yarn，使用下列命令安装：

yarn add react-day-picker-input

基本使用

要使用 react-day-picker-input，首先需要导入库：

import DayPickerInput from 'react-day-picker/DayPickerInput'
import 'react-day-picker/lib/style.css'

然后，就可以在应用中使用 DayPickerInput 组件：

function App() {
  return (
    <div>
      <DayPickerInput />
    </div>
  )
}

以上代码会在页面上渲染出日期选择器，用户可以通过选择日期来进行交互。此时，日期选择器的样式不太友好，需要添加一些样式来美化它，样式的导入可以使用下列代码：

import 'react-day-picker/lib/style.css'

以上代码能够导入 react-day-picker 样式表，让日期选择器变得更加美观。

你也可以通过给 DayPickerInput 组件添加 props 来改变日期选择器的初始值和语言（locale）。

<DayPickerInput
  value={this.state.selectedDay}
  onDayChange={this.handleDayChange}
  dayPickerProps={{
    locale: 'zh-CN',
  }}
/>

当用户选择日期时，组件会触发 onDayChange 函数，我们可以在此函数中处理日期的变化。

handleDayChange = (selectedDay) => {
  this.setState({ selectedDay: selectedDay })
}

高级用法

配置日期格式

使用 formatDate 参数来指定日期格式：

const FORMAT = 'YYYY-MM-DD'

<DayPickerInput
  formatDate={formatDate}
  format={FORMAT}
  onDayChange={this.handleDayChange}
  placeholder={`${FORMAT.toLowerCase()}`}
/>

配置语言（locale）

支持多种语言，可以通过 localeUtils 和 locale 来实现国际化。

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

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

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

以上代码中，我们导入了 MomentLocaleUtils，该对象包含了一些关于日期的 API，支持多种语言、日期格式化和解析等功能。我们也导入了中国的语言包。把 locale 设为 'zh-cn' 即可开启中文语言支持。

范围选择

可以使用 DayPickerRangeController 来选择日期范围：

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

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

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

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

API

DayPickerInput 有多个 props 可以配置和控制：

value: 用于设置日期选择器的初始值。
dayPickerProps: 该对象包含了许多 DayPicker 组件的 props，详细信息可参考 DayPicker API。
format: 表示日期格式，此格式应该是 moment.js 支持的格式，通过它可以将日期对象格式化成字符串。
formatDate: 用于格式化日期对象，可使用自定义函数，例如 date => formatDate(date, "YYYY年MM月DD日")。
parseDate: 用于解析日期字符串，可使用自定义函数，例如 dateString => parseDate(dateString, "YYYY年MM月DD日")。
onDayChange: 当用户选择日期时将触发此函数，使用 date 属性来获取用户选择的日期。

示例代码

完整的示例代码：

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

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

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

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

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

结论

使用 react-day-picker-input 库非常简单，只需进行几行代码的配置，即可生成简洁明了的日期选择器，非常适用于初始化项目时使用。尤其是在做国际化时，这个库也能大大方便你的工作。上文所提到的 API，你也可以在编写过程中使用，来完成自己想要的日期时间控制。

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