<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Easepick Calendar</title>


  <!-- Enlace al archivo CSS desde el CDN -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.0/dist/index.css" />


  <!-- Script de JavaScript desde el CDN -->

  <script src="https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.0/dist/index.umd.js"></script>


</head>

<body>

  <!-- Campo donde aparecerá el calendario -->

  <input id="datepicker" placeholder="Selecciona una fecha" />


  <script>

    // Inicialización del calendario Easepick

    const picker = new easepick.create({

      element: document.getElementById('datepicker'),  // Enlazar el calendario al input

      calendars: 1,  // Número de calendarios que se muestran

      grid: 1,

      range: true,  // Permite la selección de un rango de fechas

      plugins: ['RangePlugin'],

      RangePlugin: {

        tooltip: true  // Mostrar una herramienta de sugerencia

      }

    });

  </script>

</body>

</html>