feat: add jalali calendar

package.json

@@ -99,6 +99,8 @@
     "eslint-plugin-bpmn-io": "^2.2.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "flatpickr-jalali-support": "^1.0.3",
+    "globals": "^16.0.0",
     "globals": "^16.3.0",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",

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(' '),
   };
 

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';
@@ -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(

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) {

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');