React Suite DatePicker Uso Semana ISO

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 la semana ISO de uso de DatePicker de React Suite. El componente DatePicker se utiliza para tomar la entrada de fecha y hora de los usuarios. 

Según la Organización Internacional para la Estandarización (ISO), cada semana calendario comienza con el lunes como día de inicio y termina con el domingo como último día de la semana. El panel de calendario del componente DatePicker se puede mostrar de acuerdo con los estándares ISO utilizando la propiedad isoWeek .

Componentes de la semana ISO de uso de DatePicker de React Suite:

• DatePicker: el componente DatePicker selecciona o ingresa la fecha y/o la hora.

React Suite DatePicker Uso ISO Semana Atributos/Accesorios:

• isoWeek: Es un atributo booleano del componente DatePicker utilizado para mostrar el panel de calendario de acuerdo a los estándares ISO.
• tamaño: Esta propiedad del componente DatePicker se utiliza para establecer el tamaño del componente. Acepta cuatro valores: “xs”, “sm”, “md” y “lg”.

Sintaxis:

<DatePicker isoWeek />

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 isoWeek .

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 isoWeek en el componente DatePicker para mostrar su panel de calendario de acuerdo con los estándares ISO.

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DatePicker } from "rsuite";
  
function App() {
    const pickerStyle = {
        marginTop: "10px", 
        marginBottom: "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 Dropdown ISO Week
                </h5>
            </header>
  
            <p>Default DatePicker</p>
            <DatePicker style={pickerStyle}/>
            <p>DatePicker with ISO Standards</p>
            <DatePicker isoWeek style={pickerStyle} />
        </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: En el siguiente ejemplo, usamos la propiedad de tamaño del componente DatePicker junto con la propiedad isoWeek para cambiar el tamaño de los Datepickers.

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DatePicker } from "rsuite";
  
function App() {
    const pickerStyle = {
        marginTop: "10px", 
        marginBottom: "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 Dropdown ISO Week
                </h5>
            </header>
  
            <p>Extra Small ISO DatePicker</p>
            <DatePicker style={pickerStyle} 
                        isoWeek size="xs"/>
            <p>Small ISO DatePicker</p>
            <DatePicker style={pickerStyle} 
                        isoWeek size="sm"/>
  
            <p>Medium ISO DatePicker</p>
            <DatePicker style={pickerStyle} 
                        isoWeek size="md"/>
  
            <p>Large ISO DatePicker</p>
            <DatePicker style={pickerStyle} 
                        isoWeek size="lg"/>
        </div>
    );
}
export default App;

Producción:

 

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