Hotel DatePicker Responsive

Un selector de fechas moderno y flexible para reservas de hotel con soporte para calendario de precios y diseño responsive.

Características

• Diseño Responsive: Adaptado para dispositivos móviles y escritorio
• Selección de Rangos: Permite seleccionar rangos de fechas (check-in y check-out)
• Modo Fecha Única: Opción para seleccionar una sola fecha
• Calendario de Precios: Integración con APIs de precios para mostrar tarifas
• Personalizable: Múltiples opciones de configuración y estilos
• Internacionalización: Soporte para múltiples idiomas
• Standalone: Incluye Luxon y CSS directamente en el bundle
• Sin Dependencias Externas: No requiere jQuery ni otras bibliotecas
• Optimizado para Rendimiento: Caché de tarifas y renderizado eficiente
• Iconos SVG Inline: No requiere bibliotecas de iconos externas

Mejoras recientes

Estructura modular

El código ha sido reorganizado en módulos independientes para facilitar el mantenimiento y la extensión:

• calendar.js: Funciones para generar y manipular el calendario
• config.js: Configuración por defecto
• dom.js: Manipulación del DOM
• events.js: Manejo de eventos
• initializer.js: Inicialización del calendario
• mobile.js: Funcionalidades específicas para móvil
• navigation.js: Navegación entre meses
• rates.js: Gestión de tarifas
• renderer.js: Renderización del calendario
• utils.js: Funciones de utilidad

Optimización de rendimiento

• Caché de tarifas para evitar cargas innecesarias
• Renderizado optimizado para evitar parpadeos
• Detección inteligente de meses visibles en móvil
• Aplicación eficiente de estilos

Mejoras en la vista móvil

• Mejor respuesta táctil
• Scroll más suave
• Mejor visualización de los botones
• Optimización del espacio en pantalla
• Carga de tarifas solo para meses visibles

Instalación

npm install hotel-datepicker-responsive --save

Uso Básico

<div id="datepicker"></div>

<script>
  const datepicker = new HotelDatePicker('datepicker', {
    minNights: 1,
    maxNights: 30,
    format: 'dd/MM/yyyy',
    lang: 'es'
  });
</script>

Versión Standalone (Recomendada)

Esta versión incluye Luxon y CSS directamente en el bundle, por lo que solo necesitas incluir un archivo:

<!-- Incluir Hotel DatePicker (con Luxon y CSS incluidos) -->
<script src="dist/hotel-datepicker.standalone.js"></script>

Para generar estos archivos, ejecuta:

npm run build

Esto creará en la carpeta dist:

• hotel-datepicker.standalone.js: Librería completa con Luxon y CSS incluidos

Inicialización del componente

Una vez incluidos los archivos necesarios, inicializa el componente:

const datePicker = new HotelDatePicker('container-id', {
    minNights: 1,
    maxNights: 30,
    onDateSelect: function(dates) {
        console.log('Fechas seleccionadas:', dates);
    }
});

Servidor Python incluido

Para facilitar la visualización del calendario, se incluye un servidor Python simple:

1. Ejecuta start_server.bat o python server.py desde la línea de comandos
2. Abre tu navegador en http://localhost:8000/HotelDatePicker.html

Ejemplos incluidos

El proyecto incluye varios ejemplos para mostrar diferentes funcionalidades:

Ejemplo básico

Muestra el uso básico del calendario con opciones para ocultar leyenda y atajos.

examples/basic.html

Ejemplo con tarifas

Muestra cómo integrar el calendario con una API de tarifas.

examples/with-rates.html

Ejemplo móvil

Muestra el calendario optimizado para dispositivos móviles.

examples/mobile.html

Opciones de configuración

Métodos disponibles

open()

Abre el calendario.

datePicker.open();

close()

Cierra el calendario.

datePicker.close();

toggle()

Alterna entre abrir y cerrar el calendario.

datePicker.toggle();

setRates(year, month, rates)

Establece las tarifas para un mes específico.

datePicker.setRates(2023, 5, {
    daysByDate: {
        '2023-05-01': {
            availability: true,
            avgPrice: '$1500',
            checkinFormat: '2023-05-01',
            color: 'bg-success',
            cheapest: 0
        },
        // Más días...
    }
});

getSelectedDates()

Obtiene las fechas seleccionadas.

const dates = datePicker.getSelectedDates();
console.log(dates.startDate, dates.endDate, dates.nights);

setSelectedDates(startDate, endDate)

Establece las fechas seleccionadas.

datePicker.setSelectedDates('2023-05-01', '2023-05-05');

clearSelectedDates()

Limpia las fechas seleccionadas.

datePicker.clearSelectedDates();

clearRatesCache()

Limpia la caché de tarifas.

datePicker.clearRatesCache();

Estructura del proyecto

hotel-date-picker/
├── dist/                  # Archivos compilados
│   ├── hotel-date-picker.js
│   ├── hotel-date-picker.min.js
│   └── luxon.min.js
├── examples/              # Ejemplos de uso
│   ├── basic.html
│   ├── with-rates.html
│   └── mobile.html
├── src/                   # Código fuente
│   ├── modules/           # Módulos
│   │   ├── calendar.js
│   │   ├── config.js
│   │   ├── dom.js
│   │   ├── events.js
│   │   ├── index.js
│   │   ├── initializer.js
│   │   ├── mobile.js
│   │   ├── navigation.js
│   │   ├── rates.js
│   │   ├── renderer.js
│   │   └── utils.js
│   ├── HotelDatePicker.js
│   ├── HotelDatePicker.modular.js
│   ├── HotelDatePicker.css
│   ├── HotelDatePicker.combined.css
│   └── styles.css
├── package.json
└── README.md

Publicación en npm

Para publicar la librería en npm:

1. Actualiza la información en package.json (nombre, autor, repositorio, etc.)
2. Ejecuta npm run build para generar los archivos
3. Ejecuta npm login para iniciar sesión en npm
4. Ejecuta npm publish para publicar el paquete

Los usuarios podrán instalar tu paquete con:

npm install hotel-datepicker-responsive

Y usarlo en sus proyectos:

<!-- Incluir Hotel DatePicker (con Luxon y CSS incluidos) -->
<script src="node_modules/hotel-datepicker-responsive/dist/hotel-datepicker.standalone.js"></script>

<script>
  const datepicker = new HotelDatePicker('container-id', {
    // opciones...
  });
</script>

Repositorio

El código fuente está disponible en GitHub: https://github.com/JoseRamonGraciaCalderon/HotelDatePicker

Licencia

MIT