ngx-datex 1.0.0 → 1.0.1

package/fesm2022/ngx-datex.mjs

@@ -172,11 +172,30 @@ function isSameMonth(date1, date2) {
 function isSameYear(date1, date2) {
     return sameYear(date1, date2);
 }
-function formatDateValue(date, formatStr) {
+/**
+ * Formats a date using the specified format string and locale.
+ * Follows vanilla-daterangepicker logic by always using locale.format.
+ *
+ * @param date - The date to format
+ * @param formatStr - Format string (e.g., 'DD/MM/YYYY', 'MM/DD/YYYY HH:mm')
+ * @param locale - Optional locale string (e.g., 'es-ES', 'en-US')
+ * @returns Formatted date string
+ *
+ * @example
+ * ```typescript
+ * const date = new Date('2024-01-15 14:30:00');
+ * formatDateValue(date, 'DD/MM/YYYY'); // '15/01/2024'
+ * formatDateValue(date, 'MM/DD/YYYY hh:mm A'); // '01/15/2024 02:30 PM'
+ * formatDateValue(date, 'DD/MM/YYYY HH:mm', 'es-ES'); // '15/01/2024 14:30'
+ * ```
+ */
+function formatDateValue(date, formatStr, locale) {
     try {
-        return format(date, formatStr);
+        // Use @formkit/tempo with locale support (following vanilla-daterangepicker pattern)
+        return format(date, formatStr, locale);
     }
     catch {
+        // Fallback to manual formatting if tempo fails
         const year = date.getFullYear();
         const month = String(date.getMonth() + 1).padStart(2, '0');
         const day = String(date.getDate()).padStart(2, '0');
@@ -196,9 +215,26 @@ function formatDateValue(date, formatStr) {
             .replace(/A/g, ampm);
     }
 }
-function parseDateValue(dateStr, formatStr) {
+/**
+ * Parses a date string using the specified format string and locale.
+ * Follows vanilla-daterangepicker logic by always using locale.format.
+ *
+ * @param dateStr - The date string to parse
+ * @param formatStr - Format string (e.g., 'DD/MM/YYYY', 'MM/DD/YYYY HH:mm')
+ * @param locale - Optional locale string (e.g., 'es-ES', 'en-US')
+ * @returns Parsed Date object
+ *
+ * @example
+ * ```typescript
+ * const date1 = parseDateValue('15/01/2024', 'DD/MM/YYYY'); // January 15, 2024
+ * const date2 = parseDateValue('01/15/2024 02:30 PM', 'MM/DD/YYYY hh:mm A'); // January 15, 2024 14:30
+ * const date3 = parseDateValue('15/01/2024 14:30', 'DD/MM/YYYY HH:mm', 'es-ES'); // January 15, 2024 14:30
+ * ```
+ */
+function parseDateValue(dateStr, formatStr, locale) {
     try {
-        const parsed = parse(dateStr, formatStr);
+        // Use @formkit/tempo with locale support (following vanilla-daterangepicker pattern)
+        const parsed = parse(dateStr, formatStr, locale);
         if (isValidDate(parsed)) {
             return parsed;
         }
@@ -206,6 +242,7 @@ function parseDateValue(dateStr, formatStr) {
     catch {
         // Fallback to manual parsing
     }
+    // Manual parsing fallback for common formats
     if (formatStr === 'YYYY-MM-DD') {
         const parts = dateStr.split('-');
         if (parts.length === 3) {
@@ -243,6 +280,7 @@ function parseDateValue(dateStr, formatStr) {
             return date;
         }
     }
+    // Final fallback to native Date parsing
     return new Date(dateStr);
 }
 function isSameDate(date1, date2, unit = 'day') {
@@ -255,6 +293,15 @@ function isSameDate(date1, date2, unit = 'day') {
             return isSameMonth(date1, date2);
         case 'year':
             return isSameYear(date1, date2);
+        case 'minute':
+            return (isSameDay(date1, date2) &&
+                date1.getHours() === date2.getHours() &&
+                date1.getMinutes() === date2.getMinutes());
+        case 'second':
+            return (isSameDay(date1, date2) &&
+                date1.getHours() === date2.getHours() &&
+                date1.getMinutes() === date2.getMinutes() &&
+                date1.getSeconds() === date2.getSeconds());
         default:
             return false;
     }
@@ -293,6 +340,7 @@ function isMobileDevice() {
  * ```
  */
 const SPANISH_LOCALE = {
+    locale: 'es-ES',
     direction: 'ltr',
     format: 'DD/MM/YYYY',
     separator: ' - ',
@@ -317,6 +365,136 @@ const SPANISH_LOCALE = {
     ],
     firstDay: 1, // Lunes como primer día
 };
+/**
+ * Spanish locale with time picker support (24-hour format).
+ *
+ * Same as SPANISH_LOCALE but with DD/MM/YYYY HH:mm format for time picker usage.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="SPANISH_LOCALE_WITH_TIME" [timePicker]="true"></ngx-datex>
+ * ```
+ */
+const SPANISH_LOCALE_WITH_TIME = {
+    ...SPANISH_LOCALE,
+    format: 'DD/MM/YYYY HH:mm',
+};
+/**
+ * Spanish locale with time picker support (12-hour format).
+ *
+ * Same as SPANISH_LOCALE but with DD/MM/YYYY hh:mm A format for 12-hour time picker.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="SPANISH_LOCALE_WITH_TIME_12H" [timePicker]="true" [timePicker24Hour]="false"></ngx-datex>
+ * ```
+ */
+const SPANISH_LOCALE_WITH_TIME_12H = {
+    ...SPANISH_LOCALE,
+    format: 'DD/MM/YYYY hh:mm A',
+};
+/**
+ * US English locale configuration.
+ *
+ * Provides English language support with MM/DD/YYYY format,
+ * English day/month names, and Sunday as the first day of the week.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="US_ENGLISH_LOCALE"></ngx-datex>
+ * ```
+ */
+const US_ENGLISH_LOCALE = {
+    locale: 'en-US',
+    direction: 'ltr',
+    format: 'MM/DD/YYYY',
+    separator: ' - ',
+    applyLabel: 'Apply',
+    cancelLabel: 'Cancel',
+    weekLabel: 'W',
+    customRangeLabel: 'Custom Range',
+    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    monthNames: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+    firstDay: 0, // Sunday as first day
+};
+/**
+ * US English locale with time picker support (12-hour format).
+ *
+ * Same as US_ENGLISH_LOCALE but with MM/DD/YYYY hh:mm A format for time picker usage.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="US_ENGLISH_LOCALE_WITH_TIME" [timePicker]="true" [timePicker24Hour]="false"></ngx-datex>
+ * ```
+ */
+const US_ENGLISH_LOCALE_WITH_TIME = {
+    ...US_ENGLISH_LOCALE,
+    format: 'MM/DD/YYYY hh:mm A',
+};
+/**
+ * ISO format locale configuration.
+ *
+ * Provides YYYY-MM-DD format commonly used in APIs and databases,
+ * with English labels and Monday as the first day of the week.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="ISO_LOCALE"></ngx-datex>
+ * ```
+ */
+const ISO_LOCALE = {
+    locale: 'en-US',
+    direction: 'ltr',
+    format: 'YYYY-MM-DD',
+    separator: ' / ',
+    applyLabel: 'Apply',
+    cancelLabel: 'Cancel',
+    weekLabel: 'W',
+    customRangeLabel: 'Custom Range',
+    daysOfWeek: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+    monthNames: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+    firstDay: 1, // Monday as first day
+};
+/**
+ * ISO format locale with time picker support (24-hour format).
+ *
+ * Same as ISO_LOCALE but with YYYY-MM-DD HH:mm format for time picker usage.
+ *
+ * @example
+ * ```typescript
+ * <ngx-datex [locale]="ISO_LOCALE_WITH_TIME" [timePicker]="true"></ngx-datex>
+ * ```
+ */
+const ISO_LOCALE_WITH_TIME = {
+    ...ISO_LOCALE,
+    format: 'YYYY-MM-DD HH:mm',
+};
 /**
  * Default Material Design light theme.
  *
@@ -486,8 +664,8 @@ const DEFAULT_RANGES = {
  *
  * // Update configuration
  * this.datexService.updateConfig({
- *   dateFormat: 'DD/MM/YYYY',
- *   firstDayOfWeek: 1
+ *   firstDayOfWeek: 1,
+ *   businessDaysOnly: true
  * });
  *
  * // Format a date range
@@ -505,9 +683,9 @@ class NgxDatexService {
      * @example
      * ```typescript
      * this.datexService.updateConfig({
-     *   dateFormat: 'YYYY-MM-DD',
      *   firstDayOfWeek: 0, // Sunday
-     *   businessDaysOnly: true
+     *   businessDaysOnly: true,
+     *   showWeekNumbers: true
      * });
      * ```
      */
@@ -1302,11 +1480,20 @@ class NgxDatexCalendarService {
             onLeftMonthChange(maxLeftMonth);
         }
     }
-    setStartDate(startDate, minDate, maxDate, timePicker, timePickerIncrement) {
+    setStartDate(startDate, minDate, maxDate, timePicker, timePickerIncrement, currentStartDate) {
         let newStartDate = new Date(startDate);
         if (!timePicker) {
             newStartDate = startOfDay(newStartDate);
         }
+        else if (currentStartDate && timePicker) {
+            // When timePicker is enabled, preserve existing time if only date is changing
+            if (newStartDate.getFullYear() !== currentStartDate.getFullYear() ||
+                newStartDate.getMonth() !== currentStartDate.getMonth() ||
+                newStartDate.getDate() !== currentStartDate.getDate()) {
+                // Only date changed, preserve time
+                newStartDate.setHours(currentStartDate.getHours(), currentStartDate.getMinutes(), currentStartDate.getSeconds(), currentStartDate.getMilliseconds());
+            }
+        }
         if (timePicker && timePickerIncrement) {
             const minutes = newStartDate.getMinutes();
             const roundedMinutes = Math.round(minutes / timePickerIncrement) * timePickerIncrement;
@@ -1330,11 +1517,20 @@ class NgxDatexCalendarService {
         }
         return newStartDate;
     }
-    setEndDate(endDate, startDate, maxDate, maxSpan, timePicker, timePickerIncrement) {
+    setEndDate(endDate, startDate, maxDate, maxSpan, timePicker, timePickerIncrement, currentEndDate) {
         let newEndDate = new Date(endDate);
         if (!timePicker) {
             newEndDate = endOfDay(newEndDate);
         }
+        else if (currentEndDate && timePicker) {
+            // When timePicker is enabled, preserve existing time if only date is changing
+            if (newEndDate.getFullYear() !== currentEndDate.getFullYear() ||
+                newEndDate.getMonth() !== currentEndDate.getMonth() ||
+                newEndDate.getDate() !== currentEndDate.getDate()) {
+                // Only date changed, preserve time
+                newEndDate.setHours(currentEndDate.getHours(), currentEndDate.getMinutes(), currentEndDate.getSeconds(), currentEndDate.getMilliseconds());
+            }
+        }
         if (timePicker && timePickerIncrement) {
             const minutes = newEndDate.getMinutes();
             const roundedMinutes = Math.round(minutes / timePickerIncrement) * timePickerIncrement;
@@ -1533,28 +1729,165 @@ class NgxDatex {
      * @example
      * ```typescript
      * const config: NgxDatexConfig = {
-     *   dateFormat: 'DD/MM/YYYY',
      *   firstDayOfWeek: 1,
-     *   businessDaysOnly: true
+     *   businessDaysOnly: true,
+     *   showWeekNumbers: true
      * };
      * ```
      */
     config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
     /**
      * Localization settings for internationalization.
-     * Controls language, date formats, and UI text.
+     * Controls language, date formats, UI text, and regional preferences.
+     *
+     * This is the primary configuration for adapting the date picker to different
+     * languages, regions, and cultural conventions. The most important property
+     * is `format`, which controls how dates are displayed and parsed.
      *
      * @default SPANISH_LOCALE
      *
-     * @example
+     * ## Key Properties:
+     *
+     * - **`format`**: Date format string (REQUIRED for timePicker usage)
+     * - **`locale`**: Locale code for @formkit/tempo formatting
+     * - **`separator`**: Text between start and end dates
+     * - **`daysOfWeek`**: Short day names array
+     * - **`monthNames`**: Full month names array
+     * - **`applyLabel`**: Apply button text
+     * - **`cancelLabel`**: Cancel button text
+     *
+     * ## Format Examples:
+     *
+     * ### Date Only Formats:
+     * ```typescript
+     * // European format (DD/MM/YYYY)
+     * const europeanLocale: NgxDatexLocale = {
+     *   locale: 'es-ES',
+     *   format: 'DD/MM/YYYY',        // 15/01/2024
+     *   separator: ' - ',
+     *   daysOfWeek: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
+     *   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+     *                'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
+     *   applyLabel: 'Aplicar',
+     *   cancelLabel: 'Cancelar',
+     *   firstDay: 1  // Monday first
+     * };
+     *
+     * // US format (MM/DD/YYYY)
+     * const usLocale: NgxDatexLocale = {
+     *   locale: 'en-US',
+     *   format: 'MM/DD/YYYY',        // 01/15/2024
+     *   separator: ' - ',
+     *   daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+     *   monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
+     *                'July', 'August', 'September', 'October', 'November', 'December'],
+     *   applyLabel: 'Apply',
+     *   cancelLabel: 'Cancel',
+     *   firstDay: 0  // Sunday first
+     * };
+     *
+     * // ISO format (YYYY-MM-DD)
+     * const isoLocale: NgxDatexLocale = {
+     *   locale: 'en-US',
+     *   format: 'YYYY-MM-DD',        // 2024-01-15
+     *   separator: ' / ',
+     *   daysOfWeek: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+     *   monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
+     *                'July', 'August', 'September', 'October', 'November', 'December'],
+     *   applyLabel: 'Apply',
+     *   cancelLabel: 'Cancel',
+     *   firstDay: 1  // Monday first
+     * };
+     * ```
+     *
+     * ### Time Picker Formats:
      * ```typescript
+     * // Spanish with 24-hour time
+     * const spanishWithTime: NgxDatexLocale = {
+     *   locale: 'es-ES',
+     *   format: 'DD/MM/YYYY HH:mm',  // 15/01/2024 14:30
+     *   separator: ' - ',
+     *   daysOfWeek: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
+     *   monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+     *                'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
+     *   applyLabel: 'Aplicar',
+     *   cancelLabel: 'Cancelar'
+     * };
+     *
+     * // US with 12-hour time
+     * const usWithTime: NgxDatexLocale = {
+     *   locale: 'en-US',
+     *   format: 'MM/DD/YYYY hh:mm A', // 01/15/2024 02:30 PM
+     *   separator: ' - ',
+     *   daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+     *   monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
+     *                'July', 'August', 'September', 'October', 'November', 'December'],
+     *   applyLabel: 'Apply',
+     *   cancelLabel: 'Cancel'
+     * };
+     *
+     * // French locale
      * const frenchLocale: NgxDatexLocale = {
+     *   locale: 'fr-FR',
      *   format: 'DD/MM/YYYY',
+     *   separator: ' au ',
      *   daysOfWeek: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
+     *   monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
+     *                'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
      *   applyLabel: 'Appliquer',
-     *   cancelLabel: 'Annuler'
+     *   cancelLabel: 'Annuler',
+     *   customRangeLabel: 'Plage personnalisée',
+     *   firstDay: 1
+     * };
+     *
+     * // German locale
+     * const germanLocale: NgxDatexLocale = {
+     *   locale: 'de-DE',
+     *   format: 'DD.MM.YYYY',
+     *   separator: ' bis ',
+     *   daysOfWeek: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
+     *   monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
+     *                'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
+     *   applyLabel: 'Anwenden',
+     *   cancelLabel: 'Abbrechen',
+     *   customRangeLabel: 'Benutzerdefiniert',
+     *   firstDay: 1
      * };
      * ```
+     *
+     * ## Component Usage:
+     * ```html
+     * <!-- Spanish date picker -->
+     * <ngx-datex [locale]="spanishLocale"></ngx-datex>
+     *
+     * <!-- US date picker with time -->
+     * <ngx-datex
+     *   [locale]="usWithTime"
+     *   [timePicker]="true"
+     *   [timePicker24Hour]="false">
+     * </ngx-datex>
+     *
+     * <!-- French date picker -->
+     * <ngx-datex [locale]="frenchLocale"></ngx-datex>
+     *
+     * <!-- Using predefined locales -->
+     * <ngx-datex [locale]="SPANISH_LOCALE"></ngx-datex>
+     * <ngx-datex [locale]="US_ENGLISH_LOCALE"></ngx-datex>
+     * <ngx-datex [locale]="SPANISH_LOCALE_WITH_TIME"></ngx-datex>
+     * ```
+     *
+     * ## Important Notes:
+     *
+     * 1. **TimePicker Format**: When `timePicker=true`, you MUST include time tokens in the format
+     * 2. **Locale Code**: The `locale` property affects @formkit/tempo formatting behavior
+     * 3. **Day Order**: `daysOfWeek` array should match your `firstDay` setting
+     * 4. **Separator**: Used between start and end dates in range display
+     * 5. **Predefined Locales**: Use exported constants like `SPANISH_LOCALE`, `US_ENGLISH_LOCALE`
+     *
+     * @see {@link NgxDatexLocale} for complete interface documentation
+     * @see {@link SPANISH_LOCALE} for default Spanish configuration
+     * @see {@link US_ENGLISH_LOCALE} for US English configuration
+     * @see {@link SPANISH_LOCALE_WITH_TIME} for Spanish with time support
      */
     locale = input(SPANISH_LOCALE, ...(ngDevMode ? [{ debugName: "locale" }] : []));
     /**
@@ -2574,17 +2907,18 @@ class NgxDatex {
         const endDate = this.currentEndDate;
         if (!startDate)
             return '';
-        const format = this.locale().format || 'DD/MM/YYYY';
-        const timeFormat = this.timePicker() ? (this.timePicker24Hour() ? ' HH:mm' : ' hh:mm A') : '';
-        const fullFormat = format + timeFormat;
-        const start = formatDateValue(startDate, fullFormat);
+        const locale = this.locale();
+        const format = locale.format || 'DD/MM/YYYY';
+        // Following vanilla-daterangepicker: ALWAYS use locale.format as-is
+        // User must configure format to include time if timePicker is enabled
+        const start = formatDateValue(startDate, format, locale.locale);
         if (this.singleDatePicker()) {
             return start;
         }
         if (!endDate) {
             return start;
         }
-        const end = formatDateValue(endDate, fullFormat);
+        const end = formatDateValue(endDate, format, locale.locale);
         return `${start} - ${end}`;
     }, ...(ngDevMode ? [{ debugName: "formattedSelectedRange" }] : []));
     // Current label for selected range
@@ -2597,15 +2931,16 @@ class NgxDatex {
             return '';
         let customRange = true;
         const ranges = this.ranges();
+        const locale = this.locale();
         for (const [label, [rangeStart, rangeEnd]] of Object.entries(ranges)) {
             let startMatches;
             let endMatches;
             if (this.timePicker()) {
                 const format = this.timePickerSeconds() ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
-                const startFormatted = formatDateValue(startDate, format);
-                const endFormatted = formatDateValue(endDate, format);
-                const rangeStartFormatted = formatDateValue(rangeStart, format);
-                const rangeEndFormatted = formatDateValue(rangeEnd, format);
+                const startFormatted = formatDateValue(startDate, format, locale.locale);
+                const endFormatted = formatDateValue(endDate, format, locale.locale);
+                const rangeStartFormatted = formatDateValue(rangeStart, format, locale.locale);
+                const rangeEndFormatted = formatDateValue(rangeEnd, format, locale.locale);
                 startMatches = startFormatted === rangeStartFormatted;
                 endMatches = endFormatted === rangeEndFormatted;
             }
@@ -2619,7 +2954,7 @@ class NgxDatex {
             }
         }
         if (customRange) {
-            return this.locale().customRangeLabel || 'Rango Personalizado';
+            return locale.customRangeLabel || 'Rango Personalizado';
         }
         return '';
     }, ...(ngDevMode ? [{ debugName: "currentLabel" }] : []));
@@ -2629,15 +2964,16 @@ class NgxDatex {
         if (!startDate || !endDate)
             return false;
         const ranges = this.ranges();
+        const locale = this.locale();
         for (const [rangeStart, rangeEnd] of Object.values(ranges)) {
             let startMatches;
             let endMatches;
             if (this.timePicker()) {
                 const format = this.timePickerSeconds() ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
-                const startFormatted = formatDateValue(startDate, format);
-                const endFormatted = formatDateValue(endDate, format);
-                const rangeStartFormatted = formatDateValue(rangeStart, format);
-                const rangeEndFormatted = formatDateValue(rangeEnd, format);
+                const startFormatted = formatDateValue(startDate, format, locale.locale);
+                const endFormatted = formatDateValue(endDate, format, locale.locale);
+                const rangeStartFormatted = formatDateValue(rangeStart, format, locale.locale);
+                const rangeEndFormatted = formatDateValue(rangeEnd, format, locale.locale);
                 startMatches = startFormatted === rangeStartFormatted;
                 endMatches = endFormatted === rangeEndFormatted;
             }
@@ -2711,6 +3047,7 @@ class NgxDatex {
                 this.updateMonthsInView();
             }
             if (this.timePicker()) {
+                // Always update time signals from the provided dates to ensure sync
                 this.updateTimeSignalsFromDate(value.startDate, 'start');
                 if (value.endDate) {
                     this.updateTimeSignalsFromDate(value.endDate, 'end');
@@ -2749,6 +3086,7 @@ class NgxDatex {
      * ```
      */
     toggle() {
+        console.log('se ejecuta toggle');
         if (this.disabled() || this.readonly())
             return;
         if (this._isOpen()) {
@@ -2771,12 +3109,13 @@ class NgxDatex {
     openCalendar() {
         if (this.disabled() || this.readonly() || this._isOpen())
             return;
-        // Save old values for potential cancellation
+        // Save old values for potential cancellation (following vanilla daterangepicker)
         this.oldStartDate = new Date(this.currentStartDate);
         this.oldEndDate = this.currentEndDate ? new Date(this.currentEndDate) : null;
         this.previousRightTime = this.currentEndDate ? new Date(this.currentEndDate) : null;
         this.createOverlay();
         this._isOpen.set(true);
+        // Sync time signals with current dates when opening (don't modify the dates)
         if (this.timePicker()) {
             this.updateTimeSignalsFromDate(this.currentStartDate, 'start');
             if (this.currentEndDate) {
@@ -2797,17 +3136,24 @@ class NgxDatex {
      * ```
      */
     closeCalendar() {
+        console.log('ouscerrando');
         this._isOpen.set(false);
         this._hoverDate.set(null);
-        // Handle incomplete selection
+        console.log(!this.currentEndDate && this.oldStartDate && this.oldEndDate);
+        console.log(this.currentEndDate, this.oldStartDate, this.oldEndDate);
+        // Handle incomplete selection (following vanilla daterangepicker logic)
         if (!this.currentEndDate && this.oldStartDate && this.oldEndDate) {
             this.currentStartDate = this.oldStartDate;
             this.currentEndDate = this.oldEndDate;
             this.updateCurrentValue();
+            return;
         }
+        console.log('segunda vez se ejecuta');
+        // Check for changes using appropriate precision based on timePicker
         if (this.oldStartDate && this.oldEndDate) {
-            const hasChanges = !isSameDate(this.currentStartDate, this.oldStartDate, 'day') ||
-                (this.currentEndDate && !isSameDate(this.currentEndDate, this.oldEndDate, 'day'));
+            const precision = this.timePicker() ? 'minute' : 'day';
+            const hasChanges = !isSameDate(this.currentStartDate, this.oldStartDate, precision) ||
+                (this.currentEndDate && !isSameDate(this.currentEndDate, this.oldEndDate, precision));
             if (hasChanges && this.currentEndDate) {
                 this.emitValueChange();
             }
@@ -2831,6 +3177,33 @@ class NgxDatex {
     apply() {
         if (!this.canApplyValue())
             return;
+        // Ensure time values are applied to the dates before closing
+        if (this.timePicker()) {
+            const startTime = this._startTime();
+            const endTime = this._endTime();
+            // Apply start time
+            let startHour = startTime.hour;
+            if (!this.timePicker24Hour()) {
+                if (startTime.ampm === 'PM' && startHour < 12)
+                    startHour += 12;
+                if (startTime.ampm === 'AM' && startHour === 12)
+                    startHour = 0;
+            }
+            this.currentStartDate.setHours(startHour, startTime.minute, 0, 0);
+            // Apply end time if exists
+            if (this.currentEndDate) {
+                let endHour = endTime.hour;
+                if (!this.timePicker24Hour()) {
+                    if (endTime.ampm === 'PM' && endHour < 12)
+                        endHour += 12;
+                    if (endTime.ampm === 'AM' && endHour === 12)
+                        endHour = 0;
+                }
+                this.currentEndDate.setHours(endHour, endTime.minute, 0, 0);
+            }
+            this.updateCurrentValue();
+        }
+        console.log('apply');
         this.updateElement();
         this.closeCalendar();
     }
@@ -2845,6 +3218,7 @@ class NgxDatex {
      * ```
      */
     cancel() {
+        console.log('calcelll');
         if (this.oldStartDate && this.oldEndDate) {
             this.currentStartDate = this.oldStartDate;
             this.currentEndDate = this.oldEndDate;
@@ -2949,8 +3323,19 @@ class NgxDatex {
         if (!range)
             return;
         const [rangeStart, rangeEnd] = range;
-        this.currentStartDate = startOfDay(new Date(rangeStart));
-        this.currentEndDate = endOfDay(new Date(rangeEnd));
+        if (this.timePicker()) {
+            // When timePicker is enabled, preserve the exact time from the range
+            this.currentStartDate = new Date(rangeStart);
+            this.currentEndDate = new Date(rangeEnd);
+            // Update time signals to match the selected range
+            this.updateTimeSignalsFromDate(this.currentStartDate, 'start');
+            this.updateTimeSignalsFromDate(this.currentEndDate, 'end');
+        }
+        else {
+            // When timePicker is disabled, use start/end of day
+            this.currentStartDate = startOfDay(new Date(rangeStart));
+            this.currentEndDate = endOfDay(new Date(rangeEnd));
+        }
         this.updateCurrentValue();
         this.updateMonthsInView();
         this.apply();
@@ -2977,6 +3362,7 @@ class NgxDatex {
         this.elementChanged();
     }
     onInputKeydown(event) {
+        console.log('aquuiii');
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             this.toggle();
@@ -3008,6 +3394,7 @@ class NgxDatex {
     }
     onCalendarKeydown(event) {
         if (event.key === 'Escape' && !this._inputFocused()) {
+            console.log('close outside');
             this.closeCalendar();
         }
     }
@@ -3294,26 +3681,63 @@ class NgxDatex {
     }
     initializeDefaultDates() {
         const today = new Date();
+        // Following vanilla daterangepicker: always start with startOf/endOf day
+        // moment().startOf('day') = 00:00:00
+        // moment().endOf('day') = 23:59:59
         const startDate = startOfDay(today);
         const endDate = this.singleDatePicker() ? startOfDay(today) : endOfDay(today);
+        // When timePicker is enabled, preserve these default times
+        // (vanilla daterangepicker doesn't modify them when timePicker=true)
+        if (this.timePicker()) {
+            // Initialize time signals from the default dates
+            this.updateTimeSignalsFromDate(startDate, 'start');
+            if (endDate) {
+                this.updateTimeSignalsFromDate(endDate, 'end');
+            }
+        }
         this.currentStartDate = startDate;
         this.currentEndDate = endDate;
         this.initializeCalendars(startDate, endDate);
         this.updateCurrentValue();
-        if (this.timePicker()) {
-            this.updateTimeSignalsFromDate(today, 'start');
-            this.updateTimeSignalsFromDate(today, 'end');
-        }
     }
     initializeWithInputDates(inputStartDate, inputEndDate) {
-        const startDate = inputStartDate
-            ? startOfDay(new Date(inputStartDate))
-            : startOfDay(new Date());
-        const endDate = this.singleDatePicker()
-            ? startDate
-            : inputEndDate
-                ? endOfDay(new Date(inputEndDate))
-                : endOfDay(startDate);
+        let startDate;
+        let endDate;
+        if (this.timePicker()) {
+            // When timePicker is enabled, preserve the full date-time or use appropriate defaults
+            if (inputStartDate) {
+                startDate = new Date(inputStartDate);
+                // If the input date doesn't have specific time (is at 00:00:00), keep it as is
+                // Otherwise preserve the provided time
+            }
+            else {
+                startDate = new Date();
+                startDate.setHours(0, 0, 0, 0); // Default start time: 00:00
+            }
+            if (this.singleDatePicker()) {
+                endDate = new Date(startDate);
+            }
+            else if (inputEndDate) {
+                endDate = new Date(inputEndDate);
+                // If the input end date doesn't have specific time (is at 00:00:00), set to end of day
+                if (endDate.getHours() === 0 && endDate.getMinutes() === 0 && endDate.getSeconds() === 0) {
+                    endDate.setHours(23, 59, 0, 0);
+                }
+            }
+            else {
+                endDate = new Date(startDate);
+                endDate.setHours(23, 59, 0, 0); // Default end time: 23:59
+            }
+        }
+        else {
+            // When timePicker is disabled, use start/end of day
+            startDate = inputStartDate ? startOfDay(new Date(inputStartDate)) : startOfDay(new Date());
+            endDate = this.singleDatePicker()
+                ? new Date(startDate)
+                : inputEndDate
+                    ? endOfDay(new Date(inputEndDate))
+                    : endOfDay(startDate);
+        }
         this.currentStartDate = startDate;
         this.currentEndDate = endDate;
         this.initializeCalendars(startDate, endDate);
@@ -3372,7 +3796,7 @@ class NgxDatex {
         }
     }
     setStartDate(startDate) {
-        const newStartDate = this.calendarService.setStartDate(startDate, this.minDate(), this.maxDate(), this.timePicker(), this.timePickerIncrement());
+        const newStartDate = this.calendarService.setStartDate(startDate, this.minDate(), this.maxDate(), this.timePicker(), this.timePickerIncrement(), this.currentStartDate);
         this.currentStartDate = newStartDate;
         this.updateCurrentValue();
         this.updateMonthsInView();
@@ -3381,7 +3805,7 @@ class NgxDatex {
         }
     }
     setEndDate(endDate) {
-        const newEndDate = this.calendarService.setEndDate(endDate, this.currentStartDate, this.maxDate(), this.maxSpan(), this.timePicker(), this.timePickerIncrement());
+        const newEndDate = this.calendarService.setEndDate(endDate, this.currentStartDate, this.maxDate(), this.maxSpan(), this.timePicker(), this.timePickerIncrement(), this.currentEndDate);
         this.previousRightTime = new Date(newEndDate);
         this.currentEndDate = newEndDate;
         this.updateCurrentValue();
@@ -3397,13 +3821,14 @@ class NgxDatex {
         const endDate = this._internalEndDate;
         if (!startDate)
             return;
-        const format = this.locale().format || 'DD/MM/YYYY';
-        const timeFormat = this.timePicker() ? (this.timePicker24Hour() ? ' HH:mm' : ' hh:mm A') : '';
-        const fullFormat = format + timeFormat;
-        const separator = this.locale().separator || ' - ';
-        let newValue = formatDateValue(startDate, fullFormat);
+        const locale = this.locale();
+        const format = locale.format || 'DD/MM/YYYY';
+        const separator = locale.separator || ' - ';
+        // Following vanilla-daterangepicker: ALWAYS use locale.format as-is
+        // User must configure format to include time if timePicker is enabled
+        let newValue = formatDateValue(startDate, format, locale.locale);
         if (!this.singleDatePicker() && endDate) {
-            newValue += separator + formatDateValue(endDate, fullFormat);
+            newValue += separator + formatDateValue(endDate, format, locale.locale);
         }
         this._displayValue.set(newValue);
     }
@@ -3412,6 +3837,7 @@ class NgxDatex {
             startDate: this.currentStartDate,
             endDate: this.currentEndDate,
         };
+        console.log(value, 'updateCurrentValue ');
         this._currentValue.set(value);
     }
     emitValueChange() {
@@ -3459,7 +3885,9 @@ class NgxDatex {
         const dateString = inputValue.split(separator);
         let start = null;
         let end = null;
+        console.log(dateString);
         if (dateString.length === 2) {
+            console.log(this.parseInputDate(dateString[1].trim()));
             start = this.parseInputDate(dateString[0].trim());
             end = this.parseInputDate(dateString[1].trim());
         }
@@ -3487,9 +3915,11 @@ class NgxDatex {
     parseInputDate(dateStr) {
         if (!dateStr)
             return null;
-        const format = this.locale().format || 'DD/MM/YYYY';
+        const locale = this.locale();
+        console.log(locale);
+        const format = locale.format || 'DD/MM/YYYY';
         try {
-            const date = parseDateValue(dateStr, format);
+            const date = parseDateValue(dateStr, format, locale.locale);
             if (isValidDate(date)) {
                 return date;
             }
@@ -3558,5 +3988,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_RANGES, MATERIAL_LIGHT_THEME, NgxDatex, NgxDatexCalendarService, NgxDatexOverlayService, NgxDatexService, NgxDatexTimePickerService, SPANISH_LOCALE, addDays, addMonths, endOfDay, formatDateValue, getStartOfMonth, getStartOfWeek, isBeforeDate, isMobileDevice, isSameDate, isSameDay, isSameMonth, isSameYear, isValidDate, parseDateValue, startOfDay, startOfMonth, startOfWeek };
+export { DEFAULT_RANGES, ISO_LOCALE, ISO_LOCALE_WITH_TIME, MATERIAL_LIGHT_THEME, NgxDatex, NgxDatexCalendarService, NgxDatexOverlayService, NgxDatexService, NgxDatexTimePickerService, SPANISH_LOCALE, SPANISH_LOCALE_WITH_TIME, SPANISH_LOCALE_WITH_TIME_12H, US_ENGLISH_LOCALE, US_ENGLISH_LOCALE_WITH_TIME, addDays, addMonths, endOfDay, formatDateValue, getStartOfMonth, getStartOfWeek, isBeforeDate, isMobileDevice, isSameDate, isSameDay, isSameMonth, isSameYear, isValidDate, parseDateValue, startOfDay, startOfMonth, startOfWeek };
 //# sourceMappingURL=ngx-datex.mjs.map