React.js蓝图DateInput2属性

蓝图（Blueprint） 是基于React的Web用户界面工具包。该库非常优化，用于构建复杂且数据密集的桌面应用程序界面非常流行。

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

React.js蓝图DateInput2的属性：

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

语法：

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

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

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

“`javascriptnpm create-react-app appname

<pre><code class="line-numbers">**步骤2：** 创建您的项目文件夹，即appname，在终端中使用以下命令移动到该文件夹：
“`javascript
cd appname

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

npm install @blueprintjs/core

步骤4： 安装 @blueprintjs datetime2 组件。

npm install @blueprintjs/datetime2

项目结构：

React.js蓝图DateInput2属性

步骤5： 按以下方式运行项目：

npm start

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

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

输出：

React.js蓝图DateInput2属性

示例2： 以下示例演示了DateInput2组件的shortcuts和highlightCurrentDay属性的用法。

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

输出：

React.js蓝图DateInput2属性