Apply Datepicker (jQuery UI) with Goo Include Me plugin

Sooner or later every website will need some sort of form for further interaction with site visitors. Datepicker implementation in form fields can be a very frustrating experience, although, WP already contain the necessary code in himself. Here we will explain how to attach datepicker to INPUT form field in three simple steps. We will use JQuery UI as a part of Core-Registered Scripts in WordPress.

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.

Prerequisites: understanding jQuery UI (datepicker), more info here.

Before all, let’s determine the date input field.

  • Create forms in any way you prefer and put it on the page (any form builders will do the job)
  • Make sure field you meant for datepicker is <input type="text"/>
  • Give unique ID to your input field (we used <input id="date_arrival" type="text" />)

Datepicker widget is part of jQuery User Interface library, and to run properly also need CSS compatible to UI itself.

Now, we need three “rules”, each for jQuery UI script, CSS to support UI, and short JavaScript code to hook datepicker to the desired INPUT element.

Step #1 – Script files

  • Handle – datepicker_script (or similar)
  • Src – ________ (leave blank)
  • Dependencies – jquery-ui-datepicker (exactly this)
  • Include into – %post_id% (post ID of the form page)
  • In footer – No
  • Script version – 1.0.0

 

Step #2 – CSS files

  • Handle – datepicker_css (or similar)
  • Src – http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css
  • Dependencies – ________ (leave blank)
  • Include into – %post_id% (post ID of the form page, same as from step 1)
  • Media – All
  • Style version – 1.0.0

 

Step #3 – Arbitrary HTML

  • Caption – datepicker_activate (or similar)
  • Code
<script>
jQuery("input#date_arrival").datepicker();
</script> 
  • Include into – %post_id% (post ID of the form page, same as from step 1)
  • Placement – Footer

All done.

Frontend screenshot

goo_include_me_screenshot_09

…and plugin screen should look like this:

goo_include_me_screenshot_10goo_include_me_screenshot_11goo_include_me_screenshot_12

You can ignore the “red box notice” displayed in the first image, because, we do not have an actual source file (although we can create one), a crucial factor in this rule is his “dependency”, which will be invoked when requirements are met in “Include into” option.

LIVE DEMO:

click on this input field ->

Tip: If your datepicker still doesn’t show up, you can try adding a bit of a CSS rule via jQuery, which will force higher Z-INDEX of INPUT field. This is a common problem with themes with too much effects and overlaid elements on the page.

<script>
	jQuery("input#date_arrival").css({
		"position": "relative",
		"z-index": "100000000"
	});	
	jQuery("input#date_arrival").datepicker();
</script>

Feel free to comment… 😀

Find out more about Goo Include Me plugin

…or

BUY THIS PLUGIN NOW!

 

Something to say...