Calculated dates ok on desktop but not showing on mobile iOS

Hi Community, not sure if you’ve seen this happen before:

I have a date that is added to and formatted: scheduled_on

 {{scheduled_on.addMinutes(TZdiff.value).formatDate('MMM d, HH:mm')}}

Somehow it shows on desktop browser, but not on mobile (iOS, not tested on Android)



Wappler Version : 4.0.1
Operating System : Mobile iOS Safari and Chrome, desktop Chrome and Edge
Server Model: PHP
Database Type: mySQL
Hosting Type: PHP

Try making this

{{scheduled_on.replace('Z','').addMinutes(TZdiff.value).formatDate('MMM d, HH:mm')}}

And are you sure it displays if you remove the formatters from the value? Like just {{scheduled_on}}

Hi @Teodor, I checked with just the value {{scheduled_on}} and yes it does display.
@bpj, I added the .replace(‘Z’,’’) and it doesn’t make a difference.

So try adding the formatters one by one and check which one is causing the issue.

Maybe you need to include Moment.js in the page (not sure about this but may help, under Frameworks/Moment)?

1 Like

Hi @Teodor,
Here is the result of taking each formatters one by one :

{{scheduled_on.addMinutes(TZdiff.value).formatDate('MMM d, HH:mm')}}
{{scheduled_on.addMinutes(TZdiff.value)}}
{{scheduled_on.formatDate('MMM d, HH:mm')}}
{{scheduled_on}}

Desktop: All works well

  • UTC addMinutes then formatted DDHH
  • UTC with addMinutes
  • UTC formatted DDHH
  • Naked UTC
    image
    Mobile:
  • UTC addMinutes then formatted DDHH - doesn’t work
  • UTC addMinutes - doesn’t work
  • UTC formatted DDHH - formatDate Works
  • Naked UTC - ok

It looks like the addMinute formatter has issues displaying on Mobile.

Could you also output TZdiff.value on desktop and mobile. It looks like the addMinutes parameter gets an invalid parameter on mobile which causes the strange output. Will update the formatters to ignore invalid parameters and have them output an warning in the console instead.

Hi @patrick, you found the problem!
TZdiff.value shows as a number (ex “120”) on desktop, but as “NaN” on mobile, so the formatters can’t calculate right obviously
So that’s the root. How do I avoid this on mobile? I have no idea how the same Wappler code or value would appear differently on various browsers… :no_mouth:

So what is TZdiff.value, where does its value come from?

@Teodor @patrick
TZdiff is the time difference in minutes between 2 timezones. It’s calculated 2 ways depending if the timezone is positive or negative (we had another discussion on that :slight_smile: ) but as you see below is already calculated with .toNumber
TZdiff = the code below

(TZhours.value >= 0) ? (TZsplit.value[0].toNumber() * 60 +TZsplit.value[1].toNumber()) : (TZsplit.value[0].toNumber() * 60 -TZsplit.value[1].toNumber())

Is there another formatter I need to apply on the below for the addMinute to work?

 {{scheduled_on.addMinutes(TZdiff.value).formatDate('MMM d, HH:mm')}}

Then some of the variables used in this formula has some issues.
What is TZsplit? Where its value comes from?
Does it return any value actually on the phone?
Just start debugging value by value to see which one causes the issue.

Continuing on this, it’s not even the formatters which are the issue. No value from an external API is displayed (Microsoft VirtualEarth, used to get timezone name and time)

In the example below, “Europe/Paris” is passed to VirtualEarth which returns the Name of the Timezone (CEST) and the TimeOffset from UTC (2:00 hours). Both values are not received/displayed on mobile.
image
Is this Microsoft, or Wappler, or the mobile browser not managing the Wappler code correctly?

Below is the external API call, to which I pass the City to get an object of info back from it.

<dmx-api-datasource id="getUTCoffset" is="dmx-fetch" 
url="https://dev.virtualearth.net/REST/v1/TimeZone/?key=XXX" 
dmx-param:query="userIdentity.data.qryNameRolePic.city">
</dmx-api-datasource>

The API call may be failing if the userIdentity.data.qryNameRolePic.city doesn’t return any data. Have you checked that?

Yes the userIdentity.data.qryNameRolePic.city is returning and displaying Europe/Paris on mobile as well, just like the desktop screenshot above.

Hello Wappler, would you have any idea why the same API data is displayed on desktop but not on mobile?

What ios version do you have that doesn’t display well in safari?

Hi @George, that would be 14.7.1