Our contract management forms use HubL date picker fields for contract start and end dates. Everything works perfectly on desktop browsers, but mobile users (iOS Safari and Chrome on Android) are reporting validation failures and incorrect date submissions. The date picker itself appears and users can select dates, but when they submit the form, they get validation errors saying the date format is invalid.
We’ve noticed that mobile browsers are showing their native HTML5 date pickers instead of the HubL date picker widget, which might be causing format mismatches. The client-side validation JavaScript we wrote expects dates in MM/DD/YYYY format, but mobile browsers seem to be submitting in different formats. This is causing major issues because invalid contract dates are either blocking submissions or worse, creating contracts with incorrect date data. Has anyone solved mobile browser compatibility issues with HubL date pickers?
The issue is that HubL date pickers render as standard HTML5 input type=‘date’ elements on mobile for better UX. This is intentional behavior. Your client-side validation needs to handle both the custom picker format (desktop) and the HTML5 format (mobile). Use JavaScript to detect the input type and parse accordingly.
That makes sense. So we need to update our validation to accept multiple date formats? Is there a HubSpot-recommended way to do this, or do we need to write custom format detection logic?
Use the native JavaScript Date object for parsing rather than regex patterns. The Date constructor handles multiple formats automatically. Just validate that the result is a valid date object and within your acceptable range. This works across both desktop and mobile inputs without needing separate logic paths.
Mobile browsers handle HTML5 date inputs differently. iOS Safari uses YYYY-MM-DD format internally regardless of display format. You need to normalize the date format in your validation code before checking it.
Also consider that mobile date pickers have different user interaction patterns. Some users might be confused by validation errors if they’re not seeing the same picker interface as desktop. Add clear help text that’s visible on mobile explaining the date format requirements, even though the picker should handle it automatically. Better UX prevents the validation errors in the first place.