DateTime picker issue in classic form post

Date and time pickers
1

Hello,

I have an issue where I want to use mobiscroll datetime picker in a classic form post.

I’m working in aspnet razor.

First we have a FormModel that looks like this :

public record FormModel(int Id, DateTime DueDate);

My html looks like this :

<form method="post">
    <input id=form_DueDate" type="datetime-local" value="2025-03-19T10:15"></input>
    <button type="submit">Update</button>
</form>
<script>
mobiscroll.datepicker('#form_DueDate', {
        controls: ['calendar', 'time'],
        touchUi: true,
        showOverlay: false,
        stepMinute: 15,
        returnFormat: 'iso8601',
        onChange: function (event) {
            console.log(event.value);
        }
    })
</script>

When I load the page the input with the date is well interpreted and displays convert the iso8601 to my locale.

So 2025-03-19T10:15 is displayed 19/03/2025 10:15, everything looks good.

If click on the field to update the date time to 20/03/2025 12:30 and select it, the UI is correct and I see 20/03/2025 12:30
The console in the browser shows 2025-03-20T12:30 which is correct

But when I do the form post the value sent is 20/03/2025 12:30 but I was expecting 2025-03-20T12:30 from the returnFormat.

Why is this happening and how to solve this ?

Thanks

2

I made more tests and and the behavior is a bit weird to me :

I added this piece of code to my datetime picker

onChange: function (event) {
    console.log(document.getElementById('form_DueDate').value);
    document.getElementById('form_DueDate').value = event.value;
    console.log(document.getElementById('form_DueDate').value);
}

image

We can see on the console logs how the value is updated and it’s a bit weird :

My initial date in the attribute value is : 2025-03-17T20:00

The DOM is created and mobiscroll modifies it to 17/03/2025 20:00

Then I change the date with a new one and assign it to the value with the expected iso8601 format 2025-03-19T20:00

After closing the datetime picker, mobiscroll is again changing it to 19/03/2025 20:00

How to have a correct displayed value 19/03/2025 20:00 and when I do the form post have the iso8601 value 2025-03-19T20:00 ?

3

Hi @Julien

Have you tried setting the returnFormat to "iso8601"?

Let me know if this solves the issue