Separating the way a value is being displayed in the field and the way it is saved in the submission object

I've created a custom date picker that uses the Persian/Jalali date format (jYYYY/jMM/jDD). The date picker only works when the input field is in this format. "j" stands for Jalali format here, which is the Persian calendar system. When I submit the form I don't want the submission value of my date picker component to be in this format so I manually change them to a standard Gregorian format on submission. The problem now is that when I use submission data to pre-populate my form fields, the submission coming to my form has dates which are in Gregorian format, so I need a way to convert them back to Jalali format when the submission loads so that the user can see them as Persian date while working with the form and the component can work properly.

I have implemented a custom logic for this like this: In the Form Renderer:

Formio.createForm(document.getElementById('formio'), form, {
      language: 'fa',
      i18n: faTranslation,
      template: 'bootstrap5',
      hasSubmission,
    }).then(form => {
      if (hasSubmission) {
        form
          .setSubmission(_.cloneDeep(submission))
          .then(() => {
            form.emit('submissionLoad');
          })
          .catch(() => {
            console.warn('Failed to load submission');
          });
      }

      form.on('submit', submission => {
         fakeApiRequest(1000).then(() => {
         form.emit('submitDone', submission);

         // Here I call normalizeSubmission to change the dates to Gregorian format
         postSubmission(normalizeSubmission(submission))
      });
});
    });

My custom method in my DatePicker component:

checkInitialSubmission() {
    this.on('submissionLoad', () => {
      const submission = this.root.submission;
      const componentValue = _.get(submission.data, this.path);

      const isValid = jMoment(componentValue, 'YYYY-MM-DDTHH:mm:ss', true).isValid();

      if (componentValue && isValid) {
        const convertedDate = this.toJalali(componentValue);
        this.setValue(convertedDate);
      }
    });
  }

Here, I listen for a custom event submissionLoad, and then set the value manually back to Jalali format. When the form is submitted, I convert it back to Gregorian. Surprisingly Formio is doing a very bad job at handling submissions internally for prepopulating fields, I had to manually emit a custom event for when the submission actually loads so that I could change the value when the submission data has actually been put in the fields, I even created a variable called hasSubmission and passed it to the form options so that I could know in my custom-component whether there's a submission data coming in or not. There should be an internal logic for it that maybe when there's a submission being loaded all the components should hold on until the submission has been loaded and then move on to run the code in their calculated value or custom logic tabs At first, this custom implementation of mine appeared to be a very good solution but as I moved on to making more complicated forms, I ran into so many issues because of this that I dropped this workaround completely.

I'm looking for a more efficient solution, possibly by adjusting the display value (if such a thing exists) of the input to show in Jalali format while keeping the actual value in the submission object in Gregorian format. Are there any methods in the Component class or elsewhere that could help me achieve this?

formio / formio.js

Separating the way a value is being displayed in the field and the way it is saved in the submission object #5758