What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
How can I limit the time options shown on the DateTime field?Asked by martinliu on December 05, 2016 at 05:22 PM
You CSS code works well with Chrome. but the hours limitation with your CSS doesn't work in Internet Explorer. Could you provide the CSS for Interner Explorer as well?
Hi again Martin - Just to confirm, when you say it doesn't work in IE, does it look something similar to this?
As you may have figured out by now, seeing that the CSS works on Chrome (actually, not just Chrome but with Firefox and other browsers too), we can safely deduce that this is IE-related. We just need to know which version of IE you are testing it with so we can assist you on figuring out an IE-specific workaround for it (if any).
On the bright side, there is a rather simpler alternative, as opposed to enabling the Time option of the DateTime field. Just add 2 regular Dropdown menus so you can limit the options normally instead of using CSS. You can basically assign the actual options you only want to appear.
And just in case you're planning to use the Time as a part of a calculation, you may assign calculation values to the Dropdown menu as well.
Related guide: How-to-Assign-Calculation-Value
The CSS doesn't work with IE 11. All options are displayed in the drop-down instead of limited options in Chrome.
I tried your alternative with a dropdown for hours and another one for minutes. The only issue I have is I need two sets of time (delivery and pickup). Also, it may look great within the form to hours and minutes side by side, but when the users arrive on the summary page (Preview before submit widget) or in the email confirmation, they are displayed separately, which doesn't look as good as in the form, especially when you have two sets of time, which one do they refer to?
It would be best to use the alternative method mentioned by my colleague. If you'll use separate drop down fields, it will allow you to easily customize the fields better.
Here's a sample form that I made: https://www.jotformpro.com/form/63404716685966. You can clone my form to have a copy of it in your account by following this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL
Here are the things I did to resolve the issues that may arise:
1. You can see here that I used two different drop down fields for the hour and minute items.
I also used the "Text" field and position it in between them to act as the ":" (colon) for the time separator.
You will first need to position and shrink the said fields to have a proper line up. Here's a guide about shrinking and positioning: https://www.jotform.com/help/328-How-to-position-fields-in-JotForm
2. Using CSS and the Form Designer Tool, we can make further advance positioning to the fields to look like they are one item only. You can refer to my form and the CSS code I used there. You can see I put comments on each code block to better assist you.
Here's a quick glance of the CSS code that positioned the drop down fields better:
3. Now same thing with the Preview page, you can redesign the fields to look like they are one item. Here's how it looks like in my end:
Here's a quick glace of the CSS code for the preview page:
4. Now for the email, you can simply edit the body of your email and combine the two drop down fields. Here's the email template:
You can find the form field tags by clicking the "Form Fields" drop down, that will allow you to fetch the field input you want. To learn more about the email alert settings, I suggest checking this guide: https://www.jotform.com/help/30-Explanation-of-Email-Notification-and-Autoresponder-Settings
I hope that helps. If you need further help on the CSS, let us know and we'll assist you.