@luftborn/custom-elements 2.8.1 → 2.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@luftborn/custom-elements",
-	"version": "2.8.1",
+	"version": "2.8.2",
 	"description": "custom HTML elements for the form builder application (node version: 18)",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
@@ -17,7 +17,6 @@
 		"@types/googlemaps": "^3.39.6",
 		"@webcomponents/custom-elements": "1.4.1",
 		"@webcomponents/webcomponentsjs": "2.6.0",
-		"flatpickr": "^4.6.13",
 		"intl-tel-input": "^16.0.8",
 		"restore": "^0.3.0"
 	},
@@ -35,8 +34,5 @@
 		"typescript": "4.4.3",
 		"vinyl-buffer": "~1.0.1",
 		"vinyl-source-stream": "~2.0.0"
-	},
-	"bundleDependencies": [
-		"@webcomponents/webcomponentsjs"
-	]
+	}
 }

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

@@ -0,0 +1,355 @@
+import { CustomDatepickerStyles } from "./CustomDatepickerStyles";
+import { daysOfWeek, defaultDateFormat, formatDate, isMobileDevice, months, supportedDateFormats } from "./CustomDatepickerUtils";
+
+type CustomDatepickerOptions = {
+    input: HTMLInputElement;
+    dateFormat: string;
+    otherTriggers?: HTMLElement[];
+    parentElement?: ShadowRoot | HTMLElement;
+}
+
+export default class CustomDatepicker {
+    private input: HTMLInputElement;
+    private otherTriggers: HTMLElement[];
+    private parentElement: ShadowRoot | HTMLElement;
+
+    private datepicker: HTMLElement;
+    private header: HTMLElement;
+    private monthYear: HTMLElement;
+    private selectNextMonth: HTMLElement;
+    private selectPrevMonth: HTMLElement;
+    private weekdays: HTMLElement;
+    private days: HTMLElement;
+    private selectMonthYear: HTMLElement;
+    private selectDate: HTMLElement;
+    private currentDate: Date;
+    private currentMonth: number;
+    private currentYear: number;
+    private selectedDate: Date;
+    private selectedMonth: number;
+    private selectedYear: number;
+    private selectedDay: number;
+    private firstDayOfMonth: Date;
+    private lastDayOfMonth: Date;
+    private firstDay: number;
+    private lastDay: number;
+
+    private dateFormat: string;
+
+    constructor(options: CustomDatepickerOptions) {
+        this.input = options.input;
+        this.dateFormat = supportedDateFormats.includes(options.dateFormat) ? options.dateFormat : defaultDateFormat;
+        this.otherTriggers = options.otherTriggers || [];
+        this.parentElement = options.parentElement;
+
+        this.currentDate = new Date();
+        this.currentMonth = this.currentDate.getMonth();
+        this.currentYear = this.currentDate.getFullYear();
+        this.selectedDate = new Date();
+        this.selectedMonth = this.selectedDate.getMonth();
+        this.selectedYear = this.selectedDate.getFullYear();
+        this.selectedDay = this.selectedDate.getDate();
+        this.firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1);
+        this.lastDayOfMonth = new Date(this.currentYear, this.currentMonth + 1, 0);
+        this.firstDay = this.firstDayOfMonth.getDay();
+        this.lastDay = this.lastDayOfMonth.getDate();
+
+        this.createDatePickerElements();
+        this.renderCalendar();
+        this.initSelectMonthYear();
+        this.addEventListeners();
+    }
+
+    private createDatePickerElements() {
+        this.datepicker = document.createElement('div');
+        this.datepicker.classList.add('datepicker');
+        this.header = document.createElement('div');
+        this.header.classList.add('header');
+        this.monthYear = document.createElement('span');
+        this.monthYear.classList.add('month-year');
+        this.monthYear.onclick = () => this.toggleSelectMonthYear();
+        this.selectNextMonth = document.createElement('span');
+        this.selectNextMonth.classList.add('next-month');
+        this.selectNextMonth.innerHTML = '▶';
+        this.selectNextMonth.onclick = () => this.moveMonth(1);
+        this.selectPrevMonth = document.createElement('span');
+        this.selectPrevMonth.classList.add('prev-month');
+        this.selectPrevMonth.innerHTML = '◀';
+        this.selectPrevMonth.onclick = () => this.moveMonth(-1);
+        this.header.appendChild(this.selectPrevMonth);
+        this.header.appendChild(this.monthYear);
+        this.header.appendChild(this.selectNextMonth);
+
+        this.weekdays = document.createElement('div');
+        this.weekdays.classList.add('weekdays');
+        this.days = document.createElement('div');
+        this.days.classList.add('days');
+        this.selectMonthYear = document.createElement('div');
+        this.selectMonthYear.classList.add('select-month-year');
+        this.selectDate = document.createElement('div');
+        this.selectDate.classList.add('select-date');
+        this.datepicker.appendChild(this.header);
+        this.datepicker.appendChild(this.selectDate);
+        this.selectDate.appendChild(this.weekdays);
+        this.selectDate.appendChild(this.days);
+        this.datepicker.appendChild(this.selectMonthYear);
+
+        let actions = document.createElement('div');
+        actions.classList.add('actions');
+        this.selectDate.appendChild(actions);
+        let cancel = document.createElement('input');
+        cancel.type = 'reset';
+        cancel.value = 'Cancel';
+        cancel.onclick = () => this.showPicker(false);
+        actions.appendChild(cancel);
+        let today = document.createElement('input');
+        today.type = 'reset';
+        today.value = 'Today';
+        today.onclick = () => this.setDateForToday();
+        actions.appendChild(today);
+
+        if (this.input.parentElement) {
+            this.input.parentElement.appendChild(this.datepicker);
+        } else {
+            document.body.appendChild(this.datepicker);
+        }
+
+        this.applyStyles();
+    }
+
+    private applyStyles() {
+        const style = document.createElement('style');
+        style.innerHTML = CustomDatepickerStyles;
+        this.datepicker.appendChild(style);
+    }
+
+    private moveMonth(steps: number) {
+        let newMonth = this.currentMonth + steps;
+        let newYear = this.currentYear;
+        if (newMonth < 0) {
+            newYear = this.currentYear + Math.floor(newMonth / 12);
+            newMonth = 12 + (newMonth % 12);
+        } else if (newMonth > 11) {
+            newYear = this.currentYear + Math.floor(newMonth / 12);
+            newMonth = newMonth % 12;
+        }
+        this.currentMonth = newMonth;
+        this.currentYear = newYear;
+        this.firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1);
+        this.lastDayOfMonth = new Date(this.currentYear, this.currentMonth + 1, 0);
+        this.firstDay = this.firstDayOfMonth.getDay();
+        this.lastDay = this.lastDayOfMonth.getDate();
+        this.renderCalendar();
+    }
+
+    private renderCalendar() {
+        this.monthYear.innerHTML = months[this.currentMonth] + ' ' + this.currentYear;
+        this.weekdays.innerHTML = '';
+        for (let i = 0; i < daysOfWeek.length; i++) {
+            let span = document.createElement('span');
+            span.innerHTML = daysOfWeek[i];
+            this.weekdays.appendChild(span);
+        }
+        this.days.innerHTML = '';
+        for (let i = 0; i < 42; i++) {
+            let span = document.createElement('span');
+            if (i < this.firstDay) {
+                span.classList.add('day-of-previous-month');
+                span.style.color = '#ccc';
+                let currentDate = new Date(this.currentYear, this.currentMonth, 0);
+                span.innerHTML = (currentDate.getDate() - this.firstDay + i + 1).toString();
+            } else if (i < this.lastDay + this.firstDay) {
+                span.classList.add('day-of-current-month');
+                span.innerHTML = (i - this.firstDay + 1).toString();
+                if (i - this.firstDay + 1 === this.selectedDay && this.currentMonth === this.selectedMonth && this.currentYear === this.selectedYear) {
+                    span.classList.add('selected-day')
+                }
+            } else {
+                span.classList.add('day-of-next-month');
+                span.style.color = '#ccc';
+                span.innerHTML = (i - this.lastDay - this.firstDay + 1).toString();
+            }
+            span.onclick = () => {
+                let moveMonthSteps = 0;
+                this.selectedDay = parseInt(span.innerHTML);
+                if (span.classList.contains('day-of-previous-month')) {
+                    this.selectedMonth = this.currentMonth - 1;
+                    this.selectedYear = this.currentYear;
+                    moveMonthSteps = -1;
+                } else if (span.classList.contains('day-of-current-month')) {
+                    this.selectedMonth = this.currentMonth;
+                    this.selectedYear = this.currentYear;
+                } else {
+                    this.selectedMonth = this.currentMonth + 1;
+                    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.days.appendChild(span);
+        }
+
+        this.positionPicker();
+    }
+
+    private initSelectMonthYear() {
+        this.selectMonthYear.style.display = 'none';
+        this.selectMonthYear.style.height = '200px';
+        if (isMobileDevice()) {
+            this.selectMonthYear.style.height = '300px';
+        }
+        this.selectMonthYear.innerHTML = '';
+        let monthsContainer = document.createElement('div');
+        monthsContainer.classList.add('months');
+        for (let i = 0; i < months.length; i++) {
+            let span = document.createElement('span');
+            span.innerHTML = months[i].substring(0, 3);
+            span.classList.add('select-month');
+            monthsContainer.appendChild(span);
+            span.onclick = () => {
+                this.selectedMonth = months.findIndex(month => month.substring(0, 3) === span.innerHTML);
+                let moveMonthSteps = (this.selectedYear - this.currentYear) * 12 + this.selectedMonth - this.currentMonth;
+                this.moveMonth(moveMonthSteps);
+                this.hideSelectMonthYear();
+            }
+        }
+        for (let i = this.currentYear - 100; i < this.currentYear + 100; i++) {
+            let year = document.createElement('div');
+            year.classList.add('year');
+            year.innerHTML = i.toString();
+            this.selectMonthYear.appendChild(year);
+            if (i === this.currentYear) {
+                year.appendChild(monthsContainer);
+            }
+        }
+        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) {
+                    return;
+                } else {
+                    tempSelectedYear = year;
+                    this.selectedYear = year;
+                    let monthsContainers = this.selectMonthYear.querySelectorAll('.months');
+                    for (let i = 0; i < monthsContainers.length; i++) {
+                        monthsContainers[i].remove();
+                    }
+                    years[i].appendChild(monthsContainer);
+                }
+            });
+        }
+    }
+
+    private toggleSelectMonthYear() {
+        if (this.selectMonthYear.style.display === 'none') {
+            this.selectDate.style.display = 'none';
+            this.selectMonthYear.style.display = 'block';
+            this.header.style.color = '#ccc';
+            let years = this.selectMonthYear.querySelectorAll('.year');
+            for (let i = 0; i < years.length; i++) {
+                if (years[i].querySelector('.months')) {
+                    years[i].scrollIntoView();
+                    break;
+                }
+            }
+        } else {
+            this.hideSelectMonthYear();
+        }
+    }
+
+    private hideSelectMonthYear() {
+        this.selectDate.style.display = 'block';
+        this.selectMonthYear.style.display = 'none';
+        this.header.style.color = '#000';
+    }
+
+    private showPicker(showpicker: boolean = true) {
+        if (showpicker) {
+            this.positionPicker();
+            this.datepicker.style.display = 'block';
+        } else {
+            this.datepicker.style.display = 'none';
+            this.hideSelectMonthYear();
+            return;
+        }
+    }
+
+    private positionPicker() {
+        this.datepicker.style.position = 'fixed';
+        
+        let datepickerHeight = 250;
+        if (isMobileDevice()) {
+            this.datepicker.style.height = '400px';
+            this.datepicker.style.top = '50%';
+            this.datepicker.style.left = '50%';
+            this.datepicker.style.transform = 'translate(-50%, -50%)';
+            this.datepicker.style.width = '90%';
+            this.datepicker.style.maxWidth = '300px';
+            this.datepicker.style.fontSize = '16px';
+            this.datepicker.style.padding = '30px';
+            this.header.style.marginBottom = '20px';
+            let weekdaysSpans = this.weekdays.querySelectorAll('span');
+            let daysSpans = this.days.querySelectorAll('span');
+            weekdaysSpans.forEach(span => span.style.marginBottom = '10px');
+            daysSpans.forEach(span => span.style.marginBottom = '10px');
+        } else {
+            this.datepicker.style.height = datepickerHeight + 'px';
+            let dateInputRect = this.input.getBoundingClientRect();
+            datepickerHeight += 20;
+            if (window.innerHeight - dateInputRect.bottom < datepickerHeight) {
+                this.datepicker.style.top = 'auto';
+                this.datepicker.style.bottom = window.innerHeight - dateInputRect.top + 'px';
+            } else {
+                this.datepicker.style.bottom = 'auto';
+                this.datepicker.style.top = dateInputRect.bottom + 'px';
+            }
+            this.datepicker.style.left = dateInputRect.left + 'px';
+        }
+    }
+
+    private setDateForToday() {
+        this.input.value = formatDate(this.selectedDate, this.dateFormat);
+        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.otherTriggers.forEach(trigger => {
+            trigger.addEventListener('click', () => this.showPicker(true));
+        });
+
+        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;
+            
+            if (!isNeglected){
+                this.showPicker(false);
+            }
+        };
+    }
+}

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

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

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

@@ -0,0 +1,44 @@
+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'];
+
+export const defaultDateFormat = 'yyyy-mm-dd';
+export const supportedDateFormats = [
+    'ddmmyyyy',
+    'mmddyyyy',
+    'dd/mm/yyyy',
+    'mm/dd/yyyy',
+    'dd-mm-yyyy',
+    'mm-dd-yyyy',
+    'yyyy-mm-dd',
+    'yyyy-dd-mm',
+    'Month dd, yyyy',
+    'mm/dd/yy',
+    'dd/mm/yy',
+];
+
+export function formatDate(date: Date, dateFormat: string): string {
+    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)}`,
+    }
+
+    return dateFormats[dateFormat];
+}
+
+export function isMobileDevice() {
+    return /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 480;
+}

package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts

@@ -1,20 +1,23 @@
 import CustomElement from '../../framework/custom-element.decorator';
 import { CustomInputElement } from '../../framework/CustomInputElement';
 import { CustomElementEventArgs } from '../../framework/CustomEvents';
-const flatpickr = require('flatpickr');
+import CustomDatepicker from './CustomDatepicker/CustomDatepicker';
+import { defaultDateFormat, supportedDateFormats } from './CustomDatepicker/CustomDatepickerUtils';
 
 @CustomElement({
 	selector: 'custom-format-date-element',
 	template: `
-		<div class="wrapper flatpickr">
-			<input type="text" id="date-field" data-input />
+		<div class="wrapper">
+			<input type="text" id="date-field" readonly />
 			<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: `
-		@import '../../../node_modules/flatpickr/dist/flatpickr.min.css';
 		:host{
 			width:100%;
 		}
+		* {
+			box-sizing: border-box;
+		}
 		.wrapper{
 			display:flex;
 			position: relative;
@@ -40,34 +43,13 @@ const flatpickr = require('flatpickr');
 			right: 2px;
 			top: 15%;
 		}
-		.flatpickr-calendar {
-			position: fixed !important; /* Use fixed positioning */
-			top: 50% !important; /* Center vertically */
-			left: 50% !important; /* Center horizontally */
-			z-index: 1000 !important; /* Ensure it's above other content */
-		}
 	`,
 	useShadow: true,
 })
 export class CustomFormatDateFieldElement extends CustomInputElement {
 	date: HTMLInputElement;
 	dateWrapper: HTMLElement;
-	datepicker: any;
-
-	private readonly defaultDateFormat = 'yyyy-mm-dd';
-	private readonly supportedDateFormats = [
-		'ddmmyyyy',
-		'mmddyyyy',
-		'dd/mm/yyyy',
-		'mm/dd/yyyy',
-		'dd-mm-yyyy',
-		'mm-dd-yyyy',
-		'yyyy-mm-dd',
-		'yyyy-dd-mm',
-		'Month dd, yyyy',
-		'mm/dd/yy',
-		'dd/mm/yy',
-	];
+	pickerTrigger: HTMLElement;
 
 	constructor() {
 		super();
@@ -91,9 +73,9 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 
 	initChildInputs() {
 		this.date = super.getChildInput('#date-field');
-		this.dateWrapper = super.getChildInput('.flatpickr');
-		this.validateDateFormats();
+		this.pickerTrigger = this.getChildElement('#picker-trigger');
 
+		this.dateFormat = supportedDateFormats.includes(this.dateFormat) ? this.dateFormat : defaultDateFormat;
 		this.date.placeholder = this.dateFormat;
 
 		this.date.addEventListener('change', this.change.bind(this));
@@ -107,7 +89,7 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 			this.date.setAttribute('min', this.min);
 		}
 
-		this.initFlatpickr();
+		this.initCustomPicker();
 	}
 
 	// events
@@ -123,48 +105,12 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
 		);
 	}
 
-	initFlatpickr() {
-		flatpickr(this.dateWrapper, {
-			wrap: true,
-			altInput: true,
-			appendTo: this.shadowRoot.querySelector('.wrapper'),
-			disableMobile: true,
-			parseDate: (datestr) => {
-				return new Date(datestr);
-			},
-			formatDate: (date, format) => {
-				return this.formatDate(date);
-			}
-		});
-	}
-
-	private formatDate(date: Date): string {
-		
-		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)}`,
-		}
-
-		return dateFormats[this.dateFormat];
-	}
-
-	private validateDateFormats() {
-		if (!this.supportedDateFormats.includes(this.dateFormat)) {
-			this.dateFormat = this.defaultDateFormat;
-		}
+	initCustomPicker() {
+		new CustomDatepicker({
+			input: this.date,
+			dateFormat: this.dateFormat,
+			otherTriggers: [this.pickerTrigger],
+			parentElement: this,
+		})
 	}
 }