{"id":671,"date":"2016-06-14T12:51:53","date_gmt":"2016-06-14T00:51:53","guid":{"rendered":"http:\/\/geektactics.geektamin.com\/?p=671"},"modified":"2024-06-14T09:52:37","modified_gmt":"2024-06-13T21:52:37","slug":"gravity-form-set-datepicker-default-year-30-years-back","status":"publish","type":"post","link":"https:\/\/geektactics.co.nz\/blog\/gravity-form-set-datepicker-default-year-30-years-back\/","title":{"rendered":"Gravity Forms: How to set datepicker default date and add calender icon"},"content":{"rendered":"
By default the Gravity Forms datepicker will\u00a0start with today as the default date.<\/p>\n
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.<\/p>\n
This tutorials will show you how to\u00a0set the default date\u00a0in a datepicker.<\/p>\n
Once you have inserted the date field in the Gravity Forms editor, update the form and view the form on a page.<\/p>\n
Right click on the date field and click on Inspect Element to get the ID of the date field.<\/p>\n
<\/p>\n
In this example, you can see the ID is “input_4_46”.<\/p>\n
Once you \u00a0have the ID of the date field, go to your functions.php file (or your\u00a0custom function plugins) and copy paste the below code.<\/p>\n
\r\nadd_action('wp_head','custom_js'); \r\n function custom_js() \r\n {\r\n \/\/ break out of php ?> \r\n <script>\r\n jQuery(document).ready(function($) {\r\n jQuery(\"#YourIDGoesHere\").datepicker({ \r\n changeYear: true, \r\n changeMonth: true, \r\n \/\/ dateFormat: \"dd\/mm\/yy\", \r\n defaultDate: \"-30 Y\",\r\n yearRange: \"-100:+0\",\r\n showOn: 'both',\r\n buttonImage: '\/wp-content\/plugins\/gravityforms\/images\/calendar.png', \r\n buttonImageOnly: true \r\n });\r\n\r\n});\r\n <\/script>\r\n <?php\r\n } \/\/ break back into php\r\n\r\n\r\n<\/code><\/pre>\nMake sure to replace the ID of the date field input and view the form. It should work.<\/p>\n
Explanations:<\/h3>\n
Line 1:\u00a0We 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.<\/p>\n
Line 7: replace the ID with your date field ID. \u00a0If 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:<\/p>\n
jQuery(\"#input_2_135,#input_2_85\").datepicker();<\/code><\/pre>\nLine 8: changeYear: true<\/strong>\u00a0 \u00a0This setting shows the select year option in the datepicker<\/p>\nLine 9: changeMonth: true <\/strong>\u00a0This settings shows the select month option in the datepicker<\/p>\nLine 10: dateFormat: “dd\/mm\/yy”<\/strong>\u00a0This 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.<\/p>\nLine 11: defaultDate<\/strong>: “-30 Y”<\/strong> This code sets the default year\u00a0to go 30 years back. Your default date could also be a number of days, weeks or months. See below for more explanations.<\/p>\nLine 12: yearRange: “-100:+0”<\/strong> 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.<\/p>\nLine 13: showOn: ‘both’, \u00a0\u00a0<\/strong>This code sets the datepicker to open when the user clicks in the date field or clicks the calendar icon.<\/p>\nLine 14: buttonImage<\/strong>: ‘\/wp-content\/plugins\/gravityforms\/images\/calendar.png’, \/\/\u00a0This code adds the calendar icon image. Without this code the calendar icon image disappears.<\/p>\nLine 15: buttonImageOnly<\/strong>: true<\/strong> Without this code, a weird button appears around the calendar icon. Adding this code removes the button and shows only the calendar icon.<\/p>\nOptions for setting the default date with days, weeks, months, years or a specific date<\/h2>\n
Here are some examples of how\u00a0<\/b>you can set the days, weeks, months, years or\u00a0a specific date.<\/p>\n
This code makes the default date to go 10 days back:<\/p>\n
defaultDate: '-10 D',<\/code><\/p>\nThis code makes the default date to go 10 days forward:<\/p>\n
defaultDate: '+10 D',<\/code><\/pre>\nThis code makes the default month\u00a0to go 3 months\u00a0back:<\/p>\n
defaultDate: '-3 M',<\/code><\/pre>\nThis code makes the default month\u00a0to go 3\u00a0months\u00a0forward:<\/p>\n
defaultDate: '+3 M',<\/code><\/pre>\nThis code makes the default year\u00a0to go 3 years\u00a0back:<\/p>\n
defaultDate: '-3 Y',<\/code><\/pre>\nThis code sets the default date to a specific date (in this example 3rd of August 2008):<\/p>\n
defaultDate: new Date(2008,9,3),<\/code><\/pre>\nNote<\/strong>: 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\u00a0to 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),<\/strong>”<\/p>\nHow to set date for a specific month:
\n0. January
\n1. February
\n2. March
\n3. April
\n4. May
\n5. June
\n6. July
\n7. August
\n8. September
\n9. October
\n10.November
\n11.December<\/p>\n
Options for year range<\/h2>\n
yearRange<\/strong>: “-100:+0” where “-100” displays the last 100 years. \u00a0For example, if the current year is 2016, then it will display year from 1916 to 2016. \u00a0and 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.<\/p>\nFor example, if you want the year range to be displayed 4 years into the future\u00a0you can add “+4”\u00a0and it will increment the year by adding 4 more years.<\/p>\n
This code\u00a0makes the year dropdown to go 100 years back and ends in the current year.<\/p>\n
yearRange: \"-100:+0\"<\/code><\/pre>\nThis code\u00a0makes the year dropdown go 100 years back and 10 years forward.<\/p>\n
yearRange: \"-100:+10\",<\/code><\/pre>\n <\/p>\n
Hope you find this article helpful. Leave a comment below.<\/p>\n
<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
By default the Gravity Forms datepicker will\u00a0start 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 […]<\/p>\n","protected":false},"author":5,"featured_media":687,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[149],"class_list":["post-671","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-gravity-forms"],"yoast_head":"\n
Gravity Forms: How to set datepicker default date and add calender icon - Geektactics<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\t\n\t\n\t\n