Add calendar event icons and flexible date inputs

This commit is contained in:
Rafael Foster
2026-04-27 21:38:06 -03:00
parent 2ef3e6f004
commit 1d1d2291e5
29 changed files with 625 additions and 124 deletions
+14 -3
View File
@@ -4,7 +4,7 @@
* Abhängigkeiten: /i18n.js
*/
import { t } from '/i18n.js';
import { t, dateInputPlaceholder, formatDateInput, parseDateInput, isDateInputValid } from '/i18n.js';
const FREQ_OPTIONS = () => [
{ value: '', label: t('rrule.freqNone') },
@@ -115,7 +115,8 @@ export function renderRRuleFields(prefix, existingRule) {
<div class="form-group" style="margin-top:var(--space-3)">
<label class="label form-label" for="${prefix}-rrule-until">${t('rrule.labelUntil')}</label>
<input class="input form-input" type="date" id="${prefix}-rrule-until" value="${parsed.until}">
<input class="input form-input js-date-input" type="text" id="${prefix}-rrule-until"
value="${formatDateInput(parsed.until)}" placeholder="${dateInputPlaceholder()}" inputmode="numeric">
</div>
</div>
</div>
@@ -153,6 +154,13 @@ export function bindRRuleEvents(root, prefix) {
intervalEl?.addEventListener('input', updateUnit);
root.querySelectorAll('.js-date-input').forEach((input) => {
input.addEventListener('blur', () => {
const parsed = parseDateInput(input.value);
if (parsed) input.value = formatDateInput(parsed);
});
});
// Day-Toggle
root.querySelectorAll(`#${prefix}-rrule-weekdays .rrule-day`).forEach(btn => {
btn.addEventListener('click', () => {
@@ -177,7 +185,9 @@ export function bindRRuleEvents(root, prefix) {
export function getRRuleValues(root, prefix) {
const freq = root.querySelector(`#${prefix}-rrule-freq`)?.value || '';
const interval = parseInt(root.querySelector(`#${prefix}-rrule-interval`)?.value, 10) || 1;
const until = root.querySelector(`#${prefix}-rrule-until`)?.value || '';
const untilInput = root.querySelector(`#${prefix}-rrule-until`);
const untilRaw = untilInput?.value || '';
const until = parseDateInput(untilRaw);
const byday = [];
root.querySelectorAll(`#${prefix}-rrule-weekdays .rrule-day--active`).forEach(btn => {
@@ -188,5 +198,6 @@ export function getRRuleValues(root, prefix) {
return {
is_recurring: !!rule,
recurrence_rule: rule,
valid_until: isDateInputValid(untilRaw),
};
}