Uso de React Suite DatePicker Un toque

React Suite es una biblioteca front-end de código abierto creada sobre el marco de React que consta de muchos componentes de React que facilitan a los desarrolladores la creación de excelentes interfaces de usuario. En este artículo, veremos React Suite DatePicker Usage One tap .

El componente DatePicker se utiliza para tomar la entrada de fecha y hora de los usuarios. Cuando el atributo oneTap se establece en el elemento DatePicker, la fecha/hora se selecciona tan pronto como el usuario hace clic en la fecha/hora.

Componentes de tamaño de uso de React Suite DatePicker:

• DatePicker: el componente DatePicker se utiliza para seleccionar o ingresar la fecha y/o la hora.

React Suite DatePicker Uso Tamaño Atributos/Accesorios:

• oneTap: este atributo se usa en el componente DatePicker para seleccionar la fecha/hora tan pronto como el usuario hace clic en la fecha/hora. No habrá botón de confirmación.
• marcador de posición: este atributo se utiliza para anular el marcador de posición predeterminado de la entrada de fecha/hora.
• tamaño: este atributo se utiliza en el componente DatePicker para especificar su tamaño. Toma cuatro valores: “lg”, “md”, “sm” y “xs”.

Creación de la aplicación React e instalación de React Suite en el proyecto:

Paso 1: Cree la aplicación React usando el comando npx :

npx create-react-app foldername

Paso 2: después de crear la carpeta del proyecto, acceda a ella con el comando cd:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo rsuite para que podamos usar el componente DatePicker usando el siguiente comando:

npm install rsuite

Después de seguir los pasos anteriores, la estructura del proyecto se verá así:

Estructura del proyecto

Veamos algunos ejemplos para entender cómo usar el atributo/prop de React Suite DatePicker oneTap.

Ejemplo 1: ahora reemplace el código en el archivo App.js con el código a continuación. En este ejemplo, comparamos el componente DatePicker con el atributo oneTap con el componente DatePicker normal.

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DatePicker } from "rsuite";
  
function App() {
    const datepickerStyle = { marginTop: "25px" };
  
    return (
        <div className="App" style={{
            display: "flex", alignItems: "center",
            flexDirection: "column"
        }}>
            <header style={{
                textAlign: "center", display: "block",
                marginBottom: "30px"
            }}>
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3>
                <h5>React Suite DatePicker One Tap</h5>
            </header>
  
            <DatePicker style={datepickerStyle} oneTap
                placeholder="DatePicker with oneTap Attribute" />
            <DatePicker style={datepickerStyle}
                placeholder=" Default DatePicker" />
        </div>
    );
}
  
export default App;

Ejecute la aplicación: ejecute su aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida : vaya a http://localhost:3000/ en su navegador para ver la salida.

 

Ejemplo 2: Este ejemplo ilustra el uso del atributo oneTap del componente DatePicker con variación de tamaño.

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DatePicker } from "rsuite";
  
function App() {
    const datepickerStyle = { marginTop: "25px" };
  
    return (
        <div className="App" style={{
            display: "flex", alignItems: "center",
            flexDirection: "column"
        }}>
            <header style={{
                textAlign: "center", display: "block",
                marginBottom: "30px"
            }}>
                <h3 style={{ color: "green" }}>
                    GeeksforGeeks
                </h3>
                <h5>
                    React Suite DatePicker One 
                    Tap with Size Variation
                </h5>
            </header>
  
            <DatePicker style={datepickerStyle} oneTap
                placeholder="Small DatePicker with oneTap Attribute" />
            <DatePicker style={datepickerStyle} oneTap
                placeholder="Large DatePicker with oneTap Attribute" />
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/date-picker/#one-tap