@luftborn/custom-elements 2.8.3 → 2.8.5

package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.ts

@@ -1,5 +1,5 @@
 import { CustomDatepickerStyles } from "./CustomDatepickerStyles";
-import { defaultDateFormat, formatDate, isMobileDevice, supportedDateFormats } from "./CustomDatepickerUtils";
+import { convertStringToDate, defaultDateFormat, formatDate, isMobileDevice, supportedDateFormats } from "./CustomDatepickerUtils";
 import { GetMonths, GetWeekdays } from "./DatepickerTranslations";
 
 type CustomDatepickerOptions = {
@@ -35,6 +35,7 @@ export default class CustomDatepicker {
     private lastDayOfMonth: Date;
     private firstDay: number;
     private lastDay: number;
+    private language: string;
 
     private months: string[] = [];
     private daysOfWeek: string[] = [];
@@ -59,7 +60,8 @@ export default class CustomDatepicker {
         this.firstDay = this.firstDayOfMonth.getDay();
         this.lastDay = this.lastDayOfMonth.getDate();
 
-        this.months = GetMonths(options.language);
+        this.language = options.language || 'en';
+        this.months = GetMonths(this.language);
         this.daysOfWeek = GetWeekdays(options.language, 'short');
 
         this.createDatePickerElements();
@@ -70,6 +72,7 @@ export default class CustomDatepicker {
 
     private createDatePickerElements() {
         this.datepicker = document.createElement('div');
+        this.datepicker.id = this.input.id + '-datepicker';
         this.datepicker.classList.add('datepicker');
         this.header = document.createElement('div');
         this.header.classList.add('header');
@@ -116,11 +119,7 @@ export default class CustomDatepicker {
         today.onclick = () => this.setDateForToday();
         actions.appendChild(today);
 
-        if (this.input.parentElement) {
-            this.input.parentElement.appendChild(this.datepicker);
-        } else {
-            document.body.appendChild(this.datepicker);
-        }
+        document.body.appendChild(this.datepicker);
 
         this.applyStyles();
     }
@@ -151,7 +150,8 @@ export default class CustomDatepicker {
     }
 
     private renderCalendar() {
-        this.monthYear.innerHTML = this.months[this.currentMonth] + ' ' + this.currentYear;
+        const monthName = this.months[this.currentMonth];
+        this.monthYear.innerHTML = monthName.charAt(0).toUpperCase() + monthName.slice(1) + ' ' + this.currentYear;
         this.weekdays.innerHTML = '';
         for (let i = 0; i < this.daysOfWeek.length; i++) {
             let span = document.createElement('span');
@@ -192,25 +192,34 @@ export default class CustomDatepicker {
                     this.selectedYear = this.currentYear;
                     moveMonthSteps = 1;
                 }
-                this.selectedDate = new Date(this.selectedYear, this.selectedMonth, this.selectedDay);
-                let selectedDayElement = this.days.querySelector('.selected-day');
-                if (selectedDayElement) {
-                    selectedDayElement.classList.remove('selected-day');
-                }
-                span.classList.add('selected-day');
-
-                const formattedDate = formatDate(this.selectedDate, this.dateFormat);
-                this.input.value = formattedDate;
-
-                this.showPicker(false);
+                this.setSelectedDate(moveMonthSteps, span);
             };
             this.days.appendChild(span);
         }
-
         this.positionPicker();
     }
 
+    private setSelectedDate(moveMonthSteps: number = 0, span?: HTMLElement) {
+        this.selectedDate = new Date(this.selectedYear, this.selectedMonth, this.selectedDay);
+        let selectedDayElement = this.days.querySelector('.selected-day');
+        if (selectedDayElement) {
+            selectedDayElement.classList.remove('selected-day');
+        }
+        span.classList.add('selected-day');
+
+        const formattedDate = formatDate(this.selectedDate, this.dateFormat, this.language);
+        this.input.value = formattedDate;
+
+        this.showPicker(false);
+        
+        if (moveMonthSteps !== 0) {
+            this.moveMonth(moveMonthSteps);
+        }
+    }
+    
     private initSelectMonthYear() {
+        let tempCurrentYear = this.currentYear;
+        
         this.selectMonthYear.style.display = 'none';
         this.selectMonthYear.style.height = '200px';
         if (isMobileDevice()) {
@@ -225,8 +234,8 @@ export default class CustomDatepicker {
             span.classList.add('select-month');
             monthsContainer.appendChild(span);
             span.onclick = () => {
-                this.selectedMonth = this.months.findIndex(month => month.substring(0, 3) === span.innerHTML);
-                let moveMonthSteps = (this.selectedYear - this.currentYear) * 12 + this.selectedMonth - this.currentMonth;
+                const tempCurrentMonth = this.months.findIndex(month => month.substring(0, 3) === span.innerHTML);
+                let moveMonthSteps = (tempCurrentYear - this.currentYear) * 12 + tempCurrentMonth - this.currentMonth;
                 this.moveMonth(moveMonthSteps);
                 this.hideSelectMonthYear();
             }
@@ -241,15 +250,13 @@ export default class CustomDatepicker {
             }
         }
         let years = this.selectMonthYear.querySelectorAll('.year');
-        let tempSelectedYear = this.selectedYear;
         for (let i = 0; i < years.length; i++) {
             years[i].addEventListener('click', () => {
                 let year = parseInt(years[i].innerHTML);
-                if (year === tempSelectedYear) {
+                if (year === tempCurrentYear) {
                     return;
                 } else {
-                    tempSelectedYear = year;
-                    this.selectedYear = year;
+                    tempCurrentYear = year;
                     let monthsContainers = this.selectMonthYear.querySelectorAll('.months');
                     for (let i = 0; i < monthsContainers.length; i++) {
                         monthsContainers[i].remove();
@@ -285,15 +292,38 @@ export default class CustomDatepicker {
 
     private showPicker(showpicker: boolean = true) {
         if (showpicker) {
+            this.closeOtherDatepickers();
+            localStorage.setItem('shownDatepicker', this.datepicker.id);
+            localStorage.setItem('focusedInput', this.input.id);
             this.positionPicker();
             this.datepicker.style.display = 'block';
+            this.navigateToSelectedMonth();
         } else {
             this.datepicker.style.display = 'none';
+            this.closeOtherDatepickers();
             this.hideSelectMonthYear();
+            this.input.placeholder = this.dateFormat;
             return;
         }
     }
 
+    private closeOtherDatepickers() {
+        const shownDatepickerId = localStorage.getItem('shownDatepicker');
+        if (shownDatepickerId) {
+            const shownDatepicker = document.getElementById(shownDatepickerId);
+            if (shownDatepicker) {
+                shownDatepicker.style.display = 'none';
+            }
+        }
+        localStorage.removeItem('shownDatepicker');
+        localStorage.removeItem('focusedInput');
+    }
+
+    private navigateToSelectedMonth() {
+        let moveMonthSteps = (this.selectedYear - this.currentYear) * 12 + this.selectedMonth - this.currentMonth;
+        this.moveMonth(moveMonthSteps);
+    }
+
     private positionPicker() {
         this.datepicker.style.position = 'fixed';
         
@@ -328,7 +358,26 @@ export default class CustomDatepicker {
     }
 
     private setDateForToday() {
-        this.input.value = formatDate(this.selectedDate, this.dateFormat);
+        this.input.value = formatDate(this.selectedDate, this.dateFormat, this.language);
+        this.showPicker(false);
+    }
+
+    private setDateUsingInputValue() {
+        const date = convertStringToDate(this.input.value, this.dateFormat, this.language);
+        if (date) {
+            this.selectedDate = date;
+            this.selectedMonth = date.getMonth();
+            this.selectedYear = date.getFullYear();
+            this.selectedDay = date.getDate();
+            this.renderCalendar();
+            this.input.value = formatDate(this.selectedDate, this.dateFormat, this.language);
+            this.input.blur();
+        } else {
+            this.input.value = 'Invalid Date';
+            setTimeout(() => {
+                this.input.value = '';
+            }, 300);
+        }
         this.showPicker(false);
     }
 
@@ -336,13 +385,12 @@ export default class CustomDatepicker {
         this.input.addEventListener('click', () => this.showPicker(true));
         this.input.addEventListener('focus', () => this.showPicker(true));
         this.input.addEventListener('change', () => {
-            const date = new Date(this.input.value);
-            if (date.toString() !== 'Invalid Date') {
-                this.selectedDate = date;
-                this.selectedMonth = date.getMonth();
-                this.selectedYear = date.getFullYear();
-                this.selectedDay = date.getDate();
-                this.renderCalendar();
+            this.setDateUsingInputValue();
+        });
+
+        this.input.addEventListener('keydown', (event: KeyboardEvent) => {
+            if (event.key === 'Enter') {
+                this.setDateUsingInputValue();
             }
         });
 
@@ -351,9 +399,22 @@ export default class CustomDatepicker {
         });
 
         document.onclick = (event: Event) => {
-            const elementsToNeglect = [this.input, this.datepicker, this.monthYear, this.weekdays, this.days, this.header, this.selectMonthYear];
             const element = event.target as HTMLElement;
-            const isNeglected = elementsToNeglect.includes(element) || elementsToNeglect.includes(element.parentElement) || (element).classList.contains('select-month') || element === this.parentElement;
+            
+            const shownDatepicker = document.getElementById(localStorage.getItem('shownDatepicker'));
+            if (shownDatepicker){
+                const elementInsideDatepicker = shownDatepicker.querySelector(element.tagName);
+                if (elementInsideDatepicker){
+                    return;
+                }    
+            }
+            
+            const elementsToNeglect = [this.input, this.datepicker, this.monthYear, this.weekdays, this.days, this.header, this.selectMonthYear];
+            const isNeglected = elementsToNeglect.includes(element)
+                                || elementsToNeglect.includes(element.parentElement) 
+                                || (element).classList.contains('select-month') 
+                                || element === this.parentElement 
+                                || element.tagName === 'CUSTOM-FORMAT-DATE-ELEMENT'
             
             if (!isNeglected){
                 this.showPicker(false);

package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepickerUtils.ts

@@ -1,3 +1,5 @@
+import { GetMonths } from "./DatepickerTranslations";
+
 export const months: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 export const daysOfWeek: string[] = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 
@@ -16,29 +18,112 @@ export const supportedDateFormats = [
     'dd/mm/yy',
 ];
 
-export function formatDate(date: Date, dateFormat: string): string {
+export function formatDate(date: Date, dateFormat: string, language:string = 'en'): string {
+    debugger;
     const year = date.getFullYear();
     const month = (date.getMonth() + 1).toString().padStart(2, '0');
     const day = date.getDate().toString().padStart(2, '0');
-    const monthName = date.toLocaleString('default', { month: 'long' });
-    
-    const dateFormats = {
-        'ddmmyyyy': `${day}${month}${year}`,
-        'mmddyyyy': `${month}${day}${year}`,
-        'dd/mm/yyyy': `${day}/${month}/${year}`,
-        'mm/dd/yyyy': `${month}/${day}/${year}`,
-        'dd-mm-yyyy': `${day}-${month}-${year}`,
-        'mm-dd-yyyy': `${month}-${day}-${year}`,
-        'yyyy-mm-dd': `${year}-${month}-${day}`,
-        'yyyy-dd-mm': `${year}-${day}-${month}`,
-        'Month dd, yyyy': `${monthName} ${day}, ${year}`,
-        'mm/dd/yy': `${month}/${day}/${year.toString().slice(-2)}`,
-        'dd/mm/yy': `${day}/${month}/${year.toString().slice(-2)}`,
-    }
+    const monthName = GetMonths(language)[date.getMonth()];
+    const capitalizedMonthName = monthName.charAt(0).toUpperCase() + monthName.slice(1);
+
+    const dateFormats = supportedDateFormats.reduce((acc, format) => {
+        acc[format] = format.replace('yyyy', year.toString())
+            .replace('yy', year.toString().slice(-2))
+            .replace('mm', month)
+            .replace('dd', day)
+            .replace('Month', capitalizedMonthName);
+        return acc;
+    }, {});
 
     return dateFormats[dateFormat];
 }
 
 export function isMobileDevice() {
     return /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 480;
-}
+}
+
+export function convertStringToDate(dateString: string, dateFormat: string, language: string = 'en'): Date | null {
+    debugger;
+    let year, month, day;
+
+    if (!validateDateString(dateString, dateFormat, language)) {
+        return null;
+    }
+
+    const getMonthIndex = (monthName: string) => {
+        const months = GetMonths(language).map(month => month.toLowerCase());
+        const englishMonths = GetMonths('en').map(month => month.toLowerCase());
+        const index = months.indexOf(monthName.toLowerCase());
+        if (index === -1) {
+            const englishMonthIndex = englishMonths.indexOf(monthName.toLowerCase());
+            return englishMonthIndex === -1 ? NaN : englishMonthIndex;
+        }
+
+        return index + 1;    
+    };
+
+    switch (dateFormat) {
+        case 'ddmmyyyy':
+            day = parseInt(dateString.substring(0, 2));
+            month = parseInt(dateString.substring(2, 4));
+            year = parseInt(dateString.substring(4, 8));
+            break;
+        case 'mmddyyyy':
+            month = parseInt(dateString.substring(0, 2));
+            day = parseInt(dateString.substring(2, 4));
+            year = parseInt(dateString.substring(4, 8));
+            break;
+        case 'dd/mm/yyyy':
+        case 'dd-mm-yyyy':
+            [day, month, year] = dateString.split(/\/|-/).map(Number);
+            break;
+        case 'mm/dd/yyyy':
+        case 'mm-dd-yyyy':
+            [month, day, year] = dateString.split(/\/|-/).map(Number);
+            break;
+        case 'yyyy-mm-dd':
+        case 'yyyy-dd-mm':
+            [year, month, day] = dateFormat === 'yyyy-mm-dd' ? dateString.split('-').map(Number) : [dateString.slice(0, 4), dateString.slice(8, 10), dateString.slice(5, 7)].map(Number);
+            break;
+        case 'Month dd, yyyy':
+            const parts = dateString.split(' ');
+            year = parseInt(parts[2]);
+            month = getMonthIndex(parts[0]);
+            day = parseInt(parts[1].replace(',', ''));
+            break;
+        case 'mm/dd/yy':
+            const [monthSt, daySt, yearSt] = dateString.split('/');
+            month = parseInt(monthSt);
+            day = parseInt(daySt);
+            year = parseInt(yearSt) + 2000;
+            break;
+        case 'dd/mm/yy':
+            const [dayStr, monthStr, yearStr] = dateString.split('/');
+            day = parseInt(dayStr);
+            month = parseInt(monthStr);
+            year = parseInt(yearStr) + 2000;
+            break;
+        default:
+            return null;
+    }
+
+    if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {
+        return new Date(year, month - 1 , day);
+    } else {
+        return null;
+    }
+}
+
+
+function validateDateString(dateString: string, dateFormat: string, language: string ='en'): boolean {
+    const dateFormatsRegex = supportedDateFormats.reduce((acc, format) => {
+        acc[format] = new RegExp(`^${format.replace('yyyy', '\\d{4}')
+            .replace('yy', '\\d{2}')
+            .replace('mm', '(0[1-9]|1[0-2])')
+            .replace('dd', '(0[1-9]|[12][0-9]|3[01])')
+            .replace('Month', GetMonths(language).join('|') + '|' +  GetMonths('en').join('|'))}$`, 'i');
+        return acc;
+    }, {});
+
+    return dateFormatsRegex[dateFormat].test(dateString);
+}

package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts

@@ -8,7 +8,7 @@ import { defaultDateFormat, supportedDateFormats } from './CustomDatepicker/Cust
 	selector: 'custom-format-date-element',
 	template: `
 		<div class="wrapper">
-			<input type="text" id="date-field" readonly />
+			<input type="text" id="date-field" />
 			<svg id="picker-trigger" data-toggle viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="4" width="20" height="18" rx="1" fill="#000"/><rect x="4" y="8" width="16" height="12" fill="white"/><path d="M4 10H20" stroke="#000" stroke-width="1"/><circle cx="16" cy="14" r="2" fill="#F44336"/><rect x="6" y="2" width="3" height="4" rx=".5" fill="#000"/><rect x="15" y="2" width="3" height="4" rx=".5" fill="#000"/></svg>
 		</div>`,
 	style: `
@@ -75,6 +75,8 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 
 	initChildInputs() {
 		this.date = super.getChildInput('#date-field');
+		this.date.id = `date-field-${Date.now()}`;
+
 		this.pickerTrigger = this.getChildElement('#picker-trigger');
 
 		this.dateFormat = supportedDateFormats.includes(this.dateFormat) ? this.dateFormat : defaultDateFormat;