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.

 

 

Powered by WordPress. Designed by Woo Themes