load jQuery UI .datepicker for a WP frontend plugin

Question

First, I feel like I've read the whole stack of posts in this category about a 100 times. While the title sounds like a duplicate, I really mean I've tried all solutions I read to the questions asked around up to the whole concatenate thing with WP 3.5+.

My script works great in WP when I reference the actual jquery script & url. I'm reading everywhere this is a terrible way to implement so I've been trying to use the built-in WP libraries and no-conflict wrapper. I run WP 3.6 on a barebone local InstandWP install with default twentythirteen theme and no other plugin.

\\ Works great if I use these in WP 3.6
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

As I said earlier, I'm trying to do the right thing, so I've made experiments with a number of enqueue and/or (de)register options. So far none succeeded:

• Concatenate_scripts = false
• (de)register jQuery
• Enqueue (with the proper jQuery hooks as referenced in the Codex)

Of course I re-write the $ into jQuery and so on; but my issue seem to be up-hill, as the firebug console tells me : Uncaught ReferenceError: jQuery is not defined

So here I am. My code is good outside of WP, but I can't seem to get it to use it for a front-end plugin in WP with good coding practices.

\\ Loading the JS library & CSS
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/redmond/jquery-ui.min.css" />

\\ Definition of the datepicker rule
<script>
$(".full_date").datepicker({
showOn: 'button',
buttonText: 'Here',
dateFormat: 'DD, dd MM yy',
altFormat: "yy-mm",
altField: ".year-month",
onClose: function (dateText, picker) {
    // getDate returns a js Date object
     var dateObject = $(this).datepicker("getDate");
    console.dir(dateObject);
    // Call Date object methods
    $("#date input").val(dateObject.getDate());
    $("#month input").val(dateObject.getMonth());
    $("#day input").val(dateObject.getDay());
    $("#year input").val(dateObject.getFullYear());
}
});
</script>

\\ Some HTML
<h1>Date Picker</h1>

<form class="date-picker">
<label>full date</label>
<input type="text" class="full_date" value="" />
    <label>year month</label>
<input type="text" class="year-month"/>
</form>
<p id="day">Day of the week: <input name="day" type="text"></input> </p>
<p id="month">Month: <input name="month" type="text"></input></p>
<p id="date">Date: <input name="date" type="text"></input></p>
<p id="year">Year: <input name="year" type="text"></input></p>

If that helps, I have the whole thing on jsFiddle

Pretty please, could you just help on the syntax to get the code set the right way in WP 3.6+ ?

Thank you very much for taking the time to read through this. Greg

UPDATE

Here's the updated code. I still have an error : "Uncaught ReferenceError: jQuery is not defined".

<?php
add_action('wp_enqueue_scripts', 'load_my_scripts');

function load_my_scripts(){
wp_enqueue_script('jquery-ui-datepicker', '/wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js', array('jquery'));    
wp_register_style('date-picker', plugins_url('includes/jquery-ui-1.10.3.custom.min.css',__FILE__), true);
}
?>
<script type="text/javascript">
(function($) {
    $(document).ready(function($){
        $("#datepicker").datepicker();
    });
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>

You can see it live here:

http://s146485761.onlinehome.fr/wp_dev/debugging-test/

The full plugin is here

http://s146485761.onlinehome.fr/wp_dev/plugin_archive.zip

UPDATE 2

After a good while I just realized there was nothing wrong with the code, it only needed to be placed 1 level higher in my plugin folder. I created this "bulletproof" example as a dummy plugin I figured out from there the function & add_action snippets needed to be on the root of th eplugin folder.

In case that helps anyone, here's the test code I used :

<?php
   /*
   * Plugin Name: Hello World
   */
   add_filter( 'the_content', 'tfr_the_content' );
   function thisisonlyatest() {
      wp_enqueue_script('jquery-ui-datepicker');
      wp_enqueue_style('jquery-ui-datepicker','http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/redmond/jquery-ui.min.css' );
   }
   add_action("wp_enqueue_scripts","thisisonlyatest");
   function tfr_the_content( $content ) {
      return $content . '<p><input type="text" id="datepicker" value=""/></p>';
   }
   ?>
   <script type="text/javascript">
   jQuery(document).ready(function() {
   jQuery('#datepicker').datepicker({
   dateFormat : 'yy-mm-dd'
   });
   });
   </script>

Create a folder in your plugin folder. Create a blank php file in there and paste that code. Fire up your test wordpress instance and customize to your needs from there.

Thanks all for your help, hope this will help others too

Greg

Answer 1

For loading bellows script & style add bellows code on theme functions.php file.

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'); 

I have add or hooked on ‘options-general.php’ for display on Settigns->Date Picker. 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() { ?>

    <div class="wrap">

    <input type="text" class="datepicker" name="datepicker" value=""/>

    </div>

    <script>
    jQuery(function() {
        jQuery( ".datepicker" ).datepicker({
            dateFormat : "dd-mm-yy"
        });
    });
    </script> 

<?php }
add_action('admin_menu', 'register_datepiker_submenu');

?>

Please see more details on Add a jQuery Date Picker to WordPress Theme or Plugin

Answer 2

If the code above is what you're actually using, the issue is that $ isn't a jQuery object. You need something like:

jQuery(document).ready(function($){

   /** your code

 });

And as the person above was getting at, don't hard code jQuery, enqueue it. Also, just FYI, jQuery datepicker is part of core but the styles for it aren't so you'll need to roll a stylesheet and include that.

For example (using the jQuery Themeroller Redmond style):

add_action('wp_enqueue_scripts', 'load_my_scripts');

function load_my_scripts(){
wp_enqueue_script( 'jquery-ui-datepicker' );    
wp_register_style('date-picker', plugins_url('css/jquery-ui-redmond.css',__FILE__), true);
}