React.js蓝图日期输入2日期格式化

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

在本文中，我们将讨论React.js蓝图日期输入2日期格式化。DateInput2组件是一种InputGroup类型，允许用户根据选择选择日期和时区。当焦点在此组件上时，它将在Popover2中显示一个DatePicker。在蓝图中，我们还可以使用两个属性来格式化日期： formatDate() 和 parseDate() 。

React.js蓝图DateInput2日期格式化Props：

formatDate: 它是一个将JavaScript Date渲染为字符串的函数。formatDate属性接收当前日期，并返回其区域设置字符串表示形式。它不能使用户以文本输入的形式输入日期。
parseDate: 它是一个回调函数，用于将用户输入的文本反序列化为JavaScript Date对象。parseDate属性接收用户输入的文本，然后将其转换为Date对象，并成为DateInput2组件的下一个值。

语法：

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

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

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

npm create-react-app appname

步骤2： 在创建项目文件夹（即appname）后，使用以下命令移动到该文件夹：

cd appname

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

npm install @blueprintjs/core

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

npm install @blueprintjs/datetime2

项目结构:

React.js蓝图日期输入2日期格式化

运行该应用程序的步骤：

按以下方式运行该项目：

npm start

示例1： 下面的示例演示了DateInput2组件的formatDate属性的用法。

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(), []); 
  
    return ( 
        <center> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2> 
                    ReactJs Blueprint DateInput2 Date Formatting 
                </h2> 
            </div> 
            <div style={{ width: 500 }}> 
                <DateInput2 
                    formatDate={formatDate} 
                    onChange={handleChange} 
                    placeholder="MM/DD/YYYY"
                    value={dateVal} 
                /> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出:

React.js蓝图日期输入2日期格式化

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 Date Formatting 
                </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蓝图日期输入2日期格式化