How to highlight current date or future date in JQuery DatePicker

Gravity Support Forums » Plugin Support » Gravity Forms

Chris Hajer
Key Master

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 13 years ago on Thursday May 20, 2010 | Permalink
Kevin Flahaut
Administrator
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 13 years ago on Thursday May 20, 2010 | Permalink
Chris Hajer
Key Master

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 13 years ago on Thursday May 20, 2010 | Permalink

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 13 years ago on Thursday May 20, 2010 | Permalink

Chris Hajer
Key Master

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 13 years ago on Thursday May 20, 2010 | Permalink
Chris Hajer
Key Master

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 13 years ago on Thursday May 20, 2010 | Permalink
Chris Hajer
Key Master

Wow:
http://www.ilharley.com/about-us/service/service-appointment/

Thanks so much Kevin.

Posted 13 years ago on Thursday May 20, 2010 | Permalink
Kevin Flahaut
Administrator

Ha! Look at you. Very nicely done. Congrats.

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

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