How to customize the Date Picker

February 23, 2012 Tutorial 81 Replies

Getting a properly formatted date from a user can be a pain. Did they type with dashes, slashes, spaces, commas, or a combination of everything?

This is where a Date Picker comes in handy. A Date Picker is a JavaScript tool that pops up a little calendar that lets a user click the date they want and it will format the date in the way you desire. In Visual Form Builder’s case, the Date Picker is built using the jQuery UI Date Picker.

Default Date Picker Configuration

This Date Picker is a highly complex and customizable jQuery plugin. So, in order to meet the needs of the many, Visual Form Builder uses the default configuration. Today, I’m going to explain how to customize the calendar to work like you want it to.

Before we begin, you need to decide what you want to do:

Change the configuration for all Date Pickers on all forms
Change the configuration for each Date Picker on each form (if desired)

In either case, you’ll need to create a JavaScript file and properly add it to your theme via the functions.php file.

Create a JS file and add to your theme via functions.php file

Go into your theme’s folder and create a new file called my-js.js in a folder called js. Create that folder if it doesn’t exist.

Now, go to your theme’s functions.php file and add the following code:

function my_scripts_method() {
   wp_register_script( 'my-js-file',
       get_template_directory_uri() . '/js/my-js.js',
       array( 'jquery' ),
       '1.0',
       false );

   wp_enqueue_script( 'my-js-file' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

You are now ready to configure your JavaScript file.

Configure All Date Pickers on All Forms

This option will change all Date Pickers on any form you happen to create. This is handy if you like the default configuration but perhaps need to change a few things about it. For a full list of Date Picker configuration options, please see the documentation.

Open your my-js.js file and add the following code:

jQuery(document).ready(function($) {
    $.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd'
    });
});

Configured Date Picker with global defaults

Configure a Single Date Picker on a Single Form

This option will change a single Date Picker on a single form. This is useful is you have multiple Date Pickers on a single form and require different configurations for each.

First, you will need to use your browser to View Source. Find the ID on the Date Picker you want to configure. Here, I am using Firebug to find that out, but View Source works just as well.

Using Firebug to get the ID

Open your my-js.js file and add the following code:

jQuery(document).ready(function($) {
    $( '#vfb-date-318' ).datepicker({
        numberOfMonths: 2
    });
});

Configured Date Picker for a single field

Bonus: Use Both Configuration Methods

You can use the two methods above to your advantage by combining each technique. This can be used when you need to set defaults for all Date Pickers yet still be able to configure a single Date Picker on a form.

jQuery(document).ready(function($) {
    $.datepicker.setDefaults({
        minDate: -20,
        dateFormat: 'yy-mm-dd'
    });

    $( '#vfb-date-318' ).datepicker({
        numberOfMonths: 2
    });
});

Configured Date Picker using global defaults with a single field

As you can see, the Date Picker can be complex but it’s also really powerful.

81 thoughts on “How to customize the Date Picker”

Amada on March 2, 2012 at 8:51 pm said:

Many thanks for spending some time to describe the terminlogy for the noobs!
Reply ↓
Laevus Dexter on April 10, 2012 at 1:22 pm said:

Hi matthew, how can I turn the datapicker off?
Reply ↓
1. Matthew Muro on April 10, 2012 at 1:23 pm said:
  
  If you don’t want the date picker, don’t use the Date field.
  Reply ↓
  1. Laevus Dexter on April 11, 2012 at 6:55 am said:
    
    Nice tip, but I need the datafield without the datapicker for the real birthday. Example: I was born in 1959. If I dont know, how I use the exact dateformat, then I try the datapicker, but the datapicker starts the actual year and I need much time to pick the year 1959. That’s the problem. Therefore I wrote an exampledateformat (13/09/1959) and wont the datapicker off.
Niels on April 19, 2012 at 3:55 pm said:

Is there a way to turn off the field in which people can enter the date them selves, now people can still enter it as mm-dd-yy, which is tricky.. So only through the picker instead of keyboard?
Reply ↓
1. Matthew Muro on April 19, 2012 at 5:23 pm said:
  
  To disable typing into that field, you’d need to make it readonly. This can be done with one line of jQuery.
  Reply ↓
  1. Niels on April 20, 2012 at 3:14 am said:
    
    Ok! Thanks matthew, I will do some research. Thanks!
upendra on April 28, 2012 at 5:46 am said:

previous and next arrows do not display on the datepicker with jquery..
if you have any solution so please tell me.
Reply ↓
1. Matthew Muro on April 29, 2012 at 10:33 am said:
  
  Those are simply images loaded from the jQuery UI library and you can override them with your own.
  Reply ↓
Ricardo Ferreira on May 18, 2012 at 4:21 am said:

Hi! I would like know if it is possible to display the current date as default on the Date Field? Thanks in advance and keep up with the great work!
Reply ↓
1. Matthew Muro on May 18, 2012 at 8:20 am said:
  
  That’s a great question! If you are talking about making the current date the most recent option in the Date Picker, you can insert an option inside the datepicker jQuery. Use minDate:0
  Reply ↓
ifan on May 29, 2012 at 12:46 am said:

Hi Matthew,

The date picker did not work and got the “$.datepicker is undefined” error
what did I miss ?
Reply ↓
1. Matthew Muro on May 29, 2012 at 8:53 am said:
  
  That error usually means that the jQuery UI JavaScript file isn’t loaded or that you are placing the call to the date picker before the jQuery UI file.
  Reply ↓
  1. Jacco on October 10, 2012 at 1:14 am said:
    
    Matthew, de datepicker works, however when I try to customize is using you instructions in this post, I also get the “undefined” error.
    
    You said that maybe ‘you are placing the call to the date picker before the jQuery UI file’.
    
    Please specify the correct way of doing this.
    Thanks.
  2. Gergely Almasi on May 2, 2013 at 4:42 am said:
    
    Hi, same problem, but I can’t find where to call the UI file Can you help me?
Doug on May 31, 2012 at 5:29 am said:

I’m annoyed. I just spent 2 hours doing css and then I find out that with each email confirmation you put your advertisement mark and a link back to your site on the bottom of each email confirmation. Do you think my customers need to see your crap all over my emails like that?

The least you could do is state up front very clearly that all notifications going back to clients will have your mark and a link back to your site on them.

Deleted.
Reply ↓
1. Matthew Muro on May 31, 2012 at 6:38 am said:
  
  Even MailChimp links back to themselves.
  
  You can remove the link back in the Pro version.
  Reply ↓
  1. Rosy on March 17, 2013 at 7:47 am said:
    
    You’re so right Matthew mailchimp does have their little chimp on their free accounts. Seems to me that a free service takes for granted that there will be a link or ad for you as the creator…paid service = remove the link back if you don’t want it. No need to be so nasty Doug.
    Nice work Matthew – thank you!
2. laura on February 25, 2013 at 10:56 pm said:
  
  This is the best form builder that exist out there. If you are too cheap to spend $10 on a Pro Version that gives you a feature to turn it off, go build your own form from scratch and see how long that will take you.
  
  No need to take it out on Matthew who has done an incredible job!
  Reply ↓
Jeff on June 2, 2012 at 4:10 am said:

Nice Plug-in Matthew!

I recently bought the pro version. Where can I do some further customization of the email confirmation that is sent to the customer? On your “Email Design” page you have an option to set the header background color, but no option to change to the text color. I’d also like to make the size of the header block smaller and perhaps add a logo image.

I tried hunting around through the CSS files, but I can’t find the the one that controls how the confirmation email is generated. Any help would greatly be appreciated thanks!
Reply ↓
1. Matthew Muro on June 3, 2012 at 6:59 am said:
  
  Hi Jeff,
  
  The Email Design should take care of most of your needs. Because of the problematic rendering of HTML emails in email clients, it’s necessary for all CSS to be inline. Therefore, there are no CSS files. I’m working on adding a header image upload to the email design as well as the missing header text color option.
  Reply ↓
Steve on June 6, 2012 at 1:05 pm said:

I’m new to WP and have just tried out this plugin. I’ve managed to get the long date to display on a booking form which I have created, with thanks to this tutorial. My only question is whether the js directory and file and the functions.php will be overwritten when ever there are updates to my theme? Should I be using a child theme? Sorry if these are basic questions, but I am very new to all of this.
Reply ↓
1. Matthew Muro on June 6, 2012 at 1:19 pm said:
  
  Great question. Yes, you should be using a child theme to prevent these new files from being overwritten when you update your parent theme.
  Reply ↓
  1. Steve on June 6, 2012 at 4:39 pm said:
    
    In that case, can you provide some further guidance on how to do this? I can only find info on how to update CSS files in child themes to make customisations. I’m not sure what to do with the js file and the extra code added to functions.php. Thanks in advance.
Maxim on June 14, 2012 at 10:16 pm said:

So I downloaded and installed the pro version, and I was expecting that the date picker was a field that I could just put into my forms without any jquery addition. The only thing I am seeing now is the old date field from the non-pro version that doesn’t have the calendar. Is this what I am supposed to see and do I have to add the jquery myself, or is something wrong?

Thank You
Reply ↓
1. Matthew Muro on June 21, 2012 at 8:13 am said:
  
  No additional jQuery is required for the date picker to work. Try adding a new Date field to your form. If the date picker popup isn’t appearing, you might have another plugin interfering with Visual Form Builder Pro. Check the FAQ for troubleshooting.
  Reply ↓
Anne on July 12, 2012 at 9:25 pm said:

I would like to have the capability on the datepicker for multiple, contiguous and non-contiguous date selection. How do I go about doing this?

Something along along the lines talked about here:

http://forum.jquery.com/topic/jquery-jqueryui-datepicker-select-multiple-non-contiguous-dates

I am very new to jQuery and found the documentation very confusing. Any help you can give would be appreciated.

Regards
Anne
Reply ↓
1. Matthew Muro on July 13, 2012 at 8:04 am said:
  
  I guess you are talking about being able to select ‘Year to date’ or ‘All Dates Before’? That’s not something that is directly supported by the jQuery UI Datepicker.
  
  You can try integrating that guys plugin into a regular Text field, though.
  Reply ↓
Gary Purse on August 12, 2012 at 11:31 am said:

Is it possible to have a year selection which you would really need for date of birth?

I love your plugin and I recommended it on Linkedin to the Word press folks. Gary
Reply ↓
1. Matthew Muro on August 13, 2012 at 10:13 am said:
  
  You can add the option changeYear: true and it’ll show a Year dropdown inside the Datepicker. Here are some other options for the Datepicker.
  Reply ↓
Pingback: Even more Date Picker customizations | Matthew Muro
Avinash on August 22, 2012 at 4:22 am said:

I want to unhighlight todays date up on selecting any other date in date picker please suggest.
Reply ↓
1. Matthew Muro on August 22, 2012 at 7:51 am said:
  
  I don’t believe you can unhighlight today’s date. You can probably use CSS to change the color to match all of the other cells, though.
  Reply ↓
  1. Indrajit on September 17, 2012 at 9:53 am said:
    
    Hi Matthew
    I want to buy your plugin but now i am using your free version but i have two problem right now, one is it cannot sent mail in my gmail, or yahoo mail, and not showing any attachment, so please solve this problem, if it works well then i will buy your plugin.
    
    Indrajit
  2. Matthew Muro on September 18, 2012 at 8:32 am said:
    
    First is to make sure that you have the proper permissions set on your wp-content folder. Otherwise, file uploads will not work properly. As far as emails not coming through, make sure you have filled out all of the options in Form Settings > Email. If that’s not working, then you might need to install WP Mail SMTP.
jacco on September 28, 2012 at 1:26 pm said:

Matthew, for my restaurant reservation form I can only accept dates that are in the future so I would like to disable the ability to choose dates in the past.
I thought I saw a post about a jquery modification with MinDate:0.
Can you clarify this a bit since I’m quite new to java scripting…

Thanks!
Reply ↓
jacco on October 8, 2012 at 12:56 pm said:

in reaction to my previous post: found it already Matthew.
But if you have a moment, can you tell me if it’s possible to disable a day in the picker. My restaurant is closed on mondays and I want to disable this day in the picker…
thx!
Reply ↓
jacco on October 8, 2012 at 1:31 pm said:

I have disabled the mondays, also every day before today with this my-js.js file:

jQuery(document).ready(function($) {
$.datepicker.setDefaults({
minDate:+1,
beforeShowDay: disableMonday
});
});
function disableMonday(date) {
var day = date.getDay();
return [(day != 1), ''];
}

I used this link:
http://articles.tutorboy.com/2010/09/03/jquery-ui-datepicker-disable-specified-dates/
Reply ↓
1. pwhitelaw on January 24, 2013 at 8:32 am said:
  
  do you know the code to disable Monday & Tuesday? I’ve tried everything and nothing seems to work.
  
  Thanks in advance
  Reply ↓
  1. Matthew Muro on January 25, 2013 at 3:38 pm said:
    
    Sorry, I can’t help you there. Try StackOverflow.
  2. Jorge Santos on January 31, 2013 at 3:17 pm said:
    
    Hi Mathew!
    Congratulations to your nice post!
    I am a beginer and using wordpress 3.5.
    I change de alias $ to jQuery. My theme is twenty ten and i am trying using the datepicker in a contact form 7.
    I used the id and putted it on the date field on that contact form.
    Not Work!
  3. Matthew Muro on January 31, 2013 at 9:42 pm said:
    
    I suggest trying StackOverflow for help with this.
Ken Richman on October 17, 2012 at 6:30 am said:

Hi Matthew

Best form creator by a long way.
Is it possible to set it so that the date format follows the format configured in the WordPress settings? I need ddmmyy, the emails generated always have mmddyy.

Secondly, it ‘s great to be able to upload files, but I have found it’s possible to upload any file type even though I have listed only doc,, docx and pdf – is this a bug or have I missed something?
Reply ↓
1. Matthew Muro on October 17, 2012 at 8:25 am said:
  
  Just follow the directions in this tutorial to manually create a JavaScript file with the date format you want.
  Reply ↓
Rob Cunningham on October 18, 2012 at 11:29 pm said:

Hello Matthew, I just purchased your Visual Form Builder Pro today and love your program. We are under a SEVERE time crunch to create, configure and “go live” with 2 “Student Application/Enrollment Forms” prior to Monday morning (National convention and major product launch!) My learning curve is pretty steep but I’m slowly entering all the required questions and form fields. However, I have ZERO css coding experience and I need to ensure I can get both of my new forms 1) looking decent, and 2) functioning properly. I’m in the Atlanta area (Alpharetta) and desperately need some extra help/support. What is difficult for me is probably like “falling off a log” for a guy like you – any help. assistance or recommendations you can offer would be greatly appreciated! Thanks, Rob
Reply ↓
1. Matthew Muro on October 22, 2012 at 7:37 pm said:
  
  Feel free to either shoot me an email or post on the support forum. I’ll do what I can, when I can, to help.
  Reply ↓
Nilima on November 28, 2012 at 11:34 pm said:

I have a datepicker where users are not allowed to select future dates.Now the problem is -suppose today’s date is 29th November 2012,so for month drop down december month will not be shown,and for the first time when user selects the year as 2010 or something less than 2012,expected result is, december to be shown in month drop down, but its not showing.
It is shown if user selects a date in some other month and then goes on to change it again.
Reply ↓
1. Matthew Muro on November 30, 2012 at 5:40 pm said:
  
  Not sure what code you are using to produce that. Have you checked out my other Date Picker tutorial?
  Reply ↓
Binte Abdul Rasheed on December 2, 2012 at 2:31 pm said:

Hi Mathew,
I use your function.php code in my functions.php and create js file in theme’s js folder but I didn’t get any date picker in my date’s field, Help me plz.
Reply me soon.

Thanks
Reply ↓
Binte Abdul Rasheed on December 2, 2012 at 2:39 pm said:

I change another theme it is showing in that theme but I want to use second theme which is not showing date picker is any file conflicting plz help me I am in trouble.

Thanks
Reply ↓
kerem on December 3, 2012 at 5:00 pm said:

hello,

I changed the date format using this method. It worked. But there is a strange problem. After I uploaded the js folder with js file and edited fuction.php, my wp admin page became inaccessible (white blank page opens.)

I uploaded the original php and it came back. Then I uploaded edited functions.php, admin page still accessible and after deleting cookies of the browser (chrome) the admin page is again does not open, only a white page opens. Please help.
Reply ↓
1. Matthew Muro on December 3, 2012 at 10:32 pm said:
  
  This happens because your PHP tags are not closed properly. Try contacting the theme author to see where the best place in your functions.php file is to place the code.
  Reply ↓
Yiannis on December 13, 2012 at 9:22 am said:

Hi Matthew! Congrats for your plugin!
A question. Where should i paste the code you give in functions.php?
I want to change the format to dd/mm/yy.
I m following your instructions but when i modify the functions.php file seems that the javascript of my theme does not work at all…:(
Reply ↓
1. Matthew Muro on December 13, 2012 at 9:47 am said:
  
  In between the opening and closing PHP tags. I don’t know what theme you are using so you should contact the theme author and ask where it’s best to place the code.
  Reply ↓
gerde3108 on January 7, 2013 at 4:19 am said:

Kann mir vielleicht jemand helfen. Mein Englisch ist nicht so gut. Es geht um das Format des Datums. Ich würde es gern anpassen wollen. Derzeit ist es so:
01/07/2013. Dies möchte ich gern ändern in 7.1.2013 Danke für die Hilfe.

Maybe someone can help me. My English is not so good. It is about the format of the date. I would like to adapt want. Currently, there is this:
01/07/2013. This I would like to change in 01/07/2013 Thanks for the help.
Reply ↓
1. Matthew Muro on January 8, 2013 at 9:37 pm said:
  
  The instructions for changing the date format are in this very blog post. Look for the section titled “Configure All Date Pickers on All Forms.”
  Reply ↓
  1. Gerd on January 10, 2013 at 1:25 am said:
    
    Hi Matthew, Thanks for the answer. I use a template of yootheme. As soon as I change something in the function.php, my pictures and Accordions are not displayed correctly. Incidentally, I no longer have access to the support page of yours. You had written to me, but unfortunately I have lost my Order Number. I’m on 13 Mar 2012 09:52:31 GMT paid with PayPal.
  2. Matthew Muro on January 10, 2013 at 8:09 pm said:
    
    Contact the author of the theme and ask where a safe place is to insert the code from the tutorial. It’s typically in between the opening and closing PHP tags.
Rod on January 13, 2013 at 11:34 pm said:

Worked!

Thank You so much!
Reply ↓
S Srikanth on January 28, 2013 at 2:24 am said:

*Important Note* Many people following this tutorial may find it not working. Somehow the $ symbol for jquery in the script file could be clashing elsewhere. So replace the $ symbol with ‘jQuery’ like in

jQuery(document).ready(function($) {
jQuery.datepicker.setDefaults({
dateFormat: ‘yy-mm-dd’
});
});
Reply ↓
1. Matthew Muro on January 28, 2013 at 9:52 am said:
  
  The code I provided is already in noConflict mode and the $ is available as an alias. That’s what the jQuery(document).ready(function($) { line does.
  Reply ↓
Loranz on January 30, 2013 at 9:19 am said:

Hi! Please can you explain the metod for transate the names of months and days?? Thank you so mutch!
Reply ↓
1. Matthew Muro on January 31, 2013 at 8:46 am said:
  
  Check out the other date picker tutorial.
  Reply ↓
Dharmaputra on February 26, 2013 at 12:28 pm said:

Hello Matt,

I follow all your instruction, it works fine for the first click.
When I try to revise the date, then it appears this “Please enter a valid date.”

Do you know why?

Thank you bro!
Reply ↓
1. Matthew Muro on February 27, 2013 at 4:09 pm said:
  
  The validation still has to pass as a date: http://docs.jquery.com/Plugins/Validation/Methods/date
  Reply ↓
Steven Doig on March 10, 2013 at 11:11 pm said:

Hi. This works on pages with a form in them, but it causes problems to my home page, which doesn’t have a form in it.

The code causes my image slider to not load.

Renaming /js to /js2 resolves this.

How do I make the javascript conditional on a form being present?
Reply ↓
1. Gabriel on May 12, 2013 at 10:39 am said:
  
  same here – it only works on a site with a form. On all other pages my menu and all jquery elements crash. I dont know how to solve this
  Reply ↓
  1. Gabriel on May 12, 2013 at 11:25 am said:
    
    it helped to move the jquery call to the footer with
    wp_enqueue_script( ‘my-js-file’, ”,”,”,true );
    
    Not sure if its the perfect solution. For me it only works that way. My function.php is in a child theme by the way…
  2. Gabriel on May 12, 2013 at 12:30 pm said:
    
    Sorry I was wrong. Didnt work. Whenever I ad $.datepicker it crashes all pages without a form.
  3. Gabriel on May 24, 2013 at 8:24 am said:
    
    Any advise?
2. Gabriel on June 10, 2013 at 11:49 am said:
  
  Matthew can you please help? Why is it crashing on all sites with no form on it?
  Reply ↓
  1. Gabriel on June 14, 2013 at 11:41 am said:
    
    I solved it by moving the script into the footer.php of the template what is not the best choice as this is not good when working with a child theme.
Daniele on March 19, 2013 at 7:02 am said:

i i can’t configure the data picker il dd-mm-yy and i do no how can change all in my language

thank’s

Can i help me ?
Reply ↓
Alison on March 21, 2013 at 11:48 pm said:

What if I want a date format that uses the 3 letter abbreviation for the month, instead of numbers? Can I do that too? Do I just use dd-mmm-yyyy?
Reply ↓
1. Paul Needham on June 4, 2013 at 4:30 am said:
  
  Hi Matthew,
  
  I’m have difficulties configuring the date picker format. I’ve created the JS file and added it to my theme (Thesis 1.8) via functions.php file. The file paths appear to be correct and I’ve refreshed the browser numerous times but the date remains in the American MM/DD/YY format rather than the standard British DD/MM/YY format which my client needs. Any ideas?
  
  Also is it possible to format the labels on the address fields. I’d like to change State / Province / Region to the more usual County for the UK.
  
  Otherwise all good. Very happy and impressed with Visual Form Builder and I’ll be offering it to other clients.
  
  Best Regards,
  
  Paul.
  Reply ↓
mTest on April 4, 2013 at 7:31 am said:

Hey, Thank you very much for the article. Makes a non programmer like mine’s life so much easier. Thanks alot
Reply ↓
Blake on April 6, 2013 at 4:42 am said:

First off I just bought your program and it looks great. I just need to make a couple of tweaks to the date module and then it should be just what I need. I can’t figure out how to do it though. I want to change the date field to show more than one date: from a date, to a date. The following is what I did, but it doesn’t change the date field? I think the problem is probably in the my-js.js file. Any help or guidance would be greatly appreciated. Thanks

I put the following in to the function.php file of my theme:
——————————————————————–

//Code for Visual Form Builder
function my_scripts_method() {
wp_register_script( ‘my-js-file’,
get_template_directory_uri() . ‘/js/my-js.js’,
array( ‘jquery’ ),
’1.0′,
false );

wp_enqueue_script( ‘my-js-file’ );
}

add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );
}?>
———————————————————
I put this code in the my-js.js file:
———————————————————

jQuery UI Datepicker – Select a Date Range

$(function() {
$( “#from” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( “#to” ).datepicker( “option”, “minDate”, selectedDate );
}
});
$( “#to” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( “#from” ).datepicker( “option”, “maxDate”, selectedDate );
}
});
});

From

to
Reply ↓
Blake on April 6, 2013 at 10:17 pm said:

Thanks Matthew for your quick response back to me on the datepicker configuration. I have now sort of have things working. I didn’t have the code for the function.php file in the proper place, but now do and able to customize the date picker. I have changed the default to show 3 months of calendars, and that works great. I have the function to have a from and to date: $(function() {
$( “#from” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( “#to” ).datepicker( “option”, “minDate”, selectedDate );
}
});
$( “#to” ).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( “#from” ).datepicker( “option”, “maxDate”, selectedDate );
}
});
});

All seems good, but where do you put the following?::

From

to

If you could point me in the right direction that would be great. Also how do you customize the form fields? Such as I want to delete the country box from the address and take one of the address boxes away?

Thanks again, great program, even if I’m somewhat pulling my hair out over this, probably a easy fix.
Reply ↓
Blake on April 6, 2013 at 10:19 pm said:

Opps-this is the code I’m wondering where to put for the datepicker to work, seems it didn’t make it into the last post.

From

to
Reply ↓
Tim Dugan on May 5, 2013 at 7:58 pm said:

I am looking to remove access from users to select Saturday and Sunday on the date form (our shop is closed on those days) – how would I go about this?

Thanks,
Reply ↓
Carson on June 15, 2013 at 10:02 am said:

I have tried using the code you recommend, It seems that I am able to change the date pick, but I have issues with other javascript on the site. When I use your code in the Functions.php file it breaks my Revolution slider plugin and a blog carousel that I have, that also uses Javascript.

Any help would be great.
Reply ↓

How to customize the Date Picker

Create a JS file and add to your theme via functions.php file

Configure All Date Pickers on All Forms

Configure a Single Date Picker on a Single Form

Bonus: Use Both Configuration Methods

81 thoughts on “How to customize the Date Picker”

Leave a Reply Cancel reply

Search Blog

Recent Posts

Archives

Categories