From 6d4de76a9a6f1e3da6c600b5ae73a51602dea296 Mon Sep 17 00:00:00 2001 From: valhalla-creator Date: Thu, 22 May 2025 21:19:39 +0100 Subject: [PATCH] Update datepicker.js --- client/lib/datepicker.js | 156 ++++++++++++++++++++------------------- 1 file changed, 80 insertions(+), 76 deletions(-) diff --git a/client/lib/datepicker.js b/client/lib/datepicker.js index 84e4047f4..59da73e46 100644 --- a/client/lib/datepicker.js +++ b/client/lib/datepicker.js @@ -1,16 +1,13 @@ import { ReactiveCache } from '/imports/reactiveCache'; import { TAPi18n } from '/imports/i18n'; import moment from 'moment/min/moment-with-locales'; +import { Utils } from './utils'; -// Helper function to replace HH with H for 24 hours format, because H allows also single-digit hours +// Helper function to replace HH with H for 24 hours format function adjustedTimeFormat() { - return moment - .localeData() - .longDateFormat('LT'); + return moment.localeData().longDateFormat('LT'); } -// .replace(/HH/i, 'H'); - export class DatePicker extends BlazeComponent { template() { return 'datepicker'; @@ -40,21 +37,15 @@ export class DatePicker extends BlazeComponent { language: TAPi18n.getLanguage(), weekStart: this.startDayOfWeek(), calendarWeeks: true, + beforeParse: (value) => Utils.normalizeDigits(value), }) .on( 'changeDate', function(evt) { - this.find('#date').value = moment(evt.date).format('L'); + const normalizedDate = moment(evt.date).format('L'); + this.find('#date').value = normalizedDate; this.error.set(''); - const timeInput = this.find('#time'); - timeInput.focus(); - if (!timeInput.value && this.defaultTime) { - const currentHour = evt.date.getHours(); - const defaultMoment = moment( - currentHour > 0 ? evt.date : this.defaultTime, - ); // default to 8:00 am local time - timeInput.value = defaultMoment.format('LT'); - } + this._handleTimeInput(evt); }.bind(this), ); @@ -63,6 +54,18 @@ export class DatePicker extends BlazeComponent { } } + _handleTimeInput(evt) { + const timeInput = this.find('#time'); + timeInput.focus(); + if (!timeInput.value && this.defaultTime) { + const currentHour = evt.date.getHours(); + const defaultMoment = moment( + currentHour > 0 ? evt.date : this.defaultTime, + ); + timeInput.value = defaultMoment.format('LT'); + } + } + showDate() { if (this.date.get().isValid()) return this.date.get().format('L'); return ''; @@ -79,67 +82,68 @@ export class DatePicker extends BlazeComponent { } events() { - return [ - { - 'keyup .js-date-field'() { - // parse for localized date format in strict mode - const normalizedValue = Utils.normalizeDigits(this.find('#date').value); - const dateMoment = moment(normalizedValue, 'L', true); - if (dateMoment.isValid()) { - this.error.set(''); - this.$('.js-datepicker').datepicker('update', dateMoment.toDate()); - } - }, - 'keyup .js-time-field'() { - // parse for localized time format in strict mode - const normalizedValue = Utils.normalizeDigits(this.find('#time').value); - const dateMoment = moment( - normalizedValue, - adjustedTimeFormat(), - true, - ); - if (dateMoment.isValid()) { - this.error.set(''); - } - }, - 'submit .edit-date'(evt) { - evt.preventDefault(); + return [{ + 'keyup .js-date-field'() { + const rawValue = this.find('#date').value; + const normalizedValue = Utils.normalizeDigits(rawValue); + const dateMoment = moment(normalizedValue, 'L', true); - // if no time was given, init with 12:00 - const timeValue = Utils.normalizeDigits(evt.target.time.value); - const time = - timeValue || - moment(new Date().setHours(12, 0, 0)).format('LT'); - const newTime = moment(time, adjustedTimeFormat(), true); - const dateValue = Utils.normalizeDigits(evt.target.date.value); - const newDate = moment(dateValue, 'L', true); - const dateString = `${dateValue} ${time}`; - const newCompleteDate = moment( - dateString, - `L ${adjustedTimeFormat()}`, - true, - ); - if (!newTime.isValid()) { - this.error.set('invalid-time'); - evt.target.time.focus(); - } - if (!newDate.isValid()) { - this.error.set('invalid-date'); - evt.target.date.focus(); - } - if (newCompleteDate.isValid()) { - this._storeDate(newCompleteDate.toDate()); - Popup.back(); - } else if (!this.error) { - this.error.set('invalid'); - } - }, - 'click .js-delete-date'(evt) { - evt.preventDefault(); - this._deleteDate(); - Popup.back(); - }, + if (dateMoment.isValid()) { + this.error.set(''); + this.$('.js-datepicker').datepicker('update', dateMoment.toDate()); + } }, - ]; + + 'keyup .js-time-field'() { + const rawValue = this.find('#time').value; + const normalizedValue = Utils.normalizeDigits(rawValue); + const timeMoment = moment(normalizedValue, adjustedTimeFormat(), true); + + if (timeMoment.isValid()) { + this.error.set(''); + } + }, + + 'submit .edit-date'(evt) { + evt.preventDefault(); + + const dateValue = Utils.normalizeDigits(evt.target.date.value); + const timeValue = Utils.normalizeDigits(evt.target.time.value) || + moment(new Date().setHours(12, 0, 0)).format('LT'); + + const dateString = `${dateValue} ${timeValue}`; + const format = `L ${adjustedTimeFormat()}`; + const newDate = moment(dateString, format, true); + + if (!newDate.isValid()) { + this._handleDateTimeError(evt, dateValue, timeValue); + return; + } + + this._storeDate(newDate.toDate()); + Popup.back(); + }, + + 'click .js-delete-date'(evt) { + evt.preventDefault(); + this._deleteDate(); + Popup.back(); + } + }]; + } + + _handleDateTimeError(evt, dateValue, timeValue) { + const dateMoment = moment(dateValue, 'L', true); + const timeMoment = moment(timeValue, adjustedTimeFormat(), true); + + if (!timeMoment.isValid()) { + this.error.set('invalid-time'); + evt.target.time.focus(); + } else if (!dateMoment.isValid()) { + this.error.set('invalid-date'); + evt.target.date.focus(); + } else { + this.error.set('invalid'); + } } }