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

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:
2026-03-06 15:14:02 +00:00
parent 52299c1ff2
commit 04fb1dfb40
10 changed files with 218 additions and 79 deletions

View File

@@ -6,6 +6,7 @@
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import MarkdownEditor from './MarkdownEditor.svelte';
import DateInput from '$lib/components/DateInput.svelte';
let modal: HTMLDialogElement;
import { marked } from 'marked'; // Import the markdown parser
@@ -306,15 +307,14 @@
>
</div>
{/if}
<input
type="date"
<DateInput
id="date"
name="date"
readonly={isReadOnly}
min={constrainDates ? collection.start_date : ''}
max={constrainDates ? collection.end_date : ''}
bind:value={newNote.date}
class="input input-bordered w-full bg-base-100/80 focus:bg-base-100"
inputClass="input input-bordered w-full bg-base-100/80 focus:bg-base-100"
/>
</div>
</div>