fix: restore native date picker for birthday fields on iOS (#101)

Birthday date inputs in Settings (profile, new member, edit member) and
the Birthdays page were using type="text" with a custom mask, which
suppresses the native iOS date picker wheel. Switching to type="date"
with a plain ISO value restores the native picker while keeping the
existing parseDateInput / isDateInputValid logic intact.

Closes #98

Co-authored-by: Ulas Kalayci <ulas.kalayci@googlemail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
2026-04-29 10:28:27 +02:00
committed by GitHub
parent 7940ea4ded
commit 64fbad8cbf
2 changed files with 4 additions and 4 deletions
+1 -1
View File
@@ -282,7 +282,7 @@ function openBirthdayModal({ mode, birthday = null }) {
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="bd-birth-date">${t('birthdays.birthDateLabel')}</label> <label class="form-label" for="bd-birth-date">${t('birthdays.birthDateLabel')}</label>
<input class="form-input js-date-input" id="bd-birth-date" type="text" value="${esc(formatDateInput(birthday?.birth_date))}" placeholder="${dateInputPlaceholder()}" inputmode="numeric"> <input class="form-input" id="bd-birth-date" type="date" value="${esc(birthday?.birth_date || '')}">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="bd-photo">${t('birthdays.photoLabel')}</label> <label class="form-label" for="bd-photo">${t('birthdays.photoLabel')}</label>
+3 -3
View File
@@ -579,7 +579,7 @@ export async function render(container, { user }) {
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="new-member-birth-date">${t('settings.memberBirthDateLabel')}</label> <label class="form-label" for="new-member-birth-date">${t('settings.memberBirthDateLabel')}</label>
<input class="form-input js-date-input" type="text" id="new-member-birth-date" placeholder="${dateInputPlaceholder()}" inputmode="numeric" /> <input class="form-input" type="date" id="new-member-birth-date" />
<p class="form-hint">${t('settings.memberContactBirthdayHint')}</p> <p class="form-hint">${t('settings.memberContactBirthdayHint')}</p>
</div> </div>
<label class="toggle-row"> <label class="toggle-row">
@@ -677,7 +677,7 @@ export async function render(container, { user }) {
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="profile-birth-date">${t('settings.memberBirthDateLabel')}</label> <label class="form-label" for="profile-birth-date">${t('settings.memberBirthDateLabel')}</label>
<input class="form-input js-date-input" type="text" id="profile-birth-date" value="${esc(formatDateInput(user?.birth_date))}" placeholder="${dateInputPlaceholder()}" inputmode="numeric" /> <input class="form-input" type="date" id="profile-birth-date" value="${esc(user?.birth_date || '')}" />
<p class="form-hint">${t('settings.memberContactBirthdayHint')}</p> <p class="form-hint">${t('settings.memberContactBirthdayHint')}</p>
</div> </div>
<div id="profile-error" class="form-error" hidden></div> <div id="profile-error" class="form-error" hidden></div>
@@ -1212,7 +1212,7 @@ function openEditMemberModal(member, currentUser, users, container) {
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="edit-member-birth-date">${t('settings.memberBirthDateLabel')}</label> <label class="form-label" for="edit-member-birth-date">${t('settings.memberBirthDateLabel')}</label>
<input class="form-input js-date-input" type="text" id="edit-member-birth-date" value="${esc(formatDateInput(member.birth_date))}" placeholder="${dateInputPlaceholder()}" inputmode="numeric" /> <input class="form-input" type="date" id="edit-member-birth-date" value="${esc(member.birth_date || '')}" />
<p class="form-hint">${t('settings.memberContactBirthdayHint')}</p> <p class="form-hint">${t('settings.memberContactBirthdayHint')}</p>
</div> </div>
<label class="toggle-row"> <label class="toggle-row">