Issues with Mac / Safari date display

Wappler General Need Help
21

Yeah, it is storing in the database this way because we were setup prior to using Wappler and trying to manipulate the data differently.

I assume that there is no workaround to have it work with the date picker currently as constructed?

I have tested modifying this records particular dob format to yyyy-mm-dd in the database and it does in fact display in the text boxes.

22

see my reply above:

23

i tried that in the first text box - its not working
<input id="text1" name="text1" type="text" class="form-control" is="dmx-date-picker" showdropdowns="true" dmx-bind:value="sc_test_data.data.query[0].dob.formatDate('yyyy-MM-dd')">

https://atgenius.com/test.asp

24

so, i just tried to perform a date format on the server side and then populate the textbox...that seemed to work.

So when i used the formatter on the client side, it didn't display, but when it was formatted in the server, it shows the date and the date picker. Is there a difference between the formatters?

25

From what i see it's only an issue in Safari, it seems to work on the rest of the browsers.

27

agreed. I am not sure why that is.

28

We're going to check what's wrong. I also can't see anything obvious.

29

Surely the formatDate() formatter is expecting an ISO date?

@BWCWeb can you confirm if it is dd MM yyyy or MM dd yyyy ?

Dates before the 12th day are ambiguous as a result. I can throw a custom formatter together to convert the date to ISO, given a specific source format

30

Try adding this to your page:

<script>
dmx.Formatter('string', 'datetoiso', function datetoiso(dateStr, format, separator) {
    const parts = dateStr.split(separator);
    
    // Map parts based on format order
    const formatMap = {
        D: 'day',
        M: 'month',
        Y: 'year'
    };
    
    let dateParts = {};
    for (let i = 0; i < format.length; i++) {
        dateParts[formatMap[format[i]]] = parts[i].padStart(2, '0');
    }
    
    // Construct ISO date
    const isoDate = `${dateParts.year}-${dateParts.month}-${dateParts.day}`;
    
    // Validate and return ISO date
    return isNaN(Date.parse(isoDate)) ? 'Invalid Date' : isoDate;
})
</script>

and use
sc_test_data.data.query[0].dob.datetoiso('DMY','-')
or
sc_test_data.data.query[0].dob.datetoiso('MDY','-')

31

THIS WORKED!!! shows on safari

https://atgenius.com/test.asp

1 Like