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:
@@ -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>
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user