How can I grey out calendar dates three days after today?

  • multicoastmedia
    Asked on February 2, 2015 at 9:35 PM

    For scheduling purposes, I need to limit booking to three days out.

    Page URL: http://preview.multicoastmedia.com/04CAJ4/164619417779540022
  • TitusN
    Replied on February 3, 2015 at 8:01 AM

    Hello, 

    I gather you would like to prevent form users from selecting dates unless they are three days from today (now) - right? 

    I checked your form, and noticed you are currently using the Large Date Picker, which does not support the feature you need. 

    You may want to consider building a form that uses the default date field and conditional logic. 

    For example, this form hides some fields if the date selected is within 3 days of today: http://form.jotformpro.com/form/50333080555953?

    Could this be what you may be looking for - I know it looks a little rugged - but it can be formatted to fit the logic you want to implement on your form.

    Please Let us know. 

  • Mike
    Replied on February 3, 2015 at 11:09 AM

    Understood.  I switched to the default date field. Hopefully I can style the default calendar to match the site as well. Thanks for your help!

     

    I would like the message to read "If you would like to schedule a preceding that is less than three days away, please call 800-523-7887. Thank you!" 

  • Carina
    Replied on February 3, 2015 at 1:23 PM

    On behalf of my colleague you are most welcome. I edited the form so that it displays the message you requested. You can clone it if you want:

    http://form.jotformpro.com/form/50335773318961? 

    You can also edit the message by selecting edit HTML:
    How can I grey out calendar dates three days after today? Image 1 Screenshot 20

    Let us know if we can assist you further. 

  • multicoastmedia
    Replied on February 3, 2015 at 4:27 PM

    Well, since you've been so amazing...

    1 I want to style the popup calendar colors to match the site. It doesn't have to be perfect, just less orange! The theme is mostly navy blue and grey. I have tried injecting CSS for the properties that affect the calendar, even adding the !important; attribute to ensure it's applied, but nothing changes.  You should know it is being used on a Weebly site but I do CSS trickery alot and it usually works. I'd be happy to even let someone on the forum log in to see the code if necessary.   

    2 The client has asked that the three days out that are unavailable be greyed out on the calendar.  Seems like this would require some JS? Do you know if it's possible.

    I have to say configurable date pickers that work well with forms are really hard to find. If you guys added some visual styling controls and conditional controls to the calendar, you'd be the only game in town!

  • multicoastmedia
    Replied on February 3, 2015 at 4:36 PM

    Oh, one more question.

    After cloning and deleting the old date picker, how to I combine that form with the one I already created
    ? 
  • Ben
    Replied on February 3, 2015 at 5:52 PM

    As we can only assist with one issue / question per thread I have moved the non related questions to their new threads.

    The question to style the calendar popup background has been moved here: http://www.jotform.com/answers/509306

    The question about inserting fields from one form to another has been moved here: http://www.jotform.com/answers/509309

    2 The client has asked that the three days out that are unavailable be greyed out on the calendar.  Seems like this would require some JS? Do you know if it's possible.

    You could do that by adding a CSS code such as this one:

    .days > td.today + td, .days > td.today + td + td {
        color: lightGray !important;
    }

    Do let us know how it goes for you.