Bloque de uso de React Suite DatePicker

React Suite es una biblioteca de interfaz de usuario de interfaz de usuario que consta de un conjunto de componentes de React desarrollados teniendo en cuenta a los desarrolladores. Es una biblioteca bien pensada y fácil de usar para desarrolladores. En este artículo, veremos el bloque de uso del selector de fechas de React Suite .

El componente DatePicker se utiliza para tomar la entrada de fecha y hora de los usuarios. Para hacer que el componente DatePicker ocupe todo el ancho disponible , se utiliza el atributo de bloque . Es un atributo booleano.

Componentes del bloque 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 Usage Block Atributos/Accesorios:

• bloque: este es un atributo booleano que, cuando se establece, el componente ocupará todo el ancho disponible del componente principal.
• apariencia: este atributo se utiliza para establecer la apariencia del componente DatePicker. Puede tener uno de dos valores: «predeterminado» o «sutil».

Sintaxis:

<DatePicker block />

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 bloque DatePicker de React Suite.

Ejemplo 1: ahora reemplace el código en el archivo App.js con el código a continuación. En este ejemplo, usamos el atributo de bloque en el componente DatePicker para que ocupe todo el ancho disponible.

Archivo: src/App.js

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={{ padding: "0px 20px" }}>
            <header style={{
                textAlign: "center", display: "block",
                marginBottom: "30px"
            }}>
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3>
                <h5>React Suite DatePicker Usage Block</h5>
            </header>
  
            <DatePicker style={datepickerStyle} 
                placeholder="Default DatePicker" />
  
            <DatePicker block style={datepickerStyle} 
                placeholder="Block 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 muestra el uso del bloque DatePicker con diferentes apariencias.

Archivo: src/App.js

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={{ padding: "0px 20px" }}>
            <header style={{
                textAlign: "center", display: "block",
                marginBottom: "30px"
            }}>
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3>
                <h5>React Suite DatePicker Usage Block</h5>
            </header>
  
            <DatePicker
                appearance="default" block style={datepickerStyle}
                placeholder="Block - Default Appearance" />
            <DatePicker
                appearance="subtle" block style={datepickerStyle}
                placeholder="Block - Subtle Appearance" />
        </div>
    );
}
  
export default App;

Producción:

 

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