ReactJS 蓝图日期输入组件

BlueprintJS 是一个基于 React 的 Web UI 工具包。该库非常适合构建用于桌面应用程序的复杂数据密集型接口。 DateInput组件帮助用户输入日期作为输入。我们可以在 ReactJS 中使用以下方法来使用 ReactJS Blueprint DateInput 组件。

日期输入道具：

canClearSelection：它允许用户通过单击当前选定的日期来清除选择。
className：用于表示以空格分隔的类名列表，以传递给子元素。
clearButtonText：用于表示日期选择器操作栏中重置按钮的文本。
closeOnSelection：用于指示选择日期时是否应关闭日历弹出框。
dayPickerProps：用于表示要传递给ReactDayPicker的 props。
defaultVale：用于表示不受控制时在组件中使用的默认日期。
disabled：用于指示日期输入是否是非交互的。
fill：用于指示组件是否应该占据其容器的整个宽度。
formatDate：这是一个将 JavaScript 日期渲染为字符串的函数。
highlightCurrentDay：用于指示当前日期是否应在日历中突出显示。
initialMonth：用于表示日历显示的初始月份。
inputProps：用于表示要传递给输入组的道具。
invalidDateMessage：用于表示选择的日期无效时显示的错误信息。
locale：用于表示语言环境名称。
localeUtils：用于表示提供国际化支持的函数集合。
maxDate：用于表示用户可以选择的最晚日期。
minDate：用于表示用户可以选择的最早日期。
修饰符：用于表示确定哪些修饰符类应用于哪些日期的函数集合。
onChange：这是一个回调函数，当用户通过 DatePicker 或通过输入输入选择一个新的有效日期时触发。
onError：这是一个回调函数，当用户输入完一个新的日期并且该日期导致错误状态时触发。
outOfRangeMessage：用于表示选择的日期超出范围时显示的错误消息。
parseDate：将用户输入文本反序列化为 JavaScript Date 对象的回调函数。
占位符：用于表示要在空输入字段中显示的占位符文本。
popoverProps：用于表示要传递给 Popover 的 props。
reverseMonthAndYearMenus：如果设置为 true，月份菜单将出现在年份菜单的左侧。
rightElement：用于表示要在输入右侧呈现的元素。
快捷方式：用于指示是否显示快速选择日期的快捷方式。
showActionsBar：用于指示显示Today和Clear按钮的底栏是否应显示在日历下方。
timePickerProps：用于进一步配置出现在日历下方的TimePicker 。
timePrecision：用于表示日历附带的时间选择的精度。
todayButtonText ：用于表示日期选择器操作栏中今天按钮的文本。
value：用于表示当前选择的日期。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令：
```
npm install @blueprintjs/core
npm install @blueprintjs/datetime
```

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
import '@blueprintjs/core/lib/css/blueprint.css';
import { DateInput } from "@blueprintjs/datetime";
  
function App() {
    return (
        
            ReactJS Blueprint DateInput Component
             date.toLocaleString()}
                parseDate={str => new Date(str)}
                placeholder={"M/D/YYYY"}
            />
        
    );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://blueprintjs.com/docs/#datetime/dateinput