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:

  1. Change the configuration for all Date Pickers on all forms
  2. 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.