Display format vs value format

[iampedropiedade]

Hi.

I'm finding some trouble to configure the plugin to have a display format that's different from the value format.
I'd live to have "dd/mm/yyyy" displaying on the form input but I need the form to actually send "yyyy-mm-dd" to the backend.

I think I've followed the documentation, the plugin displays the format that I need but it also sends the same format when submitting the form.
Is it possible to let me know what I am doing wrong or if something is missing?

Thanks!

let targets = element.querySelectorAll('[data-behaviour="datepicker"]');
        if(targets.length === 0) {
            return
        }
        targets.forEach((datepickerElem) => {
            let settings = {
                autohide: true,
                buttonClass: 'btn',
                format: {
                    toValue(date) {
                        let dateObject = Datepicker.parseDate(date, 'dd/mm/yyyy')
                        console.log('toValue', dateObject)
                        return dateObject
                    },
                    toDisplay(date) {
                        let dateString = Datepicker.formatDate(date, 'dd/mm/yyyy')
                        console.log('toDisplay', dateString)
                        return dateString
                    },
                },
            }
            settings = {...settings, ...JSON.parse(datepickerElem.dataset?.options ?? '{}')}
            new Datepicker(datepickerElem, settings);
        });

[mymth]

It's impossible to do it with datepicker alone. You need to separate the data for UI and the one to submit, and sync them using your program, like this:

<div class="field">
  <label for="testdate">Test date</label>
  <input type="hidden" name="testdate" value="2023-10-15">
  <input type="text" class="input date" data-value-field="testdate">
</div>

var dateInput = document.querySelector('.date');
var valueField = document.querySelector(`input[name="${dateInput.dataset.valueField}"]`);
dateInput.value = valueField.value.replace(/^(\d{4})-(\d\d)-(\d\d)$/, '$3/$2/$1');

var datepicker = new Datepicker(dateInput, {format: 'dd/mm/yyyy'});
dateInput.addEventListener('changeDate', () => {
  valueField.value = datepicker.getDate('yyyy-mm-dd') || '';
});

If the app submits data with AJAX, modifying the date format when submitting can be an option. For example,

<div class="field">
  <label for="testdate">Test date</label>
  <input type="text" class="input date" name="testdate" value="15/10/2023">
</div>

var dateInput = document.querySelector('.date');
var datepicker = new Datepicker(dateInput, {format: 'dd/mm/yyyy'});

// ...

function submit(formElem) {
  const formData = new FormData(formElem);
  formData.set('testdate', datepicker.getDate('yyyy-mm-dd'));

  return fetch(`/test?${new URLSearchParams(formData).toString()}`);
}

For the former, creating a subclass may make things easier, like this:
https://codepen.io/mymth/pen/OJdLgzW

[iampedropiedade]

Thanks @mymth that worked like a charm!