React Suite DatePicker 使用禁用和只读

React Suite 是一个React组件库，具有合理的UI设计和友好的开发经验。它支持所有主流浏览器。它提供了React的预构建组件，可以在任何Web应用中轻松使用。

在这篇文章中，我们将学习 React Suite DatePicker 禁用和只读 。 DatePicker 用于快速选择日期或时间。 DatePicker 可以被禁用，并且还可以作为只读组件使用。

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

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

npx create-react-app foldername

步骤2： 创建您的项目文件夹，即文件夹名称，在使用以下命令切换到该文件夹：

cd foldername

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

npm install @mui/material

项目结构： 它将如下所示。

React Suite DatePicker 使用禁用和只读

示例1： 下面的示例演示了不同类型的禁用的日期选择器组件。现在在App.js文件中写下以下代码。这里，App是我们的默认组件，我们在这里编写了我们的代码：

App.js

import "rsuite/dist/rsuite.min.css"; 
import { DatePicker } from "rsuite"; 
import isBefore from 'date-fns/isBefore'; 
  
export default function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center" }}> 
                <h2>GeeksforGeeks</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite DatePicker Disabled and Readonly 
                </h4> 
            </div> 
            <div style={{ padding: 20, textAlign: "center" }}> 
                <div> 
                    <label>Disabled: </label> 
                    <DatePicker disabled style={{ width: 200 }} /> 
                    <br /> 
                    <label>Disabled date: </label> 
                    <DatePicker disabledDate={date =>  
                        isBefore(date, new Date())}  
                        style={{ width: 200 }} /> 
                    <br /> 
                    <label>Disabled month: </label> 
                    <DatePicker 
                        disabledDate={date =>  
                            isBefore(date, new Date())} 
                        format="yyyy-MM"
                        style={{ width: 200 }} 
                    /> 
                    <br /> 
                    <label>Disabled time: </label> 
                    <DatePicker 
                        format="HH:mm:ss"
                        ranges={[]} 
                        defaultValue={new Date 
                            ('2017-12-12 09:15:30')} 
                        disabledHours= 
                            {hour => hour < 8 || hour > 18} 
                        disabledMinutes={minute =>  
                            minute % 15 !== 0} 
                        disabledSeconds={second =>  
                            second % 30 !== 0} 
                        style={{ width: 200 }} 
                    /> 
                </div> 
            </div> 
        </div> 
    ); 
}

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

npm start

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

React Suite DatePicker 使用禁用和只读

示例2： 下面的示例演示了只读的日期选择器组件。将您的App.js更改为如下所示。

App.js

import "rsuite/dist/rsuite.min.css"; 
import { DatePicker } from "rsuite"; 
  
export default function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center" }}> 
                <h2>GeeksforGeeks</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite DatePicker Disabled and Readonly 
                </h4> 
            </div> 
            <div style={{ padding: 20, textAlign: "center" }}> 
                <div> 
                    <label>Read only: </label> 
                    <DatePicker readOnly defaultValue= 
                        {new Date()} style={{ width: 200 }} /> 
                </div> 
            </div> 
        </div> 
    ); 
}

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