Add a jQuery DatePicker to WordPress Theme or Plugin

Here is a quick method to localize with ease the jQuery UI datepicker  fields on your site. If you create your own WordPress plugins or themes, you will probably have found yourself in a situation where you have added a date field to a plugin’s or theme’s admin page.

There are several ways to include jQuery into a theme. I always use WP bundled version which I find very simple. To properly set things up, we need to make sure WP page will have following files to be included in page load. For loading bellows script & style add bellows code on theme functions.php file.

Script for front-end use

function add_e2_date_picker(){ 
//jQuery UI date picker file 
wp_enqueue_script('jquery-ui-datepicker'); 
//jQuery UI theme css file 
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false); 
} 
add_action('wp_enqueue_scripts', 'add_e2_date_picker');

Script for back-end use

function add_e2_date_picker(){ 
//jQuery UI date picker file 
wp_enqueue_script('jquery-ui-datepicker'); 
//jQuery UI theme css file 
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false); }
add_action('admin_enqueue_scripts', 'add_e2_date_picker');

We can write a function to be hooked for specific pages, such as single.php, page or plugin page. I have add or hooked on ‘options-general.php’ for display on

Just put this code also funtions.php file or bellow those code.

function register_datepiker_submenu() { 
add_submenu_page( 'options-general.php', 'Date Picker', 'Date Picker', 'manage_options', 'date-picker', 'datepiker_submenu_callback' ); 
} function datepiker_submenu_callback() 
{ ?>

<?php } add_action(‘admin_menu’, ‘register_datepiker_submenu’); ?

After adding this code, you’ll got a date picker on Admin Menu->Settigns->Date Picker. If you need any help for getting this option ask any query throw comments.

Leave a Comment

Your email address will not be published.