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

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={...}
/>
JavaScript

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

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

npm create-react-app appname
JavaScript

步骤2: 在创建项目文件夹(即appname)后,使用以下命令移动到该文件夹:

cd appname
JavaScript

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

npm install @blueprintjs/core
JavaScript

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

npm install @blueprintjs/datetime2
JavaScript

项目结构:

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

运行该应用程序的步骤:

按以下方式运行该项目:

npm start
JavaScript

示例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;
JavaScript

输出:

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;
JavaScript

输出:

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

参考: https://blueprintjs.com/docs/#datetime2/date-input2.date-formatting

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册