Date-Time Picker Yielding Different Types on Mobile vs Desktop

Ask us anything
1

Using the Date-Time Picker element. The live app works well when I’ve tested it on separate desktops. However, the live app does not function correctly on mobile. I’ve tried both Safari and Chrome.

My app uses the Date Picker to update two variables: OpenDate and CalendarDays, CalendarDays being an array with each day from OpenDate to OpenDate + 7.

Where desktop is able to see this as date objects, mobile sees this as strings or null and yields an array of empty values.

Anyone have an idea on how to correct for this so that the array builds correctly in both mobile and desktop?

2

Hi @jc100 :waving_hand:

A couple of questions for you:

  1. Have you tested this on both Android and iPhone? Does the issue occur on both?
  2. Are you using the exact same date picker instance on mobile and desktop, or separate instances (for example, because you created a dedicated mobile section)?

If you’re using separate instances, try copying the desktop date picker into the mobile section and see whether that resolves the issue.

If you’re using the same instance on both, could you create a bug ticket here if you haven’t already? That will allow the team to reproduce the issue and investigate further.

It may be related to a known iOS quirk but I’m not completely sure.

3

Hi Joyce, thanks for reaching out!

  1. I was not able to test this on an android.
  2. I did use the same date picker on both.

Here is what I did to resolve the issue:

I wrapped all of my date picker values in toDateISO(). I found that iOS is particularly picky in its parsing of dates. When I passed just “YYYY-MM-DD”, iOS would throw [] since it could not read the date properly.

Once all my dates were in ISO format, iOS could properly register it. I then did some more front-end work to make the dates a bit more human-readable.

4

Awesome! Well done :grinning_face: Thanks for taking the time to share the solution with us as well, really appreciate it :slight_smile: