I have never used Jquery before so I am quite stuck.

The datepicker calendar that gets displayed is not quite what I am looking for, so I am looking to customize it, but don't even know where to start since I am not sure how to use jquery.

So here is my current calendar: http://imgur.com/dwv5f

All I want though is a single month displayed (default view), I don't want the year and month (not visible) dropdowns, and would like to disallow dates in the past (and the current day and tomorrow, if possible).

I found the jquery ui helper here http://jqueryui.com/demos/datepicker/ with examples, and I apparently all that I want is to really revert to the default:

$(function() {
$( "#datepicker" ).datepicker();

Then for the min max date I was hoping someone might know how to use this code too to set mindate as the day after tomorrow, and maxdate as 1 year from now( https://stackoverflow.com/questions/7896276/customize-jquery-ui-datepicker )

maxDate: '',
minDate: '',


But I don't know how to implement any of this with Wordpress, help is appreciated on this-new to jquery and stuck.

closed as off topic by Brian Fegter, Stephen Harris, Chris_O, Wyck, kaiser Sep 20 '12 at 18:36

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here. If this question can be reworded to fit the rules in the help center, please edit the question.

  • This question isn't specifically related to WordPress. You'd be better of asking this question at stackoverflow.com – Stephen Harris Aug 10 '12 at 0:36

Here´s something to get you started.

  1. Adapt the code below to your needs
  2. Create an init.js file with notepad and paste your code in there
  3. Save it in a logical place your theme folder (the JS directory for example)
  4. Register and enqueue this file (make sure to load it after jquery)

Datepicker set up:

/* http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers */
jQuery(document).ready(function($) {

  /* For all options see http://jqueryui.com/demos/datepicker/ */    
    defaultDate: +2,   
    minDate: 0, 
    maxDate: '+2y',
    numberOfMonths: 1,
    showAnim: 'fadeIn',
    showButtonPanel: true,
    buttonImageOnly: true,
    buttonText: 'Pick a date',
    showOn: 'both'

  • I think I messed something up. I already had a similar process to setup flex slider so I tried to follow the same steps. Here are my screentshots imgur.com/vWhZL (calendar still old version) , imgur.com/Q9Lqc (functions) , imgur.com/5QB7p the file – Kyle Aug 9 '12 at 17:18
  • Looks like a css issue. Difficult to tell without actually seeing the site. Are all stylesheets loaded in the right order? – Mattvic Aug 9 '12 at 21:14
  • Oh, what you were seeing was a css issue, but thats because all three months were displaying – Kyle Aug 9 '12 at 21:53
  • Here is a better pic imgur.com/AoDoe – Kyle Aug 9 '12 at 22:23
  • Ok, the code I provided was for your own instance of the datepicker, but you want to customize the datepicker from the Gravity form plugin. Quite an important detail as it requieres a different approach. It´s a paid plugin so I´ve no idea how they set this up. I suggest you ask for help on their support forums: gravityhelp.com/forums/tags/date-picker – Mattvic Aug 10 '12 at 6:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.