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

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)

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:

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!

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

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.

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

unfortunately i tried cloning and editing the old forms (which had the icon in the correct place) but after a few edits the icon just moves after the time again

i can think of 2 solutions that i would like code for if either possible:

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

(this way users will just click on the date then can use the calendar and will not be confused by the 2nd calendar connected to the icon after the time)

OR

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

(that way i can use the date and time picker twice in 2 steps = 2 rows, one for date, and one for time in next row, but still keeping the functionality i need to show current date and time by default and prevent users selecting dates and times for the past)

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.

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