Componente de entrada de fecha del plano técnico de ReactJS

BlueprintJS es un kit de herramientas de interfaz de usuario basado en React para la web. Esta biblioteca está muy optimizada y es popular para crear interfaces que son complejas y densas en datos para aplicaciones de escritorio. DateInputPodemos usar el siguiente enfoque en ReactJS para usar el componente DateInput de Blueprint de ReactJS.

Accesorios de entrada de fecha:

• canClearSelection: permite al usuario borrar la selección haciendo clic en el día seleccionado actualmente.
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• clearButtonText: se utiliza para indicar el texto del botón de reinicio en la barra de acción del selector de fecha.
• closeOnSelection: se utiliza para indicar si la ventana emergente del calendario debe cerrarse cuando se selecciona una fecha.
• dayPickerProps: se usa para indicar los accesorios para pasar a ReactDayPicker .
• defaultVale: se utiliza para indicar la fecha predeterminada que se utilizará en el componente cuando no se controle.
• disabled: se utiliza para indicar si la entrada de fecha no es interactiva.
• relleno: Se utiliza para indicar si el componente debe ocupar todo el ancho de su contenedor.
• formatDate: es una función para representar una fecha de JavaScript en una string.
• HighlightCurrentDay: Se utiliza para indicar si se debe resaltar el día actual en el calendario.
• initialMonth: se utiliza para indicar el mes inicial que muestra el calendario.
• inputProps: se utiliza para indicar los accesorios para pasar al grupo de entrada.
• invalidDateMessage: se utiliza para indicar el mensaje de error que se muestra cuando la fecha seleccionada no es válida.
• locale: Se utiliza para denotar el nombre de la localidad.
• localeUtils: se utiliza para denotar la colección de funciones que brindan soporte de internacionalización.
• maxDate: se utiliza para indicar la última fecha que el usuario puede seleccionar.
• minDate: se utiliza para indicar la fecha más antigua que el usuario puede seleccionar.
• modificadores: se utiliza para indicar la colección de funciones que determinan qué clases de modificadores se aplican a qué días.
• onChange: es una función de devolución de llamada que se activa cuando el usuario selecciona una nueva fecha válida a través de DatePicker o escribiendo la entrada.
• onError: es una función de devolución de llamada que se activa cuando el usuario termina de escribir una nueva fecha y la fecha provoca un estado de error.
• outOfRangeMessage: se utiliza para indicar el mensaje de error que se muestra cuando la fecha seleccionada está fuera de rango.
• parseDate: es una función de devolución de llamada para deserializar el texto ingresado por el usuario en un objeto Date de JavaScript.
• marcador de posición: se utiliza para indicar el texto del marcador de posición que se mostrará en los campos de entrada vacíos.
• popoverProps: se utiliza para indicar los accesorios que se pasan al Popover.
• reverseMonthAndYearMenus: el menú del mes aparecerá a la izquierda del menú del año si se establece en verdadero.
• rightElement: se utiliza para indicar el elemento que se representará en el lado derecho de una entrada.
• atajos: Sirve para indicar si se muestran o no atajos para seleccionar rápidamente una fecha.
• showActionsBar: se utiliza para indicar si la barra inferior que muestra los botones Hoy y Borrar debe mostrarse debajo del calendario.
• timePickerProps: se utiliza para configurar aún más el TimePicker que aparece debajo del calendario.
• timePrecision: Se utiliza para denotar la precisión de la selección de tiempo que acompaña al calendario.
• todayButtonText : se utiliza para indicar el texto del botón de hoy en la barra de acción del selector de fecha.
• valor: Se utiliza para indicar el día seleccionado actualmente.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

 

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

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

  npm install @blueprintjs/core
  npm install @blueprintjs/datetime

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
import '@blueprintjs/core/lib/css/blueprint.css';
import { DateInput } from "@blueprintjs/datetime";
  
function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint DateInput Component</h4>
            <DateInput
                formatDate={date => date.toLocaleString()}
                parseDate={str => new Date(str)}
                placeholder={"M/D/YYYY"}
            />
        </div >
    );
}
  
export default App;

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:

Referencia: https://blueprintjs.com/docs/#datetime/dateinput