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.

Sitio web: https://calendario-arg4qzs55-ramons-projects-e601971a.vercel.app/

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
• Variables CSS Personalizables: Personalización completa de colores y estilos mediante variables CSS
• Shadow DOM: Aislamiento de estilos para evitar conflictos con CSS externo
• 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

Personalización de Estilos CSS

El calendario ahora permite personalizar completamente los colores y estilos mediante variables CSS:

const datepicker = new HotelDatePicker('container-id', {
    // Colores principales
    primaryColor: '#3498db',
    primaryLight: '#ebf5fb',
    primaryDark: '#2980b9',

    // Colores para precios
    priceBest: '#27ae60',
    priceGood: '#f2faf0',
    priceBestLow: '#bbe5b3',

    // Colores de texto
    textPrimary: '#2c3e50',
    textSecondary: '#7f8c8d',
    textLight: '#ffffff',

    // Colores de fondo
    bgPrimary: '#ffffff',
    bgSecondary: '#f5f5f5',
    bgDisabled: '#e9ecef',

    // Colores de borde
    borderColor: '#bdc3c7',
    borderFocus: '#95a5a6',

    // Tamaños
    daySize: '40px',
    fontSizeNormal: '14px',
    fontSizeSmall: '12px',
    fontSizeXsmall: '10px',

    // Espaciado
    spacingXs: '2px',
    spacingSm: '5px',
    spacingMd: '10px',
    spacingLg: '15px',
    spacingXl: '20px'
});

También puedes actualizar los estilos después de la inicialización:

datepicker.updateCSSVars({
    primaryColor: '#e74c3c',
    primaryLight: '#fadbd8',
    priceBest: '#2ecc71'
});

Shadow DOM para Aislamiento de Estilos

El calendario ahora utiliza Shadow DOM para aislar sus estilos del resto de la página, evitando conflictos con CSS externo:

<div id="calendar-container" style="position: relative;">
    <!-- El calendario se renderizará aquí dentro de un Shadow DOM -->
</div>

Es importante que el contenedor tenga position: relative para que el calendario se posicione correctamente.

Inyección de CSS Personalizado

Ahora puedes inyectar CSS personalizado directamente en el calendario de dos formas:

1. Al inicializar el calendario:

const datepicker = new HotelDatePicker('container-id', {
    // Otras opciones...
    customCSS: `
        .day.selected {
            background-color: #3498db !important;
            border-radius: 50% !important;
        }

        .day.in-range {
            background-color: #e0f7fa !important;
        }
    `
});

2. Después de la inicialización:

datepicker.injectCSS(`
    .day.selected {
        background-color: #3498db !important;
        border-radius: 50% !important;
    }

    .day.in-range {
        background-color: #e0f7fa !important;
    }
`);

Variables CSS en CSS Personalizado

También puedes definir variables CSS directamente en el CSS personalizado, y estas tendrán prioridad sobre las variables predeterminadas:

1. Usando el selector :host:

datepicker.injectCSS(`
    :host {
        --hdp-primary-color: #3498db;
        --hdp-primary-light: #ebf5fb;
        --hdp-primary-dark: #2980b9;
    }

    .day.selected {
        background-color: var(--hdp-primary-color) !important;
        border-radius: 50% !important;
    }
`);

2. Definiendo variables directamente sin selectores:

datepicker.injectCSS(`
    --hdp-primary-color: #3498db;
    --hdp-primary-light: #ebf5fb;
    --hdp-primary-dark: #2980b9;
`);

Estas funcionalidades te permiten personalizar completamente el aspecto del calendario sin tener que modificar el archivo CSS original.

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

Puedes ver ejemplos en vivo en: https://calendario-arg4qzs55-ramons-projects-e601971a.vercel.app/examples/basic.html

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

| Opción | Tipo | Valor por defecto | Descripción | |--------|------|-------------------|-------------| | minNights | Number | 1 | Número mínimo de noches | | maxNights | Number | 30 | Número máximo de noches | | initialStartDate | String | null | Fecha de inicio inicial (formato ISO) | | initialEndDate | String | null | Fecha de fin inicial (formato ISO) | | format | String | 'dd LLL yyyy' | Formato de fecha (usando Luxon) | | hideLegend | Boolean | false | Oculta la leyenda | | hideShortcuts | Boolean | false | Oculta los atajos rápidos | | mobileBreakpoint | Number | 768 | Punto de quiebre para vista móvil (en píxeles) | | onDateSelect | Function | () => {} | Callback cuando se seleccionan fechas | | onMonthChange | Function | () => {} | Callback cuando cambia el mes visible | | onView | Function | () => {} | Callback cuando se abre el calendario | | priceCalendar | Object | { enabled: false } | Configuración del calendario de precios | | i18n | Object | { ... } | Textos para internacionalización | | isRange | Boolean | true | Si es true, permite seleccionar un rango de fechas. Si es false, solo permite seleccionar una fecha | | allowSameDaySelection | Boolean | false | Si es true, permite seleccionar el mismo día como fecha de inicio y fin (útil para vuelos) | | displayDaysInsteadOfNights | Boolean | false | Si es true, muestra "días" en lugar de "noches" en el tooltip | | currency | String | 'MXN' | Moneda para mostrar en la leyenda de precios | | primaryColor | String | '#db006e' | Color principal del calendario | | primaryLight | String | '#fcf5f9' | Color principal claro (para días en rango) | | primaryDark | String | '#800d46' | Color principal oscuro | | priceBest | String | '#1c8207' | Color para los mejores precios | | priceGood | String | '#f2faf0' | Color para buenos precios | | priceBestLow | String | '#bbe5b3' | Color para mejores precios bajos | | textPrimary | String | '#333333' | Color de texto principal | | textSecondary | String | '#696770' | Color de texto secundario | | textLight | String | '#ffffff' | Color de texto claro | | bgPrimary | String | '#ffffff' | Color de fondo principal | | bgSecondary | String | '#f5f5f5' | Color de fondo secundario | | bgDisabled | String | '#e9ecef' | Color de fondo para elementos deshabilitados | | borderColor | String | '#e6e6e6' | Color de borde | | borderFocus | String | '#adb5bd' | Color de borde para elementos enfocados | | daySize | String | '40px' | Tamaño de los días en el calendario | | fontSizeNormal | String | '14px' | Tamaño de fuente normal | | fontSizeSmall | String | '12px' | Tamaño de fuente pequeña | | fontSizeXsmall | String | '10px' | Tamaño de fuente muy pequeña | | spacingXs | String | '2px' | Espaciado extra pequeño | | spacingSm | String | '5px' | Espaciado pequeño | | spacingMd | String | '10px' | Espaciado mediano | | spacingLg | String | '15px' | Espaciado grande | | spacingXl | String | '20px' | Espaciado extra grande | | customCSS | String | '' | CSS personalizado para inyectar directamente en el Shadow DOM |

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.

// Formato simple de tarifas
const rates = {
    '2023-05-01': 1200,
    '2023-05-02': 1500,
    '2023-05-03': 1800,
    '2023-05-04': 1000,
    '2023-05-05': 900
};

datePicker.setRates(2023, 5, rates);

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();

updateCSSVars(cssVars)

Actualiza las variables CSS personalizadas.

datePicker.updateCSSVars({
    primaryColor: '#3498db',
    primaryLight: '#ebf5fb',
    priceBest: '#27ae60'
});

injectCSS(css)

Inyecta CSS personalizado en el Shadow DOM.

datePicker.injectCSS(`
    .day.selected {
        background-color: #3498db !important;
        border-radius: 50% !important;
    }

    .day.in-range {
        background-color: #e0f7fa !important;
    }
`);

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