How to add a jQuery datepicker in WordPress

It's possible to add a calendar (a datepicker) in WordPrss by using a jQuery UI.
jQuery a datepicker (calendar) in WordPress

jQuery datepicker

You can easily find an appropriate jQuery datepicker source in the Internet. For example, the folloiwng simple jQuery function can be used to add a datepicker in a form.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker({
dateFormat: 'yy-mm-dd'
});
});
</script>
<p>Date of Birth (DOB): <input type="text" id="datepicker1"></p>

The above code is composed of three parts: jQuery file import scripts, a jQuery function and input tags. You can insert the jQuery css/js/library file import part into the header section and input tags into the affected form. You must enqueue (hook) the jQuery function, the essential part of the datepicker, in the fuctions.php of your WordPress theme.

How to enqueue the jQuery script

Detailed information on how to hook (enqueue) the jQuery script can be found on this WordPress Codex page.

You can add a jQuery datepicker in WordPress by using the folloiwng steps:span>

  • Add the following jQuery import script into the header file (header.php.)

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

  • Copy the datepicker function section and then save it as a js file (i.e. datepicker.js.)
  • Save the js file created above under the subfolder "js" under your WordPress theme folder (or child theme folder.) (i.e. Please saver under the folder "wp-content > themes > theme folder > js")
  • Hook (enqueue) this js file as a function form in your WordPress theme function file (functions.php). For example, please specify the path of the js file by referring to the WordPress Codex page.
  • Add the datepicker (calendar) by using a code such as <input type="text" id="datepicker1">( .)

Using the same process, you can also hook other jQuery functions in WordPress.

Leave a Comment