Need to add conditions to mobile-friendly datepicker

  • Profile Image
    Asked on March 02, 2021 at 05:59 PM

    For the use case of entering your birthday, the mobile experience for Jotform's native date picker is subpar. We've run a number of user tests and seen time and time again our patients having to scroll month by month through the last 20-30 years to get to their date of birth (see example video here).

    I've found a couple of alternate date fields that have better mobile experiences (specifically this Configurable List widget, and this Android Style Datepicker) but neither seem to:

    1. Have easy condition options for dates like the regular date-picker (before, after, equal to date, etc...) See attached screenshot for image of regular date field states
    2. Pass through the data as actual dates that can be converted into serial numbers, and used for date calculations

    We're simply trying to create a disqualification condition: if a patient is under 18, they should be disqualified. My assumption is that these alternate date pickers are processing the responses as text strings instead of dates, and that's why we're unable to apply the proper conditions or run calculations on them.

    Any ideas on how to resolve this, while maintaining an optimal mobile experience?

    This is what a condition looks like for the alternate field types. "Less than" and "greater than" do not work with these fields.


    I'm attaching the test form I've created to try and resolve this.

  • Profile Image
    Answered on March 02, 2021 at 11:14 PM

    Conditions is limited for widgets as they are loaded in an iframe and you can't target specific fields if it's loaded in iframe that is why it doesn't work with conditions. The widget is detected as a single field only.

    If you want full control over the design with the regular date picker, you might want to consider changing the layout to Classic as you can inject CSS in classic layout. If you consider that option, you may design the standard date picker field with CSS to make it more compact in mobile view.