remove custom date picker element
This commit is contained in:
hackerESQ
@@ -21,97 +21,11 @@
|
||||
input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
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();
|
||||
"
|
||||
>
|
||||
<div x-data>
|
||||
{{-- 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
|
||||
<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="
|
||||
if ($refs.mobileDatePickerInput?.checkVisibility()) {
|
||||
$refs.mobileDatePickerInput?.showPicker()
|
||||
return;
|
||||
}
|
||||
if(datePickerOpen) {
|
||||
$refs.desktopDatePickerInput.focus();
|
||||
return;
|
||||
}
|
||||
datePickerOpen=!datePickerOpen;
|
||||
"
|
||||
<div @click="$refs.dateInput.showPicker?.()"
|
||||
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 --}}
|
||||
|
||||
Reference in New Issue
Block a user