Datetime Picker Wordpress Plugin - wordpress

Question

Below is a page code of my custom plugin where I am trying to use jquery datetime picker.
The picker script was taken from this link. But due to some reason I am getting an Error message saying "jQuery("#calendar1, #calendar2").calendar is not a function". I have checked that the files required are included correctly and before the custom code. But still there is this error.
<?php
function list_my_styles() { // ADDING THE SCRIPTS
$plugin_url = WP_PLUGIN_URL.'/my_custom_datepicker/';
wp_register_style('my-addon-datepicker-css',$plugin_url.'jquery-calendar.css');
wp_enqueue_style('my-addon-datepicker-css');
wp_enqueue_script('jquery');
wp_register_script('calendar_plugin',$plugin_url.'jquery-calendar.js');
wp_enqueue_script('calendar_plugin');
}
add_action('wp_enqueue_scripts','list_my_styles');
function my_custom_datetime_script() { // ADDING THE JQUERY SCRIPT
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#calendar1, #calendar2").calendar();
jQuery("#calendar1_alert").click(function(){alert(popUpCal.parseDate(jQuery('#calendar1').val()))});
});
</script>
<?php
}
add_action('wp_head','my_custom_datetime_script');
function custom_datetime_picker_area() {
?>
<input type="text" id="calendar1" class="calendarFocus"/>
<input type="button" id="calendar1_alert" value="Alert datetime object"/>
<?php
}
add_shortcode('my_datepicker','custom_datetime_picker_area');
?>
Any Help will be appreciated
Thanks

Answer 1

This is what I use in my plugin:
/* add jquery ui datepicker and theme */
global $wp_scripts;
wp_enqueue_script('jquery-ui-datepicker');
$ui = $wp_scripts->query('jquery-ui-core');
$url = "https://ajax.aspnetcdn.com/ajax/jquery.ui/{$ui->ver}/themes/redmond/jquery.ui.all.css";
wp_enqueue_style('jquery-ui-redmond', $url, false, $ui->ver);
The CDN I'm using has all of the available themes to choose from as well.
Then on my form page i use:
<label for="date_of" style="width: 135px !important;">Presentation Date
<?php echo '<img src="'.$this->pluginurl.'images/help.png"
title="Enter the Presentation date here." />';?>
</label>
<input type="text" id="date_of" name="date_of" value="" />
and in:
jQuery(document).ready(function() {
jQuery('#date_of').datepicker({
dateFormat: 'yy-mm-dd'
});
});
I load plugin.js file with register/enqueue_script which contains the document.ready function.
Hope this helps.

Answer 2

The error means it can not find this function , which in turns means either :
1 - it can not find the script , or
2 - you are trying to execute the script before it is loaded ..
One thing I did not understand - where is this code going in your plugin ??
Anyhow, first verify that you have a wp_head() and wp_head() action (template tags) in your THEME where you test the plugin, Then , also try to move the action to the footer ...
function my_custom_datetime_script() { // ADDING THE JQUERY SCRIPT
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#calendar1, #calendar2").calendar();
jQuery("#calendar1_alert").click(function(){alert(popUpCal.parseDate(jQuery('#calendar1').val()))});
});
</script>
<?php
}
add_action('wp_footer','my_custom_datetime_script');