From 581733d605b7e0494e72229c45947cff134f6dd6 Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Thu, 6 Nov 2025 02:32:34 +0200 Subject: [PATCH] Fix Regression - Show calendar popup at set due date. Thanks to xet7 ! Fixes #5978 --- client/components/cards/cardDate.jade | 21 +++ client/components/cards/cardDate.js | 11 ++ client/components/forms/datepicker.jade | 2 +- client/components/main/popup.css | 5 +- client/lib/datepicker.js | 164 ++++++------------------ 5 files changed, 77 insertions(+), 126 deletions(-) diff --git a/client/components/cards/cardDate.jade b/client/components/cards/cardDate.jade index e387112bc..c8c6f45a3 100644 --- a/client/components/cards/cardDate.jade +++ b/client/components/cards/cardDate.jade @@ -97,6 +97,12 @@ template(name="minicardCustomFieldDate") template(name="editCardReceivedDatePopup") form.edit-card-received-date .datepicker + // Date input field (existing) + // Insert calendar selector right after date input + .calendar-selector + label(for="calendar-received") 🗓️ + input#calendar-received.js-calendar-date(type="date") + // Time input field (if present) .clear-date a.js-clear-date {{_ 'clear'}} .datepicker-actions @@ -106,6 +112,11 @@ template(name="editCardReceivedDatePopup") template(name="editCardStartDatePopup") form.edit-card-start-date .datepicker + // Date input field (existing) + .calendar-selector + label(for="calendar-start") 🗓️ + input#calendar-start.js-calendar-date(type="date") + // Time input field (if present) .clear-date a.js-clear-date {{_ 'clear'}} .datepicker-actions @@ -115,6 +126,11 @@ template(name="editCardStartDatePopup") template(name="editCardDueDatePopup") form.edit-card-due-date .datepicker + // Date input field (existing) + .calendar-selector + label(for="calendar-due") 🗓️ + input#calendar-due.js-calendar-date(type="date") + // Time input field (if present) .clear-date a.js-clear-date {{_ 'clear'}} .datepicker-actions @@ -124,6 +140,11 @@ template(name="editCardDueDatePopup") template(name="editCardEndDatePopup") form.edit-card-end-date .datepicker + // Date input field (existing) + .calendar-selector + label(for="calendar-end") 🗓️ + input#calendar-end.js-calendar-date(type="date") + // Time input field (if present) .clear-date a.js-clear-date {{_ 'clear'}} .datepicker-actions diff --git a/client/components/cards/cardDate.js b/client/components/cards/cardDate.js index bf40538db..a470bbba4 100644 --- a/client/components/cards/cardDate.js +++ b/client/components/cards/cardDate.js @@ -50,6 +50,17 @@ import { onRendered() { super.onRendered(); // DatePicker base class handles initialization with native HTML inputs + const self = this; + this.$('.js-calendar-date').on('change', function(evt) { + const currentUser = ReactiveCache.getCurrentUser && ReactiveCache.getCurrentUser(); + const dateFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD'; + const value = evt.target.value; + if (value) { + // Format date according to user preference + const formatted = formatDateByUserPreference(new Date(value), dateFormat, true); + self._storeDate(new Date(value)); + } + }); } _storeDate(date) { diff --git a/client/components/forms/datepicker.jade b/client/components/forms/datepicker.jade index 1fbdb2383..c8fb0524a 100644 --- a/client/components/forms/datepicker.jade +++ b/client/components/forms/datepicker.jade @@ -4,7 +4,7 @@ template(name="datepicker") .fields .left label(for="date") {{_ 'date'}} - input.js-date-field#date(type="text" name="date" value=showDate autofocus placeholder=dateFormat) + input.js-date-field#date(type="date" name="date" value=showDate autofocus) .right label(for="time") {{_ 'time'}} input.js-time-field#time(type="time" name="time" value=showTime) diff --git a/client/components/main/popup.css b/client/components/main/popup.css index 7ddba701c..dafbd2576 100644 --- a/client/components/main/popup.css +++ b/client/components/main/popup.css @@ -293,6 +293,8 @@ overflow-y: auto !important; } + + .pop-over[data-popup="editCardReceivedDatePopup"] .edit-date button, .pop-over[data-popup="editCardStartDatePopup"] .edit-date button, .pop-over[data-popup="editCardDueDatePopup"] .edit-date button, @@ -387,9 +389,6 @@ margin: 0; visibility: hidden; } -.pop-over .quiet { -/* padding: 6px 6px 4px;*/ -} .pop-over.search-over { background: #f0f0f0; min-height: 14vh; diff --git a/client/lib/datepicker.js b/client/lib/datepicker.js index 6a4f010e9..fa2ff8129 100644 --- a/client/lib/datepicker.js +++ b/client/lib/datepicker.js @@ -1,33 +1,27 @@ import { ReactiveCache } from '/imports/reactiveCache'; import { TAPi18n } from '/imports/i18n'; -import { - formatDateTime, - formatDate, - formatDateByUserPreference, - formatTime, - getISOWeek, - isValidDate, - isBefore, - isAfter, - isSame, - add, - subtract, - startOf, - endOf, - format, - parseDate, - now, - createDate, - fromNow, - calendar -} from '/imports/lib/dateUtils'; -// Helper function to get time format for 24 hours -function adjustedTimeFormat() { - return 'HH:mm'; +// Helper to check if a date is valid +function isValidDate(date) { + return date instanceof Date && !isNaN(date); } -// .replace(/HH/i, 'H'); +// Format date as YYYY-MM-DD +function formatDate(date) { + if (!isValidDate(date)) return ''; + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; +} + +// Format time as HH:mm +function formatTime(date) { + if (!isValidDate(date)) return ''; + const hours = String(date.getHours()).padStart(2, '0'); + const minutes = String(date.getMinutes()).padStart(2, '0'); + return `${hours}:${minutes}`; +} export class DatePicker extends BlazeComponent { template() { @@ -51,35 +45,25 @@ export class DatePicker extends BlazeComponent { } onRendered() { - // Set initial values for text and time inputs + // Set initial values for native HTML inputs if (isValidDate(this.date.get())) { const dateInput = this.find('#date'); const timeInput = this.find('#time'); if (dateInput) { - // Use user's preferred format for text input - const currentUser = ReactiveCache.getCurrentUser(); - const userFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD'; - dateInput.value = formatDateByUserPreference(this.date.get(), userFormat, false); + dateInput.value = formatDate(this.date.get()); } - if (timeInput) { - if (!timeInput.value && this.defaultTime) { - const defaultDate = new Date(this.defaultTime); - timeInput.value = formatTime(defaultDate); - } else if (isValidDate(this.date.get())) { - timeInput.value = formatTime(this.date.get()); - } + if (timeInput && !timeInput.value && this.defaultTime) { + const defaultDate = new Date(this.defaultTime); + timeInput.value = formatTime(defaultDate); + } else if (timeInput && isValidDate(this.date.get())) { + timeInput.value = formatTime(this.date.get()); } } } showDate() { - if (isValidDate(this.date.get())) { - // Use user's preferred format for display, but HTML date input needs YYYY-MM-DD - const currentUser = ReactiveCache.getCurrentUser(); - const userFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD'; - return formatDateByUserPreference(this.date.get(), userFormat, false); - } + if (isValidDate(this.date.get())) return formatDate(this.date.get()); return ''; } showTime() { @@ -87,56 +71,22 @@ export class DatePicker extends BlazeComponent { return ''; } dateFormat() { - const currentUser = ReactiveCache.getCurrentUser(); - const userFormat = currentUser ? currentUser.getDateFormat() : 'YYYY-MM-DD'; - // Convert format to localized placeholder - switch (userFormat) { - case 'DD-MM-YYYY': - return TAPi18n.__('date-format-dd-mm-yyyy') || 'PP-KK-VVVV'; - case 'MM-DD-YYYY': - return TAPi18n.__('date-format-mm-dd-yyyy') || 'KK-PP-VVVV'; - case 'YYYY-MM-DD': - default: - return TAPi18n.__('date-format-yyyy-mm-dd') || 'VVVV-KK-PP'; - } + return 'YYYY-MM-DD'; } timeFormat() { - return 'LT'; + return 'HH:mm'; } events() { return [ { 'change .js-date-field'() { - // Text input date validation - const dateInput = this.find('#date'); - if (!dateInput) return; - - const dateValue = dateInput.value; + // Native HTML date input validation + const dateValue = this.find('#date').value; if (dateValue) { - // Try to parse different date formats - const formats = [ - 'YYYY-MM-DD', - 'DD-MM-YYYY', - 'MM-DD-YYYY', - 'DD/MM/YYYY', - 'MM/DD/YYYY', - 'DD.MM.YYYY', - 'MM.DD.YYYY' - ]; - - let parsedDate = null; - for (const format of formats) { - parsedDate = parseDate(dateValue, [format], true); - if (parsedDate) break; - } - - // Fallback to native Date parsing - if (!parsedDate) { - parsedDate = new Date(dateValue); - } - - if (isValidDate(parsedDate)) { + // HTML date input format is always YYYY-MM-DD + const dateObj = new Date(dateValue + 'T12:00:00'); + if (isValidDate(dateObj)) { this.error.set(''); } else { this.error.set('invalid-date'); @@ -145,12 +95,10 @@ export class DatePicker extends BlazeComponent { }, 'change .js-time-field'() { // Native HTML time input validation - const timeInput = this.find('#time'); - if (!timeInput) return; - - const timeValue = timeInput.value; + const timeValue = this.find('#time').value; if (timeValue) { - const timeObj = new Date(`1970-01-01T${timeValue}`); + // HTML time input format is always HH:mm + const timeObj = new Date(`1970-01-01T${timeValue}:00`); if (isValidDate(timeObj)) { this.error.set(''); } else { @@ -170,44 +118,16 @@ export class DatePicker extends BlazeComponent { return; } - // Try to parse different date formats - const formats = [ - 'YYYY-MM-DD', - 'DD-MM-YYYY', - 'MM-DD-YYYY', - 'DD/MM/YYYY', - 'MM/DD/YYYY', - 'DD.MM.YYYY', - 'MM.DD.YYYY' - ]; + // Combine date and time: HTML date input is YYYY-MM-DD, time input is HH:mm + const dateTimeString = `${dateValue}T${timeValue}:00`; + const newCompleteDate = new Date(dateTimeString); - let parsedDate = null; - for (const format of formats) { - parsedDate = parseDate(dateValue, [format], true); - if (parsedDate) break; - } - - // Fallback to native Date parsing - if (!parsedDate) { - parsedDate = new Date(dateValue); - } - - if (!isValidDate(parsedDate)) { + if (!isValidDate(newCompleteDate)) { this.error.set('invalid'); return; } - // Combine with time - const timeObj = new Date(`1970-01-01T${timeValue}`); - if (!isValidDate(timeObj)) { - this.error.set('invalid-time'); - return; - } - - // Set the time on the parsed date - parsedDate.setHours(timeObj.getHours(), timeObj.getMinutes(), 0, 0); - - this._storeDate(parsedDate); + this._storeDate(newCompleteDate); Popup.back(); }, 'click .js-delete-date'(evt) {