Add calendar event icons and flexible date inputs
This commit is contained in:
+14
-3
@@ -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),
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user