npm 包 @bybox/react-datetime 使用教程-JavaScript中文网-JavaScript教程资源分享门户

#npm 包 @bybox/react-datetime 使用教程

##前言

在前端开发中，日期时间选择器是一个经常用到的控件，而@bybox/react-datetime则是在React中使用的日期时间选择器，具有方便、易用、灵活等特点，凭借其丰富的API和强大的功能，受到了越来越多开发者的青睐。本文将详细介绍@bybox/react-datetime的使用教程。

##安装

使用 npm 安装 @bybox/react-datetime 命令如下：

$ npm install @bybox/react-datetime --save

##使用

###引入

引入@bybox/react-datetime的方式如下：

import ReactDatetime from '@bybox/react-datetime';

###用法

以下是一个示例代码：

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

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

如上所示，我们在 render 函数中使用标签“ReactDatetime”，并传递了一个onChange事件。具有onChange事件的ReactDatetime可以让我们得到所选日期的实例。当@bybox/react-datetime 实例中的值发生变化时，onChange事件便会触发，同时由于我们在组件初始化时定义了钩子函数handleChange，handleChange函数将更新component state的currentDate值。

###API

@bybox/react-datetime 提供了一系列API而不限于：

####value：实例中当前的日期时间, 可以传递 moment.js, Date 这两种不同类型的值。可以用Moment、Date、String类型的值来设定初始值：

<ReactDatetime value={new Date()} />
<ReactDatetime value={moment()} /> // 使用 moment.js
<ReactDatetime value='2017-08-04' />

####defaultValue：

这个属性和value类似，不同的是用户可以修改默认时间，使用stringValue类型的值：

<ReactDatetime defaultValue='2017-08-04' />

####dateFormat：

格式化日期时间的格式，默认是月/日/年。系统自带可选的格式：

<ReactDatetime dateFormat='YYYY-MM-DD' />

####timeFormat

系统自带可选的格式, ['h:mm A', 'hh:mm A','HH:mm', 'h:mm:ss A', 'hh:mm:ss A', 'HH:mm:ss']

<ReactDatetime dateFormat='HH:mm' />

####locale：

应用程序的地区，见http://momentjs.com/docs/#/i18n/loading-into-browser/。

####inputProps：

React的properties传递到表单元素本身。也可以自定义或添加属性到 <input> 标签上。

eg:

<ReactDatetime inputProps={{ placeholder: 'Placeholder Text' }} />

###事件

@bybox/react-datetime 提供的事件不限于以下：

####onChange

在实例的值改变时触发该事件：

<ReactDatetime onChange={this.handleChange.bind(this)} />

####onBlur

失去焦点时触发该事件。

####onKeyDown

在用户键盘上按键时触发该事件。

<ReactDatetime onKeyDown={this.handleKeyDown.bind(this)} />

####onClick

当用户单击带有双击的datetime组件时触发此事件。

<ReactDatetime onClick={this.handleClick.bind(this)} />

####onClose

实例完成动画并关闭后触发此事件。

<ReactDatetime onClose={this.handleClose.bind(this)} />

####onSelect

在用户从下拉框中选择日期时触发该事件。

<ReactDatetime onSelect={this.handleSelect.bind(this)} />

###主题

你可以使用自己的CSS来定义你的日期时间选择器的视觉外观，也可以使用系统默认主题：

import '@bybox/react-datetime/css/react-datetime.css';

###完整示例

完整示例代码如下：

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

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

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

至此，我们介绍了使用@bybox/react-datetime的完整教程，希望对你有所帮助。

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