CSS to allow only today and PAST dates in Date Reservation widget?

  • Profile Image
    coldboyallen
    Asked on September 10, 2017 at 11:38 AM

    I like the solution from this thread to grey out Sundays - how can I grey out all days past 'today'? 

    Thanks!

  • Profile Image
    Charlie
    Answered on September 10, 2017 at 12:05 PM

    Hi,

    Not sure if I understood your concern correctly, the title and the content seems to be opposing.

    Your title:

    "CSS to allow only today and PAST dates in Date Reservation widget?"

    Your content:

    "I like the solution from this thread to gray out Sundays - how can I gray out all days past 'today'? 

    Thanks!"

    The title says that you only want today and past dates to be selectable? 

    The content, however, says that you want to disable or gray out all days past today? Past today means past dates. 

    If you are referring to the Date Reservation widget and you want to DISABLE all past dates, then you can do that in the widget settings:

     

    Please do note that the date reservation widget allows your user to "reserve" a future date. Not sure if reserving a past date is actually the requirement you are looking for. Or if you want to NOT allow your user to reserve in the future date. 

    Our default date field gives you more flexibility on disabling dates, you can check this guide to learn more: https://www.jotform.com/help/337-How-to-Use-the-Date-Limits-Option

    If you could clarify and give us more information, that would help us better understand the problem. 

  • Profile Image
    coldboyallen
    Answered on September 10, 2017 at 12:08 PM

    Sorry for not being clear. I only want users to be able to select dates including and prior to 'today'. All future dates I would like greyed out. I can see your confusion. I'm not using the widget as a reservation tool - just like the aesthetics of the date picker. 

  • Profile Image
    Charlie
    Answered on September 10, 2017 at 12:46 PM

    Unfortunately, it is not possible to disable future dates, the solution provided by my colleague on this link works because it disables a specific day in the week, it does not have a criterion of past or future, it basically disables ALL Sundays across the calendar by using CSS. 

    I did check the widget to be sure, unfortunately, there's no CSS selector that would separate the past and future, so it's not possible to disable the future using CSS only. 

    The only thing I can think of right now is to use the default date field that we have, which gives you flexibility on disabling any dates. From there, you can use CSS code to highly re-design the default date field. 

    Here's an example for that I have: https://form.jotformpro.com/72524717963969. I basically fixated the position of the calendar instead of making it a pop-up. From there, I can adjust the position of the calendar and make it fixed and not pop-up, I can only adjust the spacing of the table cells. It would be hard to copy the design of the Date Reservation widget as it involves using jQuery. But this setup would give you more flexibility if you are aiming to disable future dates. 

    I hope that helps. 

  • Profile Image
    coldboyallen
    Answered on September 10, 2017 at 01:07 PM

    Thanks for taking the time on that! I like the work-around - having the default date field fixed and not as a pop-up works well. Can you please send me the CSS you used to do that? 

  • Profile Image
    Mike_G
    Answered on September 10, 2017 at 01:49 PM

    My colleague added a Date Picker field on the form and set the limit to not allow "Future" dates.

    Then, here's the CSS codes he injected.

    /*Position the pop-up calendar*/

    #calendar_243 {

      display: block !important;

      position: absolute !important;

      left: 403px;

      top: 250px;

      box-shadow: none !important;

    }

    /*Set the height that the calendar will cover*/

    #id_243 {

      height: 290px;

    }

    /*Hide the text boxes of date field*/

    #cid_243 {

      visibility: hidden !important;

    }

    /*Adjust the spacing of the td in the calendar*/

    #calendar_243 td, #calendar_243 th {

      padding: 10px !important

    }

     

     

    Please note that the codes above still needs to be modified based on the number on the Date Picker field's ID — How-to-Find-Field-IDs-and-Names

    If you have other questions or concerns, please feel free to contact us again anytime.

  • Profile Image
    coldboyallen
    Answered on September 10, 2017 at 03:41 PM

    Thanks. I have it positioned but when I click 'Next' the calendar still appears? This is obviously not ideal. Thoughts? https://form.jotform.us/72257785984172

  • Profile Image
    Mike
    Answered on September 10, 2017 at 04:05 PM

    I am afraid that mentioned CSS solution will not work for multi-page forms, since the calendar is being permanently displayed on the page in that case. The CSS does not provide scripting interaction functionality.