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() { async function startApp() {
document.getElementById('loginOverlay').classList.add('hidden'); document.getElementById('loginOverlay').classList.add('hidden');
await loadConfig(); await loadConfig();
populateTransferTypes(); populateTransferTypes();
populateTimezoneList();
const brand = document.getElementById('navBrand'); const brand = document.getElementById('navBrand');
if (brand) brand.textContent = cfg.club_name; if (brand) brand.textContent = cfg.club_name;

View file

@ -243,7 +243,8 @@
</div> </div>
<div class="form-row"> <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> <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>
<div class="form-row"> <div class="form-row">
<label>Default paper size <span class="label-hint">(for receipts and statements)</span></label> <label>Default paper size <span class="label-hint">(for receipts and statements)</span></label>