ReactJS UI Diseño Ant Diseño DatePicker Componente

. El componente DatePicker se utiliza para hacer clic en el cuadro de entrada. Podemos usar el siguiente enfoque en ReactJS para usar el componente Ant Design DatePicker.

API común:

• allowClear: Se utiliza para indicar si se permite borrar texto o no.
• autoFocus: se utiliza para obtener el enfoque cuando se monta el componente si se establece en verdadero.
• bordered: Se utiliza para indicar si tiene estilo de borde o no.
• className: Se utiliza para pasar el className de picker.
• dateRender: se utiliza como función de representación personalizada para celdas de fecha.
• disabled: Se utiliza para determinar si el DatePicker está deshabilitado o no.
• disabledDate: Se utiliza para especificar la fecha que no se puede seleccionar.
• dropdownClassName: se utiliza para personalizar el className del calendario emergente.
• getPopupContainer: Se utiliza para establecer el contenedor de la capa flotante.
• inputReadOnly: se utiliza para establecer el atributo de solo lectura de la etiqueta de entrada.
• locale: Se utiliza para la configuración de la localización.
• modo: se utiliza para indicar el modo del panel selector.
• abierto: se utiliza para indicar el estado abierto del selector.
• panelRender: se utiliza para personalizar el renderizado del panel.
• selector: Se utiliza para establecer la fecha del tipo de selector.
• marcador de posición: se utiliza para indicar el marcador de posición de entrada de fecha.
• popupStyle: Se utiliza para personalizar el estilo del calendario emergente.
• tamaño: Se utiliza para determinar el tamaño del cuadro de entrada.
• estilo: Se utiliza para personalizar el estilo del cuadro de entrada.
• suffixIcon: Se utiliza para el icono de sufijo personalizado.
• onOpenChange: es una función de devolución de llamada que se puede activar cuando aparece o se cierra el calendario emergente.
• onPanelChange: es una función de devolución de llamada que se activa cuando se cambia el modo del panel selector.

Accesorios del selector de fechas:

• defaultPickerValue: se utiliza para establecer la fecha del selector predeterminado.
• defaultValue: si la hora de inicio o la hora de finalización es nula o indefinida, se utiliza para establecer la fecha predeterminada.
• disabledTime: Se utiliza para especificar el tiempo que no se puede seleccionar.
• formato: Se utiliza para establecer el formato de la fecha.
• renderExtraFooter: se utiliza para representar un pie de página adicional en el panel.
• showNow: se utiliza para indicar si mostrar el botón ‘Ahora’ en el panel cuando se configura showTime.
• showTime: se utiliza para proporcionar un objeto de selección de tiempo adicional.
• showTime.defaultValue: Se utiliza para establecer la hora por defecto de la fecha seleccionada.
• showToday: Se utiliza para indicar si mostrar el botón Hoy.
• valor: Se utiliza para fijar una fecha.
• onChange: Es una función de devolución de llamada que se activa cuando cambia la hora seleccionada.
• onOk: es una función de devolución de llamada que se activa al hacer clic en el botón Aceptar.
• onPanelChange: es una función de devolución de llamada que se activa para cambiar el panel.

DatePicker[selector=año] Accesorios:

• defaultPickerValue: se utiliza para establecer la fecha del selector predeterminado.
• defaultValue: Se utiliza para establecer la fecha por defecto.
• formato: Se utiliza para establecer el formato de la fecha.
• renderExtraFooter: se utiliza para representar un pie de página adicional en el panel.
• valor: Se utiliza para fijar una fecha.
• onChange: Es una función de devolución de llamada que se activa cuando cambia la hora seleccionada.

DatePicker[picker=trimestre] Props:

• defaultPickerValue: se utiliza para establecer la fecha del selector predeterminado.
• defaultValue: Se utiliza para establecer la fecha por defecto.
• formato: Se utiliza para establecer el formato de la fecha.
• renderExtraFooter: se utiliza para representar un pie de página adicional en el panel.
• valor: Se utiliza para fijar una fecha.
• onChange: Es una función de devolución de llamada que se activa cuando cambia la hora seleccionada.

DatePicker[selector=mes] Accesorios:

• defaultPickerValue: se utiliza para establecer la fecha del selector predeterminado.
• defaultValue: Se utiliza para establecer la fecha por defecto.
• formato: Se utiliza para establecer el formato de la fecha.
• monthCellRender: se utiliza para el método de procesamiento de contenido de celda de mes personalizado.
• renderExtraFooter: se utiliza para representar un pie de página adicional en el panel.
• valor: Se utiliza para fijar una fecha.
• onChange: Es una función de devolución de llamada que se activa cuando cambia la hora seleccionada.

DatePicker[picker=week] Accesorios:

• defaultPickerValue: se utiliza para establecer la fecha del selector predeterminado.
• defaultValue: Se utiliza para establecer la fecha por defecto.
• formato: Se utiliza para establecer el formato de la fecha.
• renderExtraFooter: se utiliza para representar un pie de página adicional en el panel.
• valor: Se utiliza para fijar una fecha.
• onChange: Es una función de devolución de llamada que se activa cuando cambia la hora seleccionada.

Métodos:

• blur(): este método se utiliza para eliminar el foco.
• focus(): este método se utiliza para obtener el foco.

Accesorios RangePicker:

• allowEmpty: Se utiliza para permitir que la entrada inicial o final se deje vacía.
• dateRender: Se utiliza para personalizar la celda de fecha.
• defaultPickerValue: se utiliza para establecer la fecha del selector predeterminado.
• defaultValue: Se utiliza para establecer la fecha por defecto.
• deshabilitado: Se utiliza para indicar si deshabilitar inicio o final o no.
• disabledTime: Se utiliza para especificar el tiempo que no se puede seleccionar.
• formato: Se utiliza para establecer el formato de la fecha.
• rangos: se utiliza para los rangos preestablecidos para una selección rápida.
• renderExtraFooter: se utiliza para representar un pie de página adicional en el panel.
• separador: Se utiliza para establecer el separador entre las entradas.
• showTime: se utiliza para proporcionar una selección de tiempo adicional.
• showTime.defaultValue: Se utiliza para establecer la hora por defecto de la fecha seleccionada.
• valor: Se utiliza para fijar una fecha.
• onCalendarChange: es una función de devolución de llamada que se activa cuando cambia la hora de inicio o la hora de finalización del rango.
• onChange: Es una función de devolución de llamada que se activa cuando cambia la hora seleccionada.

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 antd

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 "antd/dist/antd.css";
import { DatePicker } from 'antd';
  
export default function App() {
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design DatePicker Component</h4>
      <>
        <DatePicker onChange={(date) => console.log(date)} />,
      </>
    </div>
  );
}

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://ant.design/components/date-picker/