¿Cómo agregar DatePicker simple en Next.js?

En este artículo, vamos a aprender cómo podemos agregar un Selector de fecha simple en NextJs. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.

Enfoque: para agregar nuestro DatePicker, vamos a usar el paquete react-datepicker. El paquete react-datepicker nos ayuda a agregar un DatePicker en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete react-datepicker y luego agregaremos un DatePicker en nuestra página de inicio.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-datepicker usando el siguiente comando:

npm i react-datepicker

Estructura del proyecto: se verá así

Agregar DatePicker: podemos agregar fácilmente DatePicker en nuestra aplicación después de instalar el paquete react-datepicker. Para este ejemplo, vamos a agregar DatePicker a nuestra página de inicio.

Agregue el siguiente contenido en el archivo:

import React, { useState } from 'react';
import DatePicker from "react-datindex.jsepicker";
import "react-datepicker/dist/react-datepicker.css";
  
export default function GfgDatePicker() {
  const [startDate, setStartDate] = useState(new Date());
  
  return (
    <div>
      <h4>GeeksforGeeks - DatePicker</h4>
      <DatePicker selected={startDate} onChange=
              {(date) => setStartDate(date)} />
    </div>
  );
}

Explicación: en el ejemplo anterior primero, estamos importando el DatePocker del paquete instalado y useState gancho de reaccionar. Después de eso, estamos usando la creación de una variable constante y usamos el enlace useState para almacenar los valores. Luego agregaremos nuestro selector de fecha usando el componente DatePicker.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: