Marcador de posición de uso de React Suite DatePicker

React Suite es una biblioteca de interfaz de usuario de front-end construida sobre React que nos permite muchos componentes prediseñados para nuestra aplicación de reacción. Es una biblioteca fácil de usar para desarrolladores y es una excelente base para crear sitios web y aplicaciones escalables y hermosos. En este artículo, veremos el marcador de posición de uso del selector de fechas de React Suite.

El componente DatePicker se usa para tomar la entrada de fecha/hora del usuario. El atributo de marcador de posición del componente DatePicker se usa para sobrescribir el marcador de posición predeterminado con uno personalizado.

Componentes de marcador de posición 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 Marcador de posición Atributos/Accesorios:

• marcador de posición : este atributo se utiliza para cambiar el valor de marcador de posición predeterminado del componente Selector de fechas.
• tamaño : este atributo se utiliza en el componente DatePicker para especificar su tamaño. Toma cuatro valores: “lg”, “md”, “sm” y “xs”.

Sintaxis:

<DatePicker placeholder="geeksforgeeks" />

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 comprender cómo usar el atributo/prop de marcador de posición 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 marcador de posición del componente DatePicker para cambiar el valor de marcador de posición predeterminado del componente.

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DatePicker } from "rsuite";
  
function App() {
    const datepickerStyle = { 
        marginBottom: "25px", 
        marginTop: "10px" 
    };
  
    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 Usage Placeholder</h5>
            </header>
  
            <p>DatePicker with Default Placeholder value: </p>
            <DatePicker style={datepickerStyle} />
            <p>DatePicker with Custom Placeholder value: </p>
            <DatePicker block style={datepickerStyle}
                placeholder="Please select your D.O.B" />
        </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 de marcador de posición del componente DatePicker con diferentes tamaños del componente.

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DatePicker } from "rsuite";
  
function App() {
    const datepickerStyle = { 
        marginBottom: "25px", 
        marginTop: "10px" 
    };
  
    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 Usage Placeholder</h5>
            </header>
  
            <DatePicker style={datepickerStyle} 
                placeholder="ExtraSmall 
                Placeholder" size="xs" />
            <DatePicker style={datepickerStyle} 
                placeholder="Small 
                Placeholder" size="sm" />
            <DatePicker style={datepickerStyle} 
                placeholder="Medium Sized 
                Placeholder" size="md" />
            <DatePicker style={datepickerStyle} 
                placeholder="Large 
                Placeholder" size="lg" />
        </div>
    );
}
  
export default App;

Producción:

 

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