@luftborn/custom-elements 2.8.4 → 2.8.6

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 = {
@@ -72,9 +72,10 @@ export default class CustomDatepicker {
 
     private createDatePickerElements() {
         this.datepicker = document.createElement('div');
-        this.datepicker.classList.add('datepicker');
+        this.datepicker.id = this.input.id + '-datepicker';
+        this.datepicker.classList.add('custom-datepicker');
         this.header = document.createElement('div');
-        this.header.classList.add('header');
+        this.header.classList.add('custom-datepicer-header');
         this.monthYear = document.createElement('span');
         this.monthYear.classList.add('month-year');
         this.monthYear.onclick = () => this.toggleSelectMonthYear();
@@ -118,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();
     }
@@ -195,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.language);
-                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()) {
@@ -228,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();
             }
@@ -244,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();
@@ -288,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';
         
@@ -335,17 +362,35 @@ export default class CustomDatepicker {
         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);
+    }
+
     private addEventListeners() {
         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();
             }
         });
 
@@ -354,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/CustomDatepickerStyles.ts

@@ -1,100 +1,101 @@
 export const CustomDatepickerStyles = `
-    .datepicker {
+    .custom-datepicker {
         position: fixed;
         background-color: #fff;
         display: none;
         width: 200px;
         border: 1px solid #ccc;
         border-radius: 5px;
-        padding: 10px;
+        padding: 20px;
         margin: 0 auto;
         box-shadow: 0 0 10px 0 #ccc;
         font: 12px Arial, sans-serif;
     }
 
-    .header {
+    .custom-datepicker .custom-datepicer-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 10px;
     }
-    .weekdays {
+    .custom-datepicker .weekdays {
         display: flex;
         justify-content: space-between;
+        margin-top: 20px;
     }
-    .weekdays span {
+    .custom-datepicker .weekdays span {
         width: 14.28%;
         text-align: center;
         padding: 5px 0;
     }
-    .days {
+    .custom-datepicker .days {
         display: flex;
         flex-wrap: wrap;
     }
-    .days span {
+    .custom-datepicker .days span {
         width: 14.28%;
         text-align: center;
         padding: 5px 0;
     }
-    .days span:hover {
+    .custom-datepicker .days span:hover {
         background-color: #B2d5ff;
         cursor: pointer;
     }
-    .days span.today {
+    .custom-datepicker .days span.today {
         border: 1px solid #000;
     }
-    .days span.selected-day {
+    .custom-datepicker .days span.selected-day {
         background-color: #0075ff;
         color: #fff;
     }
-    .prev-month, .next-month {
+    .custom-datepicker .prev-month, .next-month {
         cursor: pointer;
     }
-    .month-year {
+    .custom-datepicker .month-year {
         font-weight: bold;
     }
-    .month-year:hover {
+    .custom-datepicker .month-year:hover {
         cursor: pointer;
     }
-    .select-month-year {
+    .custom-datepicker .select-month-year {
         display: none;
         width: 100%;
         overflow-y: auto;
     }
-    .select-month-year .year {
+    .custom-datepicker .select-month-year .year {
         text-align: center;
         background-color: #f0f0f0;
         border-bottom: 1px solid #3f3d3d;
         padding: 5px 0;
         cursor: pointer;
     }
-    .select-month-year .year .months {
+    .custom-datepicker .select-month-year .year .months {
         display: flex;
         flex-wrap: wrap;
     }
-    .select-month-year .year .months span {
+    .custom-datepicker .select-month-year .year .months span {
         width: 25%;
         text-align: center;
         padding: 10px 0;
         background-color: #fff;
     }
-    .select-month-year .year .months span:hover {
+    .custom-datepicker .select-month-year .year .months span:hover {
         background-color: #B2d5ff;
         cursor: pointer;
     }
-    .actions {
+    .custom-datepicker .actions {
         display: flex;
         justify-content: space-between;
-        margin-top: 10px;
+        margin-top: 30px;
     }
-    .actions input {
+    .custom-datepicker .actions input {
         color: #0075ff;
         border: none;
         background-color: transparent;
         padding: 5px;
         border: 1px solid transparent;
     }
-    .actions input:hover {
+    .custom-datepicker .actions input:hover {
         background-color: #B2d5ff;
         border-color: #000;
     }

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

@@ -24,24 +24,104 @@ export function formatDate(date: Date, dateFormat: string, language:string = 'en
     const day = date.getDate().toString().padStart(2, '0');
     const monthName = GetMonths(language)[date.getMonth()];
     const capitalizedMonthName = monthName.charAt(0).toUpperCase() + monthName.slice(1);
-    
-    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': `${capitalizedMonthName} ${day}, ${year}`,
-        'mm/dd/yy': `${month}/${day}/${year.toString().slice(-2)}`,
-        'dd/mm/yy': `${day}/${month}/${year.toString().slice(-2)}`,
-    }
+
+    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 {
+    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;