React.js蓝图日期输入属性

蓝图是一个基于React的Web UI工具包。该库非常优化，用于构建复杂和数据密集的桌面应用程序界面。

在本文中，我们将讨论React.js蓝图DateInput组件的属性。DateInput组件是一种InputGroup类型，允许用户根据自己的选择选择日期和时区。当获得焦点时，它在Popover中显示一个DatePicker。

React.js蓝图DateInput属性:

canClearSelection: 允许用户通过点击当前选择的日期来清除选择。
className: 表示要传递给子元素的一个以空格分隔的类名列表。
clearButtonText: 表示日期选择器动作栏中重置按钮的文本。
closeOnSelection: 标志着当选择日期时，日历弹出窗口是否应该关闭。
dayPickerProps: 表示要传递给ReactDayPicker的属性。
defaultValue: 表示在组件未受控时使用的默认日期。
disabled: 表示日期输入是否是非交互式的。
disableTimezoneSelect: 该属性用于指示是否禁用时区选择。
fill: 该属性用于指示组件是否应该占据其容器的全部宽度。
footerElement: 该属性用于添加一个额外的元素，在日期选择器下方显示。
formatDate: 该属性是一个将JavaScript Date转换为字符串的函数。
highlightCurrentDay: 该属性用于指示是否应该在日历中高亮显示当前日期。
initialMonth: 该属性用于指定日历显示的初始月份。
inputProps: 该属性用于指定要传递给输入组件的props。
invalidDateMessage： 表示选择的日期无效时显示的错误消息。
locale： 表示区域设置名称。
localeUtils： 表示提供国际化支持的函数集合。
maxDate： 表示用户可以选择的最新日期。
minDate： 表示用户可以选择的最早日期。
modifiers： 表示确定哪些修饰符类应用于哪些日期的函数集合。
onChange： 当用户通过DatePicker选择新的有效日期或在输入框中键入时触发的回调函数。
onError: 这是一个回调函数，当用户在搜索引擎中输入错误的日期时触发。
outOfRangeMessage: 它表示当选择的日期超出范围时要显示的错误消息。
parseDate: 这是一个回调函数，用于将用户输入的文本反序列化为JavaScript Date对象。
placeholder: 它表示在空输入字段中显示的占位符文本。
popoverProps: 它表示要传递给Popover组件的props。
reverseMonthAndYearMenus: 如果设置为true，则月份菜单将出现在年份菜单的左侧。
rightElement:
渲染在输入框右侧的元素。
快捷键： 指示是否显示快速选择日期的快捷键。
showActionsBar: 用于指示是否在日历下方显示显示“今天”和“清除”按钮的底部工具栏。
timePickerProps: 用于进一步配置出现在日历下方的时间选择器。
timePrecision: 指示与日历配套的时间选择的精确度。
todayButtonText: 指示日期选择器操作栏中“今天”按钮的文本。
value: 用于指示当前选定的日期。

语法：

<DateInput
      value={...}
      formatDate={...}
      ...
/>

创建React应用并安装模块:

步骤1: 使用以下命令创建React应用：

npm create-react-app appname

步骤2： 创建您的项目文件夹，例如appname，然后使用以下命令进入它：

cd appname

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需模块：

npm install @blueprintjs/core

步骤4： 安装@blueprintjs日期时间组件。

npm install @blueprintjs/datetime

项目结构：

React.js蓝图日期输入属性

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

npm start

示例1： 下面的示例演示了DateInput组件的formatDate，placeholder，onChange和value属性的用法。

import React, { useCallback, useState } from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import "@blueprintjs/datetime/lib/css/blueprint-datetime.css"; 
import { DateInput } from "@blueprintjs/datetime"; 
  
function App() { 
    const [dateVal, setDateVal] = useState(null); 
    const handleChange = useCallback(setDateVal, []); 
    const formatDate = useCallback((Date) =>  
       Date.toLocaleString(), []); 
  
    return ( 
        <center> 
            <div style={{ textAlign: "center",  
                         color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>ReactJs Blueprint DateInput Props</h2> 
            </div> 
            <div style={{ width: 500 }}> 
                <DateInput 
                    formatDate={formatDate} 
                    onChange={handleChange} 
                    placeholder="mm/dd/yyyy"
                    value={dateVal} 
                /> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React.js蓝图日期输入属性

示例2： 下面的示例演示了DateInput组件的parseDate，shortcuts和todayButtonText属性的用法。

import React, { useCallback, useState } from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import "@blueprintjs/datetime/lib/css/blueprint-datetime.css"; 
import { DateInput } from "@blueprintjs/datetime"; 
  
function App() { 
    const [dateVal, setDateVal] = useState(null); 
    const handleChange = useCallback(setDateVal, []); 
    const formatDate = useCallback((Date) 
                    => Date.toLocaleString(), []); 
  
    return ( 
        <center> 
            <div style={{ textAlign: "center",  
                         color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>ReactJs Blueprint DateInput Props</h2> 
            </div> 
            <div style={{ width: 500 }}> 
                <DateInput 
                    parseDate={str => new Date(str)} 
                    formatDate={formatDate} 
                    onChange={handleChange} 
                    placeholder="mm/dd/yyyy"
                    value={dateVal} 
                    shortcuts 
                    todayButtonText="Today"
                /> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React.js蓝图日期输入属性