fix(calendar): restore native date picker on iOS (type=date)

This commit is contained in:
Ulas Kalayci
2026-04-28 18:46:54 +02:00
parent c1519ae7b3
commit 801c77dec6
4 changed files with 12 additions and 7 deletions
+5
View File
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased] ## [Unreleased]
## [0.30.2] - 2026-04-28
### Fixed
- Calendar: date inputs in the event modal reverted from `type="text"` to `type="date"`, restoring the native date picker on iOS and other mobile browsers
## [0.30.1] - 2026-04-28 ## [0.30.1] - 2026-04-28
### Fixed ### Fixed
+2 -2
View File
@@ -1,12 +1,12 @@
{ {
"name": "oikos", "name": "oikos",
"version": "0.30.1", "version": "0.30.2",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "oikos", "name": "oikos",
"version": "0.30.1", "version": "0.30.2",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"bcrypt": "^6.0.0", "bcrypt": "^6.0.0",
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "oikos", "name": "oikos",
"version": "0.30.1", "version": "0.30.2",
"description": "Self-hosted family planner - calendar, tasks, shopping, meal planning, budget and more. Private, open-source, no subscription.", "description": "Self-hosted family planner - calendar, tasks, shopping, meal planning, budget and more. Private, open-source, no subscription.",
"main": "server/index.js", "main": "server/index.js",
"type": "module", "type": "module",
+4 -4
View File
@@ -1206,7 +1206,7 @@ function buildEventModalContent({ mode, event, date, reminder = null }) {
<div class="modal-grid modal-grid--2"> <div class="modal-grid modal-grid--2">
<div class="form-group"> <div class="form-group">
<label class="form-label" for="modal-start-date">${t('calendar.startDateLabel')}</label> <label class="form-label" for="modal-start-date">${t('calendar.startDateLabel')}</label>
<input type="text" class="form-input js-date-input" id="modal-start-date" value="${formatDateInput(startDate)}" placeholder="${dateInputPlaceholder()}" inputmode="numeric"> <input type="date" class="form-input" id="modal-start-date" value="${startDate}">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="modal-start-time">${t('calendar.startTimeLabel')}</label> <label class="form-label" for="modal-start-time">${t('calendar.startTimeLabel')}</label>
@@ -1216,7 +1216,7 @@ function buildEventModalContent({ mode, event, date, reminder = null }) {
<div class="modal-grid modal-grid--2"> <div class="modal-grid modal-grid--2">
<div class="form-group"> <div class="form-group">
<label class="form-label" for="modal-end-date">${t('calendar.endDateLabel')}</label> <label class="form-label" for="modal-end-date">${t('calendar.endDateLabel')}</label>
<input type="text" class="form-input js-date-input" id="modal-end-date" value="${formatDateInput(endDate)}" placeholder="${dateInputPlaceholder()}" inputmode="numeric"> <input type="date" class="form-input" id="modal-end-date" value="${endDate}">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="modal-end-time">${t('calendar.endTimeLabel')}</label> <label class="form-label" for="modal-end-time">${t('calendar.endTimeLabel')}</label>
@@ -1229,11 +1229,11 @@ function buildEventModalContent({ mode, event, date, reminder = null }) {
<div class="modal-grid modal-grid--2"> <div class="modal-grid modal-grid--2">
<div class="form-group"> <div class="form-group">
<label class="form-label" for="modal-allday-start">${t('calendar.fromLabel')}</label> <label class="form-label" for="modal-allday-start">${t('calendar.fromLabel')}</label>
<input type="text" class="form-input js-date-input" id="modal-allday-start" value="${formatDateInput(startDate)}" placeholder="${dateInputPlaceholder()}" inputmode="numeric"> <input type="date" class="form-input" id="modal-allday-start" value="${startDate}">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="modal-allday-end">${t('calendar.toLabel')}</label> <label class="form-label" for="modal-allday-end">${t('calendar.toLabel')}</label>
<input type="text" class="form-input js-date-input" id="modal-allday-end" value="${formatDateInput(endDate)}" placeholder="${dateInputPlaceholder()}" inputmode="numeric"> <input type="date" class="form-input" id="modal-allday-end" value="${endDate}">
</div> </div>
</div> </div>
</div> </div>