Date Picker Fields not Recognizing Binded Values

Wappler 6 Beta 8
PHP/MySQL
MacOS

On my edit forms the date picker fields are not recognizing the bound date. The date is displayed in the field but is submitting empty values. The date picker also doesn’t recognize the value in the form field. Defaults to current date.

Getting this in the dev tools …

Screenshot 2023-09-19 at 3.18.23 PM

The only way to work around it is to select the dates again in the date picker. Otherwise it just submits a blank value.

<input type="text" class="form-control form-control-sm" id="inputEditEmploymentStart" name="inputEditEmploymentStart" aria-describedby="input5_help" is="dmx-date-picker" format="YYYY-MM-DD" dmx-bind:value="data_detailEditStaff.data.staffstartdate">

If I remove the date picker the form and fields work as they should.

Hey @brad,

Do you have the form field formatted? Not in the query results, but in the Date Picker Properties?

Screenshot 2023-09-20 at 3.02.31 AM

And in the update action, what I had to do is format the date there as well.

Screenshot 2023-09-20 at 3.08.17 AM

My date pickers seem to be working fine, I’m just getting the CHANGE? line in the Console…

Mine don’t work where there is a value bound to it. The bound value is being displayed in the text field but the value is not being submitted. If the form field has required validation on the field the form will not submit at all.

Tried adding formatting to the server action as well like you posted. Seems to help a little.

But here is the thing. The first time I go to the edit form for any record, it enters null values regardless of what the form fields say. I can enter the dates in again and go to the edit form for the record again and it will work. It’s just the first time you load the form.

The date picker is also not defualting to the value in the database …

Brad I had a similar problem but found out that it was because I was setting a formatDate in the date picker dmx-bind:value…
But in your case I see dmx-bind:value="data_detailEditStaff.data.staffstartdate"
Just in case… Can you output this date value from your query in your dev to check?

Although the date is showing in the field there is no value passed. If I bind the field value to the page to see what the value is it is blank until I actually select a new date.

In your database? Is there a value, what value?

Do you get any console warning about the datePicker component?

This is the only thing that shows up in the console. Yes, there is data in the database. If I remove the date pickers it works perfectly.

  1. Can you output this query value and check it? Is it right?
    data_detailEditStaff.data.staffstartdate

  2. Inspect your datePicker field and check if the original hidden input field has a value?

If I bind the value to the page or remove the datepicker the value is there.

I’m not sure what you are showing there? What hidden input?

Thank you for your patience and time!

  1. You bind a value to that datePicker.
    data_detailEditStaff.data.staffstartdate , check that valjue (date)… does staffstartdate contains a value? Is it a valid date?

  2. right-click on the datePicker and Inspect,
    A hidden input is created by moment

Here is a clear video to what is actually happening

1: The top field that has a date in it is the date picker.
2: The second field is bound to the value of the first field.
3: As you can see, on initial load the second field is empty indicating that the date picker has no value
4: If you select a new date the second field is populated.
5: So although there is a value displayed in the first field there is no actual value attached to it.

Ok, I figured out what you meant to inspect the hidden field for values … it’s blank.

Again, this only happens the first time you try to edit a record. If you edit it and then try editing the same record again, it works just fine. If you select a new record to edit the initial problem is back. And then if you. go back to the first record and try editing it again, the problem is there again.

Switching to Stable fixes the problem, but I’d rather get beta working as that is what we will be forced to use.

OK…
So, from what I see, in BETA channel, the problem appears when you bind a value to datePicker (dmx-bind:value) the hidden input that is automatically created by moment.js can’t get that value and that hidden input is the one that is submitted, so no value in it…

Yes, that is exactly what is happening.