Componente ReactJS Blueprint DateRangeInput

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. Entrada de intervalo de fechas. Se usa en formularios donde el usuario debe ingresar un rango de fechas. Podemos usar el siguiente enfoque en ReactJS para usar el componente ReactJS Blueprint DateRangeInput.

Accesorios de entrada de rango de fechas:

• allowSingleDayRange: Se utiliza para indicar si las fechas de inicio y fin de rango pueden ser el mismo día.
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• closeOnSelection: se utiliza para indicar si la ventana emergente del calendario debe cerrarse cuando un rango de fechas está completamente seleccionado.
• contiguousCalendarMonths: Se utiliza para indicar si los meses mostrados en el calendario son contiguos.
• dayPickerProps: se usa para indicar los accesorios para pasar a ReactDayPicker .
• defaultValue: se utiliza para indicar el intervalo de fechas predeterminado que se utilizará en el componente cuando no esté controlado.
• disabled: Se utiliza para indicar si las entradas de texto son no interactivas.
• endInputProps: se utiliza para indicar los accesorios para pasar al grupo de entrada de fecha de finalización.
• 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.
• invalidDateMessage: se utiliza para indicar el mensaje de error que se muestra cuando la fecha seleccionada no es válida.
• configuración regional: se utiliza para indicar el nombre de configuración regional que se pasa a las funciones en localeUtils.
• 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 un día.
• onError: Es una función 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.
• superposiciónDatesMessage: se utiliza para indicar el mensaje de error que se muestra cuando las fechas seleccionadas se superponen.
• parseDate: es una función 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.
• selectAllOnFocus : se utiliza para indicar si todo el campo de texto debe seleccionarse en foco.
• atajos: Se utiliza para indicar si se muestran o no atajos para seleccionar rápidamente un rango de fechas.
• singleMonthOnly: Se utiliza para indicar si mostrar un calendario de un solo mes.
• startInputProps: se utiliza para indicar los accesorios que se pasarán al grupo de entrada de fecha de inicio.
• 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.
• valor: se utiliza para indicar el intervalo de fechas 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 { DateRangeInput } from "@blueprintjs/datetime";
  
function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint DateRangeInput Component</h4>
            <DateRangeInput
                formatDate={date => date.toLocaleString()}
                parseDate={str => new Date(str)}
            />
        </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/daterangeinput