React.js 蓝图日期输入2

在本文中，我们将学习蓝图.js库提供的 日期输入2组件 。BlueprintJS是一个基于React的用于Web的UI工具包。它是用TypeScript编写的。这个库非常优化，也很受欢迎，用于构建在现代Web浏览器中运行的复杂和数据密集的桌面应用程序的界面。

日期输入2 组件会在聚焦时渲染一个 InputGroup 组件，并在其中显示一个 DatePicker 组件，位于 Popover2 组件内。根据传递的属性，它还会选择性地在InputGroup的右侧显示一个 TimezoneSelect 组件，允许用户更改所选日期的时区。

日期输入2属性：

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

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

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

npx create-react-app foldername

步骤2： 在创建项目文件夹（如文件夹名称）后，使用以下命令进入该文件夹：

cd foldername

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

npm install @blueprintjs/core
npm install @blueprint/datetime @blueprintjs/datetime2

项目结构： 它将会像下面一样。

React.js 蓝图日期输入2

示例1： 在这个示例中，我们将尝试创建一个简单的日期选择器应用程序，使用BlueprintJS提供的DateInput2组件来选择日期和时间。

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

import { DateInput2 } from "@blueprintjs/datetime2"; 
import { useCallback, useState } from "react"; 
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css'; 
import '@blueprintjs/core/lib/css/blueprint.css'; 
  
export default function App() { 
    const [dateValue, setDateValue] = useState(null); 
    const handleChange = useCallback(setDateValue, []); 
    const formatDate = useCallback((date) => date.toLocaleString()); 
    const parseDate = useCallback((str) => new Date(str)); 
  
    return ( 
        <div style={{ 
            display: 'block', width: 400, padding: 30 
        }}> 
            <h3>ReactJS blueprint DateInput2 component</h3> 
            <DateInput2 
                formatDate={formatDate} 
                onChange={handleChange} 
                parseDate={parseDate} 
                placeholder="M/D/YYYY"
                value={dateValue} 
            /> 
        </div> 
    ); 
}

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

npm start

输出： 现在打开你的浏览器并进入 http://localhost:3000/，你将看到以下输出：

React.js 蓝图日期输入2

示例2： 在这个示例中，我们将添加一个时区选择下拉菜单。此外，在这个示例中，由于我们使用了 TimePrecision 对象，请同时安装 @blueprint/datetime 库。

import { DateInput2 } from "@blueprintjs/datetime2"; 
import { useCallback, useState } from "react"; 
import { TimePrecision } from "@blueprintjs/datetime"; 
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css'; 
import '@blueprintjs/core/lib/css/blueprint.css'; 
import { Tag } from "@blueprintjs/core"; 
  
export default function App() { 
    const [dateValue, setDateValue] = useState(null); 
    const handleChange = (date) => { 
        setDateValue(date) 
    } 
    const formatDate = useCallback((date) => date.toLocaleString()); 
    const parseDate = useCallback((str) => new Date(str)); 
  
    return ( 
        <div style={{ 
            display: 'block', width: 400, padding: 30 
        }}> 
            <h3>ReactJS blueprint DateInput2 component</h3> 
            <DateInput2 
                formatDate={formatDate} 
                onChange={handleChange} 
                parseDate={parseDate} 
                placeholder="M/D/YYYY"
                value={dateValue} 
                showTimezoneSelect={true} 
                timePrecision={TimePrecision.MINUTE} 
            /> 
            {dateValue == null ? 
                <Tag minimal={true}>no date</Tag> : 
                <Tag intent="primary">{dateValue}</Tag>} 
        </div> 
    ); 
}

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