h/oslstats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added season edits

Browse Source
This commit is contained in:
Haelnorr
2026-02-09 20:35:04 +11:00
parent aaf532b835
commit bf3e526f1e
11 changed files with 561 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
internal/view/datepicker/datepicker.templ
View File

@@ -27,60 +27,94 @@ package datepicker
// The component submits the date in DD/MM/YYYY format. To parse on the server:
// date, err := time.Parse("02/01/2006", dateString)
templ DatePicker(id, name, label, placeholder string, required bool, onChange string) {
@DatePickerWithDefault(id, name, label, placeholder, required, onChange, "")
}
// DatePickerWithDefault is the same as DatePicker but accepts a default value in DD/MM/YYYY format
templ DatePickerWithDefault(id, name, label, placeholder string, required bool, onChange, defaultValue string) {
<div
x-data="{
showPicker: false,
selectedDate: '',
displayDate: '',
tempYear: new Date().getFullYear(),
tempMonth: new Date().getMonth(),
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
init() {
// Ensure dropdowns are initialized with current month/year
this.tempYear = new Date().getFullYear();
this.tempMonth = new Date().getMonth();
},
getDaysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate();
},
getFirstDayOfMonth(year, month) {
return new Date(year, month, 1).getDay();
},
selectDate(day) {
const d = String(day).padStart(2, '0');
const m = String(this.tempMonth + 1).padStart(2, '0');
const y = this.tempYear;
this.displayDate = d + '/' + m + '/' + y;
this.selectedDate = this.displayDate;
$refs.dateInput.value = this.displayDate;
this.showPicker = false;
// Manually trigger input event so Alpine.js @input handler fires
$refs.dateInput.dispatchEvent(new Event('input', { bubbles: true }));
},
prevMonth() {
if (this.tempMonth === 0) {
this.tempMonth = 11;
this.tempYear--;
} else {
this.tempMonth--;
}
},
nextMonth() {
if (this.tempMonth === 11) {
this.tempMonth = 0;
this.tempYear++;
} else {
this.tempMonth++;
}
},
isToday(day) {
const today = new Date();
return day === today.getDate() &&
this.tempMonth === today.getMonth() &&
this.tempYear === today.getFullYear();
}
}"
x-data={ templ.JSFuncCall("datePickerData", defaultValue).CallInline }
>
<script>
function datePickerData(defaultValue) {
return {
showPicker: false,
selectedDate: defaultValue || "",
displayDate: defaultValue || "",
tempYear: new Date().getFullYear(),
tempMonth: new Date().getMonth(),
months: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
init() {
if (this.displayDate) {
const parts = this.displayDate.split("/");
if (parts.length === 3) {
this.tempYear = parseInt(parts[2]);
this.tempMonth = parseInt(parts[1]) - 1;
}
} else {
this.tempYear = new Date().getFullYear();
this.tempMonth = new Date().getMonth();
}
},
getDaysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate();
},
getFirstDayOfMonth(year, month) {
return new Date(year, month, 1).getDay();
},
selectDate(day) {
const d = String(day).padStart(2, "0");
const m = String(this.tempMonth + 1).padStart(2, "0");
const y = this.tempYear;
this.displayDate = d + "/" + m + "/" + y;
this.selectedDate = this.displayDate;
this.$refs.dateInput.value = this.displayDate;
this.showPicker = false;
// Manually trigger input event so Alpine.js @input handler fires
this.$refs.dateInput.dispatchEvent(
new Event("input", { bubbles: true }),
);
},
prevMonth() {
if (this.tempMonth === 0) {
this.tempMonth = 11;
this.tempYear--;
} else {
this.tempMonth--;
}
},
nextMonth() {
if (this.tempMonth === 11) {
this.tempMonth = 0;
this.tempYear++;
} else {
this.tempMonth++;
}
},
isToday(day) {
const today = new Date();
return (
day === today.getDate() &&
this.tempMonth === today.getMonth() &&
this.tempYear === today.getFullYear()
);
},
};
}
</script>
<label for={ id } class="block text-sm font-medium mb-2">{ label }</label>
<div class="relative">
<input