feat: searchable datalist for IANA timezone selector

Populates a <datalist> from Intl.supportedValuesOf('timeZone') on
startup, giving the timezone input native browser search/filter with
no extra dependencies. Degrades gracefully to plain text on browsers
that don't support the Intl API.

https://claude.ai/code/session_01JuRTR5Xjx8emQsyerBgGU7
This commit is contained in:
Claude 2026-05-31 03:32:02 +00:00
parent 8d1c2e4eb5
commit 005d0ccd80
No known key found for this signature in database
2 changed files with 13 additions and 1 deletions

View file

@ -73,10 +73,21 @@ function populateTransferTypes() {
});
}
function populateTimezoneList() {
const list = document.getElementById('tz-list');
if (!list) return;
try {
list.innerHTML = Intl.supportedValuesOf('timeZone')
.map(z => `<option value="${z}">`)
.join('');
} catch (e) { /* older browser — plain text input still works */ }
}
async function startApp() {
document.getElementById('loginOverlay').classList.add('hidden');
await loadConfig();
populateTransferTypes();
populateTimezoneList();
const brand = document.getElementById('navBrand');
if (brand) brand.textContent = cfg.club_name;

View file

@ -243,7 +243,8 @@
</div>
<div class="form-row">
<label>Timezone <span class="label-hint">(IANA name, e.g. Europe/London, Asia/Bangkok &mdash; default is server timezone)</span></label>
<input type="text" id="s-timezone" placeholder="e.g. Europe/London">
<input type="text" id="s-timezone" list="tz-list" placeholder="e.g. Europe/London" autocomplete="off">
<datalist id="tz-list"></datalist>
</div>
<div class="form-row">
<label>Default paper size <span class="label-hint">(for receipts and statements)</span></label>