How to reposition the calendar icon in the date & time field?

  • Profile Image
    woadhill
    Asked on March 07, 2018 at 12:12 AM

    i have a problem when i select to include time in the date picker in form builder, the calendar icon moves after the time (instead of being next to the date)

    at first i thought it might be connected to some other settings in my form so i created a new form just to test this point and i get the same problem

    is there a simple way to keep the calendar icon next to the date and ideally have the time coming on the next row

    i think the date picker is the only gadget suitable for my purpose as its for appointment request forms (so need to stop users selecting past dates and times, and the current date and time needs to be default to make it easy for users)

  • Profile Image
    Nik_C
    Answered on March 07, 2018 at 03:53 AM

    You can insert the below CSS to your Custom CSS Field:

    #cid_3 > div > span:nth-child(4) {

        position: relative!important;

        left: -34%!important;

    }

    #cid_3 > div > span:nth-child(2) {

        margin-right: 23px!important;

    }

    That will make your form look like this:

    1520412751Screen Shot 2018-03-07 at 9.50

    But that will work only for the form you provided: https://www.jotform.com/build/80650937482463 

    Let us know if you have any further questions.

    Thank you!

  • Profile Image
    woadhill
    Answered on March 07, 2018 at 07:37 AM

    thank you for your response

    is there a code that will work for all forms? (as i have many)

    and is this a bug with the form builder that is being fixed?

    or is it something specific to my account? and if so how can i fix it?

    please note: i tried the same thing on different computers with the same problem (the calendar icon always moves after time) so it's not about my computer/browser (but could i suppose be something with my account)

    please also note: i built most of my forms around 1 year ago and did not encounter this problem at that time, so must be something new

  • Profile Image
    TREVON
    Answered on March 07, 2018 at 10:22 AM

    is there a code that will work for all forms? (as i have many)

    Unfortunately there is no code that will work with all your forms. You will need to insert the code provided by my colleague on all your forms


    and is this a bug with the form builder that is being fixed? 

    This is not a bug but the way the Date field has been designed such that when you enable time on your date field then the picker icon is moved after the time fields.

    or is it something specific to my account? and if so how can i fix it?

    This is not something related to your form alone this is the way it was designed to display the select icon

    please note: i tried the same thing on different computers with the same problem (the calendar icon always moves after time) so it's not about my computer/browser (but could i suppose be something with my account)

    Kindly note this issue is not also related to you viewing you form on different machines since its way the field is designed

    please also note: i built most of my forms around 1 year ago and did not encounter this problem at that time, so must be something new

    To may knowledge the field may have been like this before however there might have been updates that made changes to the way the date field is displaying its fields however i am not aware of this.



  • Profile Image
    woadhill
    Answered on March 07, 2018 at 11:02 AM

    ok thank you very much for the detailed response

    i will try to just clone and edit old forms that were made when the calendar icon was next to the address

    please recommend this as a change to the gadget, as it is really strange to have the date, then the time, then the calendar icon (to set the date) after the time

  • Profile Image
    TREVON
    Answered on March 07, 2018 at 12:51 PM

    1. code to hide the calendar icon but keep it as popup when click in the date field

    2. code to hide the calendar icon AND the date field

    Unfortunately this may not be possible since you can only hide or display a field not sub sections of field. Like for instance Date field which include time and date are all one field. This is also the reason you can not hide the date icon since you need to hide the whole field.

    .....................................................................................................................................................................

    My recommendation would be you use two fields. Use the time field then use the Date field but disable the time option in the date field.  You can then shrink the two fields such that they appear as one field.

    https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm

    The advantage of this option is you get two separate field and also date and time are different in your submission page hence you have more flexibility.

    Below is a sample form I have created from a clone of your form with the date and time fields separate and shrunk. 

    https://form.jotform.com/80655317304958

    Kindly feel free to clone and use the form.

    Also note kindly that I have now forwarded this as a feature request to our backend team. Please note that we can't give an ETA for when this will be implemented. Feature requests depend on the workloads of our developers and popularity among our users. But rest assured we will inform you once this feature becomes available.

  • Profile Image
    woadhill
    Answered on March 08, 2018 at 10:19 PM

    thank you very much for the detailed response and for passing this onto the developers

    your workaround is a smart idea and i will try to use that for now