通过实例学习Reactjs日期选择器

日期选择器是网页的一个重要的表单元素，它用来向用户选择日期。

日期选择器包含一个输入文本框和显示在焦点输入控件上的叠加日历。它可以选择日期和时间。

用户可以使用文本框来选择日期。为什么需要日期选择器？

日期选择器有一些优点：

-强制或限制用户只接受有效的日期

• 手动输入用户日期容易出错，所以用日期选择器点击是非常顺利和简单的

• 还可以自定义添加今天的按钮。

• 用一些颜色对特定的日期进行风格化处理，例如，假日

• 还可以添加日期范围。

在这个例子中，了解如何在Reactjs应用程序中整合日期选择器npm库。

让我们开始吧!

创建一个新的React应用程序

现在让我们使用npx create-react-app cli命令创建一个具有文件夹结构的新react应用程序。

npx  create-react-app  react-datepicker-examples

这将创建反应项目的文件夹结构并安装所需的依赖。

进入应用程序的根文件夹，将 react-datepicker 安装到 react 应用程序中。

npm install react-datepicker --save

这将安装该依赖项，并在package.json中添加一个条目，如下所示

  "dependencies": {

    "react-datepicker": "^3.4.1",

  }

reactJs中的简单日期选择器

这是一个简单的日期选择器，将当前日期设置为一个状态对象

import React, { Component } from 'react';
import DatePicker from "react-datepicker";
class Simpledatepicker extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedDate: new Date(),
        }
    }
    onChangeEvent = event => {
        console.log(event);
        this.setState({ selectedDate: event });
    };

    render() {
        return (
            <div>
                <p> date picker Simple example </p>
                <DatePicker
                
                    selected={this.state.selectedDate}
                    onChange={this.onChangeEvent}
                />
            </div>
        );
    }
}

export default Simpledatepicker;

useState挂钩的功能组件

同样地，同样的类组件也可以使用功能组件和useState钩子来重写。这些组件也被称为功能组件。

react中的钩子为功能组件添加功能。这里useState钩子为其添加了状态。

 const [currentDate, setCurrentDate] = useState(new Date());

上面这行代码规定了两件事

• 当前日期被声明为useState钩子的一个参数，它是一个初始值
• currentDate是一个状态变量，它将被初始化为从useState返回的当前日期。
• setCurrentDate是一个更新状态变量的函数，这里是currentDate。

使用日期选择器组件所需的步骤：

• 在一个组件中导入日期选择器
• DatePicker里面的selected是组件中的选定日期。
• onChange是一个事件处理程序，当一个组件改变它的值时被调用。
• 它调用setCurrentDate来选择一个新的日期。

完整的组件代码：

import React, { useState } from 'react';
import DatePicker from "react-datepicker";

const Datepickerhooks = () => {
    const [currentDate, setCurrentDate] = useState(new Date());

    return (
        <div>
            <DatePicker selected={currentDate} onChange={date => setCurrentDate(date)} />

        </div>
    );
};

export default Datepickerhooks;

以及输出：

为日期选择器组件添加占位符

占位符是一个初始值，在选择日期值之前显示在输入框中。占位符是一个字符串，不是空的，选择的值应该是假值，如空或假。 请注意，占位符的值只在this.props.datevariable或this.state.variable值为假值时显示。

 <DatePicker
                    placeholder ="Please selecte Date of birth"
                    selected={this.state.selectedDate}
                    onChange={this.onChangeEvent}
/>

向组件显示时间选择器

默认情况下，日期选择器中不显示时间信息。

有showTimeInput选项显示当前时间+选择图标来改变时间，如下所示

<DatePicker showTimeInput selected={currentDate} onChange={date => setCurrentDate(date)} />

输出。

showTimeSelect属性将时间选择器组件添加到一个组件中。

时间将以30分钟的间隔显示，这些间隔可以用timeIntervals配置。

<DatePicker showTimeSelect selected={currentDate} onChange={date => setCurrentDate(date)} />

输出。

完整的示例代码。

import React, { useState } from 'react';
import DatePicker from "react-datepicker";

const DatepickerTimehooks = () => {
    const [currentDate, setCurrentDate] = useState(new Date());

    return (
        <div>
            <DatePicker showTimeInput
                timeFormat="HH:mm:ss"
                timeIntervals={15}
                timeCaption="time"
                showTimeSelect selected={currentDate} onChange={date => setCurrentDate(date)} />

        </div>
    );
};

export default DatepickerTimehooks;

timeFormat是在时间选择器上显示的时间格式。timeIntervals是在上面显示的时间间隔。timeCaption是在组件上显示的标题文本。

要显示时间选择器而不显示日期选择器。

在一个组件中设置日期格式为YYY/mmm/dd

默认情况下，日期选择器显示日期dd/mm/yyyy 格式。

如果需要自定义的日期格式，那么就要使用dateFormat选项。

 <div>
    <DatePicker
        dateFormat="yyyy/MMM/dd"
        selected={currentDate} onChange={date => setCurrentDate(date)} />
</div>

输出：

在日期选择器组件中添加CSS样式或类名

className属性为日期选择器中的输入框添加样式。它的值是在全局或组件级的CSS类中声明的CSS类名。

import React, { useState } from 'react';
import DatePicker from "react-datepicker";

const DatepickerComponent = () => {
    const [currentDate, setCurrentDate] = useState(new Date());

    return (
        <div>
            <DatePicker
                dateFormat="yyyy/MM/dd"

                className="inputStyles"
                selected={currentDate} onChange={date => setCurrentDate(date)} />

        </div>
    );
};

export default DatepickerComponent;

在App.css中声明了inputStyles

.inputStyles {
    outline: none;
    border-radius: 5px;
    border: 1px solid blue;
    font-weight: 700;
}