Hotel DatePicker Responsive

Un selector de fechas moderno y flexible para reservas de hotel y vuelos 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
• Selección del Mismo Día: Opción para permitir seleccionar el mismo día como fecha de inicio y fin (ideal para vuelos)
• Conteo Flexible: Opción para mostrar "días" en lugar de "noches" en el tooltip

Mejoras recientes

Nuevas Funcionalidades

Selección del Mismo Día

La opción allowSameDaySelection permite seleccionar el mismo día como fecha de inicio y fin, lo que es útil para vuelos o reservas de un solo día:

const datepicker = new HotelDatePicker('container-id', {
    allowSameDaySelection: true
});

Cuando esta opción está habilitada:

• Se puede seleccionar el mismo día como fecha de inicio y fin
• El día se muestra como un círculo completo sin flechas de dirección
• El conteo de días comienza desde 1 (el mismo día cuenta como 1 día)

Mostrar Días en lugar de Noches

La opción displayDaysInsteadOfNights permite mostrar "días" en lugar de "noches" en el tooltip:

const datepicker = new HotelDatePicker('container-id', {
    displayDaysInsteadOfNights: true
});

Cuando esta opción está habilitada:

• El tooltip muestra "días" en lugar de "noches"
• El conteo se ajusta para reflejar días en lugar de noches

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

Ejemplo para vuelos (selección del mismo día)

Muestra cómo configurar el calendario para reservas de vuelos, permitiendo seleccionar el mismo día y mostrando días en lugar de noches.

const datepicker = new HotelDatePicker('container-id', {
    isRange: true,
    allowSameDaySelection: true,
    displayDaysInsteadOfNights: true,
    i18n: {
        day: 'día',
        days: 'días'
    }
});

Ejemplo de modo fecha única

Muestra cómo configurar el calendario para seleccionar una sola fecha.

const datepicker = new HotelDatePicker('container-id', {
    isRange: false
});

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>

Internacionalización

El calendario soporta múltiples idiomas para los nombres de meses, días y textos:

const datepicker = new HotelDatePicker('container-id', {
    lang: 'es', // Código de idioma (es, en, fr, etc.)
    i18n: {
        night: 'noche',
        nights: 'noches',
        day: 'día',         // Nuevo: para displayDaysInsteadOfNights
        days: 'días',       // Nuevo: para displayDaysInsteadOfNights
        apply: 'Aplicar',
        cancel: 'Cancelar',
        selectDate: 'Seleccionar fecha',
        selectCheckout: 'Seleccionar salida',
        selectCheckin: 'Seleccionar entrada'
    }
});

Repositorio

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

Licencia

MIT