Gravity Forms: How to set datepicker default date and add calender icon

By default the Gravity Forms datepicker will start with today as the default date.

On some occasions, you might want the datepicker to start with a different date. For example, in a Date of Birth field, you might want the date picker default date to go 30 years back. For an appointment date field you might want the default date to be next week.

This tutorials will show you how to set the default date in a datepicker.

Step 1: Insert a Date Field in Gravity Forms

Once you have inserted the date field in the Gravity Forms editor, update the form and view the form on a page.

Right click on the date field and click on Inspect Element to get the ID of the date field.

datepicker_html_inputID

In this example, you can see the ID is “input_4_46”.

Step 2: Inserting the code

Once you  have the ID of the date field, go to your functions.php file (or your custom function plugins) and copy paste the below code.


add_action('wp_head','custom_js'); 
 function custom_js() 
 {
 // break out of php ?> 
 <script>
 jQuery(document).ready(function($) {
 jQuery("#YourIDGoesHere").datepicker({ 
 changeYear: true, 
 changeMonth: true, 
 // dateFormat: "dd/mm/yy", 
 defaultDate: "-30 Y",
 yearRange: "-100:+0",
 showOn: 'both',
 buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', 
 buttonImageOnly: true 
 });

});
 </script>
 <?php
 } // break back into php


Make sure to replace the ID of the date field input and view the form. It should work.

Explanations:

Line 1: We are using the wp_head action hook to insert our code. Instead of adding a seperate javascript file, we are inserting the script right here in our function.php file.

Line 7: replace the ID with your date field ID.  If you want your settings to apply to two different date fields, use a comma to separate the selectors just like when using css like this:

jQuery("#input_2_135,#input_2_85").datepicker();

Line 8: changeYear: true   This setting shows the select year option in the datepicker

Line 9: changeMonth: true  This settings shows the select month option in the datepicker

Line 10: dateFormat: “dd/mm/yy” This code sets the date format to “dd/mm/yy”. This is commented out in the code above. If you want to set the date format to “dd/mm/yy”, remove the comment from the start of the line.

Line 11: defaultDate: “-30 Y” This code sets the default year to go 30 years back. Your default date could also be a number of days, weeks or months. See below for more explanations.

Line 12: yearRange: “-100:+0” This code sets the year range for the last 100 years. If you don’t set this code, the year range gets restricted to the last 30 years as we have set “defaultDate” to go back 30 years.

Line 13: showOn: ‘both’,   This code sets the datepicker to open when the user clicks in the date field or clicks the calendar icon.

Line 14: buttonImage: ‘/wp-content/plugins/gravityforms/images/calendar.png’, // This code adds the calendar icon image. Without this code the calendar icon image disappears.

Line 15: buttonImageOnly: true Without this code, a weird button appears around the calendar icon. Adding this code removes the button and shows only the calendar icon.

Options for setting the default date with days, weeks, months, years or a specific date

Here are some examples of how you can set the days, weeks, months, years or a specific date.

This code makes the default date to go 10 days back:

defaultDate: '-10 D',

This code makes the default date to go 10 days forward:

defaultDate: '+10 D',

This code makes the default month to go 3 months back:

defaultDate: '-3 M',

This code makes the default month to go 3 months forward:

defaultDate: '+3 M',

This code makes the default year to go 3 years back:

defaultDate: '-3 Y',

This code sets the default date to a specific date (in this example 3rd of August 2008):

defaultDate: new Date(2008,9,3),

Note: Date must be in this format (yy,mm,dd), else the date won’t work. Months start from 0 and end with 11 where “0” points to January and “11” points to December. For example, if you want to set the default date to ” January, 15th, 2009″ then your code will be “defaultDate: new Date(2009,0,15),

How to set date for a specific month:
0. January
1. February
2. March
3. April
4. May
5. June
6. July
7. August
8. September
9. October
10.November
11.December

Options for year range

yearRange: “-100:+0” where “-100” displays the last 100 years.  For example, if the current year is 2016, then it will display year from 1916 to 2016.  and the “+0” makes the year go forward. Here the year won’t go forward as the value is set to “+0”. If you set the value to “+1”, it will increment the year by 1 more year.

For example, if you want the year range to be displayed 4 years into the future you can add “+4” and it will increment the year by adding 4 more years.

This code makes the year dropdown to go 100 years back and ends in the current year.

yearRange: "-100:+0"

This code makes the year dropdown go 100 years back and 10 years forward.

yearRange: "-100:+10",

 

Hope you find this article helpful. Leave a comment below.

 

 

  • David

    Hi,
    thanks for the valuable post.

    I am trying to get some similar options you have used like default date with datepicker in gform and restrictive range that will work together.

    I am wandering that is it possible with functions.php or someother way like in your blog post to use

    1. range in datepicker based on other field e.g. dropdown value
    2. set default value based on dropdown with restrictive range

    Main issue is that my dropdown value have wide range say value 1 to 300.

    Can it work like below:

    1. For dropdown value 1 to 10, show datepicker range 2 days to 7 days from current date and show default value to 5 days from current day

    2. Dropdown value 11 to 25, show datepicker range 3 days to 10 days and default value to 7 days from current date.

    I am looking to get any help or suggestion on above.

    David

  • This is a lifesaver. Every other forum and blog post I looked at simply did not work on the front end. I realised then it had to be a php implementation so it could override the current JS. Thank you so so much!!

Powered by WordPress. Designed by Woo Themes