How to allow business hour times only on date picker?

  • Profile Image
    RedIce
    Asked on August 19, 2018 at 07:45 PM

    Hello,

    I was wondering, is there a way to only show the business hours of the week on the date picker ( For example: Monday 8:30am - 7:00pm ) And block out all other times for that day ( So the user cannot select it )

    Thank you

    Shannon

  • Profile Image
    Kiran
    Answered on August 20, 2018 at 12:54 AM

    Are you referring to the basic Date Picker field from the form elements? If so, unfortunately, the feature to restrict the time is not available at this moment. However, it may be possible to hide some items from the drop down menus by injecting some CSS code. You may also check the Time field by enabling the option 'Time Range' in the field properties to see if that works. 

    153474080320082018_100818.png

    Hope this information helps! Let us know if you are referring something different. We will be happy to help. 

  • Profile Image
    RedIce
    Answered on August 20, 2018 at 01:08 AM

    Hello,


    We just want people to pick within the business hours. What is best for that?

    If its CSS, could you send us some example code that could work?


    Shannon

  • Profile Image
    Kiran
    Answered on August 20, 2018 at 03:06 AM

    You may try using the Time option from the Date picker field, and set the Time field in 24 hour format and set minute stepping to 30 minutes.

    153474764320082018_120856.png

    You may inject the following code to the form to hide the hours before 8 and after 7.

    #hour_3 > option:nth-child(2), #hour_3 > option:nth-child(3), #hour_3 > option:nth-child(4), #hour_3 > option:nth-child(5), #hour_3 > option:nth-child(6), #hour_3 > option:nth-child(7), #hour_3 > option:nth-child(8), #hour_3 > option:nth-child(9), #hour_3 > option:nth-child(22), #hour_3 > option:nth-child(23), #hour_3 > option:nth-child(24), #hour_3 > option:nth-child(25) {

        display: none;

    }

    The ID of the hour field may be changing on your form and you may find it by following the guide below:

    https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

    Please see the form below with the above changes and check if that works?

    https://form.jotform.com/82311016923952

    Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image
    RedIce
    Answered on August 20, 2018 at 07:41 PM

    Great!

    Thank you very much for your help :)


    Shannon