Componente de calendario de diseño de hormigas de la interfaz de usuario de ReactJS

. El componente de calendario se usa como un ejemplo de Podemos usar el siguiente enfoque en ReactJS para usar el componente de calendario de Ant Design.

Accesorios de calendario:

• dateCellRender: se utiliza para personalizar la visualización de la celda de fecha agregando el contenido devuelto a la celda.
• dateFullCellRender: se utiliza para personalizar la visualización de la celda de fecha anulando el contenido devuelto a la celda.
• defaultValue: Se utiliza para indicar la fecha seleccionada por defecto.
• disabledDate: Es una función que especifica las fechas que no se pueden seleccionar.
• pantalla completa: Se utiliza para indicar si mostrar en pantalla completa o no.
• headerRender: se utiliza para representar el encabezado personalizado en el panel.
• locale: Se utiliza para el objeto locale del calendario.
• modo: Se utiliza para indicar el modo de visualización del calendario.
• monthCellRender: se utiliza para personalizar la visualización de la celda del mes agregando el contenido devuelto a la celda.
• monthFullCellRender: se utiliza para personalizar la visualización de la celda del mes anulando el contenido devuelto a la celda.
• validRange: Se utiliza para establecer el rango válido.
• valor: Se utiliza para indicar el valor de la fecha actualmente seleccionada.
• onChange: Es una función de devolución de llamada que se activa cuando cambia la fecha.
• onPanelChange: es una función de devolución de llamada que se activa cuando cambia el panel.
• onSelect: es una función de devolución de llamada que se activa cuando se selecciona una fecha.

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 { Calendar } from 'antd';
  
export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Calendar Component</h4>
      <Calendar onChange={(value) => {
        alert(`Your selected ${value.format('YYYY-MM-DD')}`)
      }} />
    </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/calendar/