Set limit for time within date picker field

  • Profile Image
    Asked on June 27, 2019 at 02:52 PM

    Could you please make it so that limits can be applied to the available times, so that it might not be the full 24 hours that are available? This way I could limit entries to be after 8am and before 10pm or something similar. Since you already have a similar filter on the Number form element it seems like a simple addition.


    Please please please add a similar feature to the Time selection of the Date Picker.

  • Profile Image
    Answered on June 27, 2019 at 03:34 PM

    To clarify, do you want to add a limit on the quantity of items?

    You may use the Gift registry or the inventory widget .

    However, these widgets will not be affected by the date picker field.

    To clarify, do you want the date picker field to hold options?

    Can you please explain further how you want to use the date picker field?

    Looking forward for your response.        

  • Profile Image
    Answered on June 27, 2019 at 03:50 PM

    That is not what I am asking for at all. Can you please read my request again? I want to create floor and ceiling caps for the times available in the Time portion of the Date Picker. To be clear I am not talking about selecting any sort of inventory, or using any other form element or widget than the Date Picker. Instead of 12:00am-11:59pm being available, I want to be able to make it 8am-10pm, or 4pm-7pm. I want to be able to control the window of time available for someone filling the form to be able to select in the Date Picker form element

  • Profile Image
    Answered on June 27, 2019 at 04:41 PM

    Thank you for the information that you provided.

    I have created a feature request ticket and sending it to our back-end team. Please be noted that creating a feature request ticket does not ensure that the feature will be implemented. It completely depends upon the feasibility and priority of our developers. We will get back to you as soon as an update is available.

  • Profile Image
    Answered on July 06, 2019 at 04:20 PM

    Any progress?

  • Profile Image
    Answered on July 06, 2019 at 05:28 PM

    The ticket is still open, but the priority is rather low. This is not likely that the request will be implemented in the nearest time.

    If you can set time in 24-hour format, we can show you how to hide specific hours with injected CSS.

  • Profile Image
    Answered on July 07, 2019 at 04:03 PM

    I do have it set to 24 hour mode. the form is

  • Profile Image
    Answered on July 07, 2019 at 06:33 PM

    I could not find a way to do it through CSS injection, however, this can be done through the source code:


    Please paste the source code in a text editor, and find time fields, then put the following CSS code on the options you want to hide: style="display:none;"





    Note when using the Source Codes: Every time you change (add or remove fields) from your form in the form builder, you must update the form codes on your site by re-embedding the form. This is because the source codes that are currently embedded to your page are not automatically updated. 

    Let us know if you need more help.

  • Profile Image
    Answered on July 07, 2019 at 07:09 PM

    That is an interesting work around, however I have to work with an iFrame, not the source code.


    Perhaps Mike's method will work?

  • Profile Image
    Answered on July 08, 2019 at 01:46 AM

    Do you wish to set the limit on the field below?

    1562564542Onda Güey Courier Rate Genera

    If yes, please try the CSS code below:

    #hour_77 option[value="00"],option[value="01"],option[value="02"],option[value="03"],option[value="04"],option[value="05"],option[value="06"],option[value="07"],option[value="23"]


      display: none !important;



  • Profile Image
    Answered on July 08, 2019 at 06:10 PM

    For example, if you would like to hide specific hours for some Date Picker field, based on Andrew's example, you can check the hour field ID in the field details.

    Then, use it in CSS like this:

    #hour_77 option[value="00"],
    #hour_77 option[value="01"],
    #hour_77 option[value="02"],
    #hour_77 option[value="03"],
    #hour_77 option[value="04"],
    #hour_77 option[value="05"],
    #hour_77 option[value="06"],
    #hour_77 option[value="07"],
    #hour_77 option[value="23"] {
    display: none !important;

    Also, it looks like you need a closing curly bracket } after your @media query.

  • Profile Image
    Answered on July 08, 2019 at 06:23 PM

    YES! THANK YOU! That was exactly what I needed!