From c5c37f84764fe9d5cffefad5d998191d92373e54 Mon Sep 17 00:00:00 2001 From: mohammad Date: Fri, 4 Jul 2025 16:50:50 +0330 Subject: [PATCH 1/3] add jalali calendar --- package.json | 1 + .../src/render/components/form-fields/Datetime.js | 12 ++++++++++-- .../src/render/components/util/dateTimeUtil.js | 3 +-- .../src/render/components/util/localisationUtil.js | 8 ++++++++ 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 7b851e5da..6af702412 100644 --- a/package.json +++ b/package.json @@ -99,6 +99,7 @@ "eslint-plugin-bpmn-io": "^2.2.0", "eslint-plugin-import": "^2.31.0", "eslint-plugin-react-hooks": "^5.2.0", + "flatpickr-jalali-support": "^1.0.3", "globals": "^16.0.0", "karma": "^6.4.4", "karma-chrome-launcher": "^3.2.0", diff --git a/packages/form-js-viewer/src/render/components/form-fields/Datetime.js b/packages/form-js-viewer/src/render/components/form-fields/Datetime.js index b73896c57..17070a5c7 100644 --- a/packages/form-js-viewer/src/render/components/form-fields/Datetime.js +++ b/packages/form-js-viewer/src/render/components/form-fields/Datetime.js @@ -42,6 +42,7 @@ export function Datetime(props) { disallowPassedDates, timeInterval, timeSerializingFormat, + locale, } = field; const { required } = validate; @@ -97,8 +98,14 @@ export function Datetime(props) { break; } case DATETIME_SUBTYPES.DATETIME: { - date = new Date(Date.parse(value)); - time = isValidDate(date) ? 60 * date.getHours() + date.getMinutes() : null; + const luxonDate = typeof value === 'string' ? LuxonDateTime.fromISO(value) : null; + if (luxonDate && luxonDate.isValid) { + date = luxonDate.toJSDate(); + time = 60 * luxonDate.hour + luxonDate.minute; + } else { + date = new Date(NaN); + time = null; + } break; } } @@ -175,6 +182,7 @@ export function Datetime(props) { date: dateTime.date, readonly, setDate, + locale, 'aria-describedby': [descriptionId, errorMessageId].join(' '), }; diff --git a/packages/form-js-viewer/src/render/components/util/dateTimeUtil.js b/packages/form-js-viewer/src/render/components/util/dateTimeUtil.js index c565c30fa..5048299ae 100644 --- a/packages/form-js-viewer/src/render/components/util/dateTimeUtil.js +++ b/packages/form-js-viewer/src/render/components/util/dateTimeUtil.js @@ -181,8 +181,7 @@ export function isDateInputInformationMatching(value) { } export function serializeDateTime(date, time, timeSerializingFormat) { - const workingDate = new Date(); - workingDate.setFullYear(date.getFullYear(), date.getMonth(), date.getDate()); + const workingDate = new Date(date.getTime()); workingDate.setHours(Math.floor(time / 60), time % 60, 0, 0); if (timeSerializingFormat === TIME_SERIALISING_FORMATS.UTC_NORMALIZED) { diff --git a/packages/form-js-viewer/src/render/components/util/localisationUtil.js b/packages/form-js-viewer/src/render/components/util/localisationUtil.js index 6e9d7485d..f50fc51b0 100644 --- a/packages/form-js-viewer/src/render/components/util/localisationUtil.js +++ b/packages/form-js-viewer/src/render/components/util/localisationUtil.js @@ -6,6 +6,10 @@ * @returns {string} The date format for the locale. */ export function getLocaleDateFormat(locale = 'default') { + if (locale === 'fa') { + return 'Y/m/dd'; + } + const parts = new Intl.DateTimeFormat(locale).formatToParts(new Date(Date.UTC(2020, 5, 5))); return parts .map((part) => { @@ -34,6 +38,10 @@ export function getLocaleDateFormat(locale = 'default') { export function getLocaleReadableDateFormat(locale) { let format = getLocaleDateFormat(locale).toLowerCase(); + if (locale === 'fa') { + return 'روز/ماه/سال'; + } + // Ensure month is in 'mm' format if (!format.includes('mm')) { format = format.replace('m', 'mm'); From 54875d2dacbfeb337b6143f305d5e7e34222fc5f Mon Sep 17 00:00:00 2001 From: mohammad Date: Fri, 4 Jul 2025 17:04:52 +0330 Subject: [PATCH 2/3] update jalali calendar --- .../src/render/components/form-fields/parts/Datepicker.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/form-js-viewer/src/render/components/form-fields/parts/Datepicker.js b/packages/form-js-viewer/src/render/components/form-fields/parts/Datepicker.js index b062e2f91..37090f1bd 100644 --- a/packages/form-js-viewer/src/render/components/form-fields/parts/Datepicker.js +++ b/packages/form-js-viewer/src/render/components/form-fields/parts/Datepicker.js @@ -101,7 +101,12 @@ export function Datepicker(props) { useEffect(() => { if (!flatpickrInstance || !flatpickrInstance.config) return; - flatpickrInstance.config.onChange = [(date) => setDate(new Date(date)), () => setIsInputDirty(false)]; + flatpickrInstance.config.onChange = [ + (dates) => { + setDate(dates[0]); + setIsInputDirty(false); + }, + ]; }, [flatpickrInstance, setDate]); const onInputKeyDown = useCallback( From 7fdb2dc97838ce66fc439c9cde2897f63a601fe9 Mon Sep 17 00:00:00 2001 From: mohammad Date: Fri, 4 Jul 2025 17:05:35 +0330 Subject: [PATCH 3/3] update jalali calendar --- .../src/render/components/form-fields/parts/Datepicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/form-js-viewer/src/render/components/form-fields/parts/Datepicker.js b/packages/form-js-viewer/src/render/components/form-fields/parts/Datepicker.js index 37090f1bd..06ba7808f 100644 --- a/packages/form-js-viewer/src/render/components/form-fields/parts/Datepicker.js +++ b/packages/form-js-viewer/src/render/components/form-fields/parts/Datepicker.js @@ -1,4 +1,4 @@ -import flatpickr from 'flatpickr'; +import flatpickr from 'flatpickr-jalali-support'; import CalendarIcon from '../icons/Calendar.svg'; import { ENTER_KEYDOWN_EVENT, focusRelevantFlatpickerDay } from '../../util/dateTimeUtil';