Limiting hours using time field

  • Profile Image
    sportygal87
    Asked on February 20, 2021 at 11:11 PM

    Richie_P showed me how to enter code into CSS. Not sure why, but I get all hours from 00 to 24...I know I am doing something wrong but have wasted a lot of time trying to tweak the code to get from 8 am to 6 pm...sorry I couldn't figure it out, but will appreciate any help you can give me on this.


    Any tutorial you can give me as to what nth-child refers to...


    #input_144_hourSelect > option:nth-child(2),

    #input_144_hourSelect > option:nth-child(1),


    do these refer to the first two hours of the day?

  • Profile Image
    gerardw
    Answered on February 21, 2021 at 05:58 AM

    You just need to change the Time format to AM/PM from the Time field properties tab - CSS is not required for this change:

    1613905073_60323cb10ff31_2102_21.png

    Do try and let us know if this would help.

  • Profile Image
    sportygal87
    Answered on February 21, 2021 at 07:55 PM
    I need to show limited hours from 08 to 18….what shows now is 00 to 24.

    Thank you for your quick response.

    Carolyn

    ...
  • Profile Image
    gerardw
    Answered on February 21, 2021 at 09:13 PM

    Please add this CSS code into the form instead of the one you have added:

    i.e. Remove these codes from line 8 to 34:

    1613959913_603312e9be616_2202_3.png

    After that add these CSS codes:

    #input_144_hourSelect option:nth-child(n):nth-child(-n+9){display: none !important}

    #input_144_hourSelect option:nth-child(n+21):nth-child(-n+25){display: none !important}

    RESULT:

    1613959980_6033132c30e58_2202_4.png

    Please let us know if this helps.

  • Profile Image
    sportygal87
    Answered on February 21, 2021 at 11:30 PM

    Perfect!!! Thank you for your quick response!!!