remove custom date picker element

docker/Dockerfile

@@ -27,7 +27,7 @@ RUN apt-get update && apt-get upgrade -y \
 
 # Install PHP extensions
 RUN docker-php-ext-configure gd --with-freetype --with-jpeg \
-    && docker-php-ext-install -j$(nproc) gd zip
+    && docker-php-ext-install -j$(nproc) gd zip intl
 
 # Copy application files
 COPY . .

resources/views/components/ui/datetime.blade.php

@@ -21,97 +21,11 @@
     input[type="date"]::-webkit-calendar-picker-indicator {
         color: transparent;
         background: transparent;
+        display: none;
     }
 </style>
 
-<div
+<div x-data>
-    x-cloak
-    x-data="{
-        datePickerOpen: false,
-        datePickerValue: $wire.entangle(@js($modelName)),
-        datePickerMonth: '',
-        datePickerYear: '',
-        datePickerDay: '',
-        datePickerDaysInMonth: [],
-        datePickerBlankDaysInMonth: [],
-        datePickerMonthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-        datePickerDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-        datePickerDayClicked(day) {
-            let selectedDate = new Date(this.datePickerYear, this.datePickerMonth, day);
-            this.datePickerDay = day;
-            this.datePickerValue = this.dateToValue(selectedDate);
-            this.datePickerIsSelectedDate(day);
-            this.datePickerOpen = false;
-        },
-        datePickerPreviousMonth(){
-            if (this.datePickerMonth == 0) { 
-                this.datePickerYear--; 
-                this.datePickerMonth = 12; 
-            } 
-            this.datePickerMonth--;
-            this.datePickerCalculateDays();
-        },
-        datePickerNextMonth(){
-            if (this.datePickerMonth == 11) { 
-                this.datePickerMonth = 0; 
-                this.datePickerYear++; 
-            } else { 
-                this.datePickerMonth++; 
-            }
-            this.datePickerCalculateDays();
-        },
-        datePickerIsSelectedDate(day) {
-            const d = new Date(this.datePickerYear, this.datePickerMonth, day);
-            return this.datePickerValue === this.dateToValue(d) ? true : false;
-        },
-        datePickerIsToday(day) {
-            const today = new Date();
-            const d = new Date(this.datePickerYear, this.datePickerMonth, day);
-            return today.toDateString() === d.toDateString() ? true : false;
-        },
-        datePickerCalculateDays() {
-            let daysInMonth = new Date(this.datePickerYear, this.datePickerMonth + 1, 0).getDate();
-            // find where to start calendar day of week
-            let dayOfWeek = new Date(this.datePickerYear, this.datePickerMonth).getDay();
-            let blankdaysArray = [];
-            for (var i = 1; i <= dayOfWeek; i++) {
-                blankdaysArray.push(i);
-            }
-            let daysArray = [];
-            for (var i = 1; i <= daysInMonth; i++) {
-                daysArray.push(i);
-            }
-            this.datePickerBlankDaysInMonth = blankdaysArray;
-            this.datePickerDaysInMonth = daysArray;
-        },
-        dateToValue(d) {
-            d = this.parseDate(d)
-            let formattedDate = ('0' + d.getDate()).slice(-2); 
-            let formattedMonthInNumber = ('0' + (parseInt(d.getMonth()) + 1)).slice(-2);
-            let formattedYear = d.getFullYear();
-
-            return `${formattedYear}-${formattedMonthInNumber}-${formattedDate}`;
-        },
-        parseDate(d) {
-            date = new Date();
-            let userTimezoneOffset = date.getTimezoneOffset() * 60000;
-            return new Date(Date.parse(d) + userTimezoneOffset);
-        }
-    }" 
-    x-init="
-        currentDate = new Date();
-        if (datePickerValue) {
-            
-            currentDate = parseDate(datePickerValue)
-            
-        }
-        datePickerMonth = currentDate.getMonth();
-        datePickerYear = currentDate.getFullYear();
-        datePickerDay = currentDate.getDay();
-        datePickerValue = currentDate.toISOString().slice(0, 10);
-        datePickerCalculateDays();
-    "
->
     {{-- STANDARD LABEL --}}
     @if($label)
         <label for="{{ $id }}" class="pt-0 label label-text font-semibold">
@@ -126,96 +40,15 @@
     @endif
 
     <div class="flex-1 relative">
-        {{-- DESKTOP --}}
-        <div
-            x-ref="desktopDatePickerInput"
-            x-html="parseDate(datePickerValue).toLocaleDateString()"
-            x-on:keydown.escape="datePickerOpen=false"
-            @click="datePickerOpen=true"
-
-            {{ $attributes->class([
-                    "hidden md:block py-2 input px-4 input-primary w-full peer appearance-none",
-                    'ps-10' => ($icon),
-                    'border border-dashed' => $attributes->has('readonly') && $attributes->get('readonly') == true,
-                    'input-error' => $errors->has($errorFieldName)
-                ]) }}
-        ></div>
-
-        <div  
-            x-show="datePickerOpen"
-            x-transition:enter="ease-out duration-200"
-            x-transition:enter-start="-translate-x-2"
-            x-transition:enter-end="translate-x-0"
-            @click.away="datePickerOpen = false" 
-            class="
-                p-4
-                mt-12
-                top-0
-                left-0
-                max-w-lg
-                w-[17rem]
-                absolute
-                z-100
-                bg-base-100
-                dark:bg-base-300
-                rounded-box
-                shadow-md   
-                select-none
-            "
-        >
-            <div class="flex justify-between items-center mb-2">
-                <div>
-                    <span x-text="datePickerMonthNames[datePickerMonth]" class="text-lg font-bold"></span>
-                    <span x-text="datePickerYear" class="ml-1 text-lg font-normal text-gray-600"></span>
-                </div>
-                <div>
-                    <button @click="datePickerPreviousMonth()" type="button" class="inline-flex p-1 rounded-full transition duration-100 ease-in-out cursor-pointer focus:outline-none focus:shadow-outline hover:bg-accent/50">
-                        <x-ui.icon name="o-chevron-left" />
-                    </button>
-                    <button @click="datePickerNextMonth()" type="button" class="inline-flex p-1 rounded-full transition duration-100 ease-in-out cursor-pointer focus:outline-none focus:shadow-outline hover:bg-accent/50">
-                        <x-ui.icon name="o-chevron-right" />
-                    </button>
-                </div>
-            </div>
-            <div class="grid grid-cols-7 mb-3">
-                <template x-for="(day, index) in datePickerDays" :key="index">
-                    <div class="px-0.5">
-                        <div x-text="day" class="text-xs font-medium text-center"></div>
-                    </div>
-                </template>
-            </div>
-            <div class="grid grid-cols-7">
-                <template x-for="blankDay in datePickerBlankDaysInMonth">
-                    <div class="p-1 text-sm text-center border border-transparent"></div>
-                </template>
-                <template x-for="(day, dayIndex) in datePickerDaysInMonth" :key="dayIndex">
-                    <div class="px-0.5 mb-1 aspect-square">
-                        <div 
-                            x-text="day"
-                            @click="datePickerDayClicked(day)" 
-                            :class="{
-                                'border border-accent/50': datePickerIsToday(day) == true, 
-                                'hover:bg-neutral-800/70': datePickerIsToday(day) == false && datePickerIsSelectedDate(day) == false,
-                                'text-primary-content bg-primary hover:bg-primary/50': datePickerIsSelectedDate(day) == true
-                            }" 
-                            class="flex justify-center items-center w-7 h-7 text-sm leading-none text-center rounded-full cursor-pointer"
-                        ></div>
-                    </div>
-                </template>
-            </div>
-        </div>
-
-        {{-- MOBILE/NATIVE --}}
         <input
             type="date"
-            x-model="datePickerValue"
             placeholder="Select date"
             id="{{ $id }}"
+            x-ref="dateInput"
             onfocus="this.showPicker?.()"
-            x-ref="mobileDatePickerInput"
 
             {{ $attributes->class([
-                    "block md:hidden input input-primary w-full peer appearance-none",
+                    "block input input-primary w-full peer appearance-none",
                     'ps-10' => ($icon),
                     'border border-dashed' => $attributes->has('readonly') && $attributes->get('readonly') == true,
                     'input-error' => $errors->has($errorFieldName)
@@ -223,23 +56,11 @@
         />
 
         {{-- ICON --}}
-        <div @click="
+        <div @click="$refs.dateInput.showPicker?.()"
-                if ($refs.mobileDatePickerInput?.checkVisibility()) {
-                    $refs.mobileDatePickerInput?.showPicker()
-                    return;
-                }
-                if(datePickerOpen) {
-                    $refs.desktopDatePickerInput.focus();
-                    return;
-                }
-                datePickerOpen=!datePickerOpen;
-            "
             class="z-60 absolute top-1/2 -translate-y-1/2 end-0 p-3 cursor-pointer text-neutral-400 hover:text-neutral-500"
         >
             <x-ui.icon name="o-calendar" />
         </div>
-
-
     </div>
 
     {{-- ERROR --}}