I try to add DataTimePickier to my plugin. DataPicker works very well, but DataTimePicker doesn't want to work at all. I click on the input and nothing happens.
In normal .php file, where DataTimePicker works perfectly I include :
<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
</head>
<body>
<input type="text" class="datepicker"/>
<!--loading jQuery and other library-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="script.js"></script>
In WordPress plugin file I try to inclue the same files like in normal .php file:
function add_datapicker()
{
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_enqueue_script( 'jquery-ui-slider' );
wp_register_script('add_time', plugins_url('/jquery-ui-timepicker-addon.js', __FILE__));
wp_register_script('add_datatime', plugins_url('/jquery-ui-sliderAccess.js', __FILE__));
wp_register_script('add_script', plugins_url('/script.js', __FILE__));
wp_enqueue_style('jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
wp_enqueue_script( 'add_datatime' );
wp_enqueue_script( 'add_time' );
wp_enqueue_script( 'add_script' );
}
add_action( 'wp_enqueue_scripts', 'add_datapicker' );
add_action( 'admin_enqueue_scripts', 'add_datapicker' );
In normal DataPicker (without time) i had included code like bellow:
function myplugin_add_datapicker() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_register_script('add_data', plugins_url('/js/datepicker.js', __FILE__));
wp_enqueue_style('jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
wp_enqueue_script( 'add_data' );
}
add_action( 'wp_enqueue_scripts', 'myplugin_add_datapicker' );
add_action( 'admin_enqueue_scripts', 'myplugin_add_datapicker' );
And it was working perfectly. So, where is a mistake?
Script.cs is the same file like datapicker.js. Content bellow:
$(function()
{
$('.datepicker').datetimepicker(
{
timeFormat: "HH:mm:ss",
stepHour: 1,
stepMinute: 1,
stepSecond: 1,
timeText: 'Czas',
hourText: 'Godziny',
minuteText: 'Minuty',
secondText: 'Sekundy',
currentText: 'Aktualny czas',
closeText: 'Gotowe'
});
jQuery(function($){
$.datepicker.regional['pl'] = {
closeText: 'Zamknij',
prevText: '<Poprzedni',
nextText: 'Następny>',
currentText: 'Dziś',
monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze',
'Lip','Sie','Wrz','Pa','Lis','Gru'],
dayNames: ['Niedziela','Poniedziałek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'],
dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'],
weekHeader: 'Tydz',
dateFormat: 'yy-mm-dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['pl']);
});
});
Thanks for helping.
I can see several issues. Firstly you are including the scripts with the wrong action call of 'init' instead of 'wp_enqueue_scripts'. Another smaller point is that it is good practise to prefix all your function calls with a unique identifier string for your plugin so that you're not overwriting some other plugins function. Your add action call should look like this...
add_action( 'wp_enqueue_scripts', 'myplugin_add_datapicker' );
add_action( 'admin_enqueue_scripts', 'myplugin_add_datapicker' );
(replace myplugin with whatever works for your plugin, i usually use a 3 letter identifier eg hhf_add_datepicker)
Your next issue (and probably main issue) is that you have not included any dependencies when you register your scripts. As datepicker.js (i presume) relies on jquery-ui-datepicker you need to tell wordpress that. eg...
wp_register_script( 'datepicker', plugin_dir_url( __FILE__ ) . '/file/path.js', 'jquery-ui-datepicker' );
You can find out more about how to enqueue scripts in the wordpress codex. There are also a few typos and mistakes in your code, a missing semi-colon and not sure what filepath you're linking to but it doesn't look right. assuming that your datepicker.js file is in a directory called 'js' in your plugin directory your code should look like this...
function myplugin_add_datapicker() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_register_script('timepicker', plugins_url( __FILE__ ) . '/js/jquery-ui-timepicker-addon.js', 'jquery');
wp_register_script( 'datepicker', plugin_dir_url( __FILE__ ) . '/js/datepicker.js', 'jquery-ui-datepicker' );
wp_enqueue_style('jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
wp_enqueue_script( 'timepicker' );
wp_enqueue_script( 'datepicker' );
}
add_action( 'wp_enqueue_scripts', 'myplugin_add_datapicker' );
add_action( 'admin_enqueue_scripts', 'myplugin_add_datapicker' );
The final thing you may want to address is that you have not used any conditional logic to tell Wordpress when specifically to enqueue your scripts. At the moment Wordpress will add all your scripts to every page inside and outside the admin area regardless of wether they're needed or not resulting in a higher possibility of conflicts and slower page loading.
I hope that helps
Regards
Dan