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

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

在本文中，我们将讨论React.js蓝图中的日期输入日期格式化。日期输入组件是一种InputGroup类型，允许用户按自己的选择选择日期和时区。当聚焦时，它在一个Popover内显示一个DatePicker。在蓝图中，我们还可以使用两个props来格式化日期： formatDate() 和 parseDate() 。

语法：

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

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

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

npm create-react-app appname

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

cd appname

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

npm install @blueprintjs/core

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

npm install @blueprintjs/datetime

项目结构：

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

运行应用程序的步骤：

按以下步骤运行项目：

npm start

示例1： 下面的示例演示了使用 formatDate 属性的DateInput组件的用法。formatDate属性接收当前的日期并返回其语言环境的字符串表示。它不能让用户以文本输入的方式输入日期。

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 Date Formatting</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属性的用法。parseDate属性接收用户输入的文本，然后将其转换为Date对象，并成为DateInput组件的下一个值。

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(), []); 
    const parseDate = useCallback((string) =>  
        new Date(string), []); 
  
    return ( 
        <center> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>ReactJs Blueprint DateInput Date Formatting</h2> 
            </div> 
            <div style={{ width: 500 }}> 
                <DateInput 
                    formatDate={formatDate} 
                    parseDate={parseDate} 
                    onChange={handleChange} 
                    placeholder="mm/dd/yyyy"
                    value={dateVal} 
                /> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

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