PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How to highlight current date or future date in JQuery DatePicker

  1. Here is my form:
    http://www.ilharley.com/about-us/service/service-appointment/

    There is one date picker there. I'd be happy if I could highlight the current date with a solid red 1px border.

    Even better:
    http://bit.ly/cYfewY

    I think you will have to select a bike from the first drop down, and enter a zip of 60402 for "Test Ride Location" ZIP code.

    After you do that, the calendar pops up with today styled differently, past dates styled differently and un-selectable, and additionally tomorrow is styled even a little differently, to indicate it too is not available. Then the dates that are available are the next 10 or so days after that.

    What I would like to do, ideally, is make the next n days un-selectable (so, in my application, you cannot make a service appointment in the next 3 days, but in July, maybe we are booked for the next week, so I might change it to 7 days or something).

    Is that possible to do with JQuery? I'd be happy to just outline in red today's date, but I'd be ecstatic with the ability to make the first selectable date n days in the future.

    Thanks, as always.

    Posted 9 years ago on Thursday May 20, 2010 | Permalink
  2. Chris, You can find a whole page full of nifty configuration options for the jQuery UI datepicker here.

    http://docs.jquery.com/UI/Datepicker#option-minDate

    I was able to highlight the current day, set the default date to +7days and make the first selectable day one week ahead as well. I just added the following to my page template.

    <script type="text/javascript">
    jQuery.noConflict();
      jQuery(document).ready(function($) {
    
    		$( "#input_1_20" ).datepicker({ defaultDate: '+7d', minDate: '+7d', gotoCurrent: true });
    
      });
    </script>

    Of course, replace the input ID with the one from your actual form. I also added the CSS rule to the stylesheet to highlight the current day.

    td.ui-datepicker-today {border:1px solid #f00;}

    You can see my test screenshot here The styling is off a bit from another test I was doing, but you can get the idea.

    Posted 9 years ago on Thursday May 20, 2010 | Permalink
  3. Thanks for the first part. I couldn't find that information. That's just what I need.

    Re: the CSS, I was trying that exact thing but I couldn't get it to work. Maybe caching. I will try again.

    Thank you for the advice.

    Posted 9 years ago on Thursday May 20, 2010 | Permalink
  4. cool, actually, I noticed I didn't have my button image any more, and had to re-declare it in these settings.. this is what I ended up with.

    <script type="text/javascript">
    jQuery.noConflict();
      jQuery(document).ready(function($) {
    
    		$( "#input_1_20" ).datepicker({ defaultDate: '+7d', minDate: '+7d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true });
    
      });
    </script>
    Posted 9 years ago on Thursday May 20, 2010 | Permalink
  5. Holy crap, that's awesome. (Can you say crap on the Internet?) Edit if not...

    Works great with the +7d thing. That's exactly what I needed. Got the CSS to work as well (probably should have tried to do it "for real" rather than with the Web Developer toolbar, locally.)

    I read through that options page at the JQuery site, but I can't seem to find something else I am thinking about. Can you exclude certain days of the week? For example, we don't take appointments on Sat and Sun. I wonder if there's a way to exclude those two days from being selectable.

    I know this is not GF stuff and I really appreciate your help.

    Posted 9 years ago on Thursday May 20, 2010 | Permalink
  6. hmmmm, maybe this:

    http://stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holida

    Looks like I could use some JQuery to find all instances of th.ui-datepicker-week-end-cell and td.ui-datepicker-week-end-cell and add this class to them (so append this to the content):

    ui-datepicker-unselectable

    I wonder if that makes it LOOK unselectable or actually MAKES it unselectable.

    Only one way to find out ...

    Posted 9 years ago on Thursday May 20, 2010 | Permalink
  7. Wow:
    http://www.ilharley.com/about-us/service/service-appointment/

    Thanks so much Kevin.

    Posted 9 years ago on Thursday May 20, 2010 | Permalink
  8. Ha! Look at you. Very nicely done. Congrats.

    Posted 9 years ago on Thursday May 20, 2010 | Permalink

This topic has been resolved and has been closed to new replies.