React Suite DatePicker ts: accesorios de ubicación

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end.

El usuario puede elegir o ingresar una fecha u hora usando el componente DatePicker . Estos DatePickers ahora se pueden colocar de unas 13 formas diferentes. Esta ubicación puede ser cualquiera de las posiciones mencionadas a continuación:

DatePicker ts: Colocación Props = ‘bottomStart’ | ‘extremo inferior’ | ‘inicio superior’ | ‘superior’ | ‘inicio izquierdo’ | ‘extremoizquierdo’ | ‘inicioderecho’ | ‘extremoderecho’ | ‘automático’ | ‘autoVerticalStart’ | ‘autoVerticalEnd’ | ‘autoHorizontalStart’ | ‘autoFinHorizontal’;

Sintaxis:

// Import Statement
import { DatePicker } from 'rsuite';
// App.js file
Function App() {
    return (
        <DatePicker placeholder="" placement="auto" />
    );
}

Enfoque : Vamos a crear un proyecto React e instalar el módulo React Suite. Luego, crearemos una interfaz de usuario que mostrará React Suite DatePicker ts: Placement Props.

Creando proyecto React:

Paso 1: para crear una aplicación de reacción, debe instalar los módulos de reacción a través del comando npx. Se usa «npx» en lugar de «npm» porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

npx create-react-app project_name

Paso 2: después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

cd project_name

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: después de ejecutar los comandos mencionados en los pasos anteriores, se ve una estructura de proyecto similar si abre el proyecto en un editor, como se ve a continuación. Realizaremos los cambios de código o agregaremos nuevos componentes que el usuario haga en la carpeta de origen.

Estructura del proyecto

Ejemplo 1: estamos creando una interfaz de usuario que muestra diferentes accesorios de ubicación de React Suite DatePicker ts:.

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import { DatePicker } from 'rsuite';
  
export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h2 style={{ color: "green" }}>
                    React Suite DatePicker ts: Placement Props</h2>
                <br /><br /><br /><br />
                <DatePicker style={{ width: 300, marginRight: 200 }} 
                    placeholder="Bottom Start Date" 
                    placement="bottomStart" />
                <DatePicker style={{ width: 300 }}
                    placeholder="Bottom End Date " 
                    placement="bottomEnd" />
                <br /><br /><br />
                <DatePicker style={{ width: 300, marginRight: 200 }} 
                    placeholder="Right Start Date " 
                    placement="rightStart" />
                <DatePicker style={{ width: 300 }} 
                    placeholder="Left Start Date " 
                    placement="leftStart" />
                <br /><br /><br />
                <DatePicker style={{ width: 300, marginRight: 200 }} 
                    placeholder="Right End Date " 
                    placement="rightEnd" />
                <DatePicker style={{ width: 300 }} 
                    placeholder="Left End Date " 
                    placement="leftEnd" />
                <br /><br /><br />
                <DatePicker style={{ width: 300, marginRight: 200 }} 
                    placeholder="Top Start Date " 
                    placement="topStart" />
                <DatePicker style={{ width: 300 }} 
                    placeholder="Top End Date " 
                    placement="topEnd" />
            </div>
        </center>
    );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida:

Accesorios de ubicación de React Suite DatePickers

Ejemplo 2: estamos creando una interfaz de usuario que muestra React Suite DatePicker ts: accesorios de ubicación.

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import { DatePicker } from 'rsuite';
  
export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h2 style={{ color: "green" }}>
                    React Suite DatePicker ts: Placement Props</h2>
                <br /><br />
                <DatePicker style={{ width: 300 }} 
                    placeholder="Auto Placed Date " 
                    placement="auto" />
                <br /><br /><br />
                <DatePicker style={{ width: 300, marginRight: 200 }} 
                    placeholder="Auto Vertical Start Date " 
                    placement="autoVerticalStart" />
                <DatePicker style={{ width: 300 }} 
                    placeholder="Auto Vertical End Date " 
                    placement="autoVerticalEnd" />
                <br /><br /><br />
                <DatePicker style={{ width: 300, marginRight: 200 }} 
                    placeholder="Auto Horizontal Start Date " 
                    placement="autoHorizontalStart" />
                <DatePicker style={{ width: 300 }} 
                    placeholder="Auto Horizontal End Date " 
                    placement="autoHorizontalEnd" />
            </div>
        </center>
    );
}

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida:

Accesorios de ubicación de React Suite DatePickers

Referencia: https://rsuitejs.com/components/date-picker/#code-ts-placement-code