alex/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace native date inputs with custom DateInput/DateTimeInput components

Browse Source 
Native <input type='date'> and <input type='datetime-local'> render
their display format (mm/dd/yyyy vs dd/mm/yyyy, 12h vs 24h) based on
browser/OS locale, ignoring HTML lang attributes in Firefox and
inconsistently in Chrome. The previous lang=en-GB fix was unreliable.

Create DateInput.svelte and DateTimeInput.svelte components that show
dd/mm/yyyy (and DD/MM/YYYY HH:MM for datetime) by formatting the ISO
value in JS, while delegating the actual picker to a hidden native
input triggered via showPicker(). Supported in Chrome 99+, Firefox
101+, Safari 16+ (covers all modern browsers).

Updated 8 component files across CollectionModal, ChecklistModal,
NoteModal, ImmichSelect, CollectionMap, TransportationDetails,
LodgingDetails, and LocationVisits.
This commit is contained in:
alex
2026-03-06 15:14:02 +00:00
parent 52299c1ff2
commit 04fb1dfb40
10 changed files with 218 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/lib/components/lodging/LodgingDetails.svelte
View File

@@ -16,6 +16,8 @@
import MarkdownEditor from '../MarkdownEditor.svelte';
import TimezoneSelector from '../TimezoneSelector.svelte';
import MoneyInput from '../shared/MoneyInput.svelte';
import DateInput from '$lib/components/DateInput.svelte';
import DateTimeInput from '$lib/components/DateTimeInput.svelte';
import { DEFAULT_CURRENCY, normalizeMoneyPayload, toMoneyValue } from '$lib/money';
// @ts-ignore
import { DateTime } from 'luxon';
@@ -733,20 +735,18 @@
<span class="label-text font-medium">{$t('adventures.check_in')}</span>
</label>
{#if allDay}
<input
<DateInput
id="check-in"
type="date"
class="input input-bordered bg-base-100/80 focus:bg-base-100"
inputClass="input input-bordered bg-base-100/80 focus:bg-base-100"
bind:value={localStartDate}
on:change={handleLocalDateChange}
min={constrainDates ? constraintStartDate : undefined}
max={constrainDates ? constraintEndDate : undefined}
/>
{:else}
<input
<DateTimeInput
id="check-in"
type="datetime-local"
class="input input-bordered bg-base-100/80 focus:bg-base-100"
inputClass="input input-bordered bg-base-100/80 focus:bg-base-100"
bind:value={localStartDate}
on:change={handleLocalDateChange}
min={constrainDates ? constraintStartDate : undefined}
@@ -761,20 +761,18 @@
<span class="label-text font-medium">{$t('adventures.check_out')}</span>
</label>
{#if allDay}
<input
<DateInput
id="check-out"
type="date"
class="input input-bordered bg-base-100/80 focus:bg-base-100"
inputClass="input input-bordered bg-base-100/80 focus:bg-base-100"
bind:value={localEndDate}
on:change={handleLocalDateChange}
min={constrainDates ? constraintStartDate : undefined}
max={constrainDates ? constraintEndDate : undefined}
/>
{:else}
<input
<DateTimeInput
id="check-out"
type="datetime-local"
class="input input-bordered bg-base-100/80 focus:bg-base-100"
inputClass="input input-bordered bg-base-100/80 focus:bg-base-100"
bind:value={localEndDate}
on:change={handleLocalDateChange}
min={constrainDates ? constraintStartDate : undefined}