Wordpress插件需要管理員中的Jquery Datepicker和Timepicker

使用一個簡單的插件，將一些自定義字段添加到自定義發佈數據類型。該字段是一個JQuery timepicker和datepicker。我不知道問題出在哪裏。這是我的功能和自定義字段。請指出正確的方向，讓我知道什麼是缺少的，或者我怎樣才能得到它的工作。Wordpress插件需要管理員中的Jquery Datepicker和Timepicker

//FUNCTION TO ADD SCRIPTS TIMEPICKER JQUERY PLUGIN 
function tek_tour_script(){ 
    ?> 
<script> 
JQuery('#slider_example_1').timepicker({ 
    hourGrid : 4, 
    minuteGrid : 10, 
    timeFormat : 'hh:mm tt' 
}); 

JQuery(document).ready(function() { 
    JQuery('#MyDate').datepicker({ 
     dateFormat : 'dd-mm-yy' 
    }); 
}); 

</script> 
<?php 
wp_register_script('tek_tour_timepicker', plugins_url('/js/jquery-ui-timepicker-addon.js', __FILE__)); 
wp_enqueue_script('tek_tour_timepicker', plugins_url('/js/jquery-ui-timepicker-addon.js', dirname(__FILE__))); 

wp_register_script('tek_tour_sliderAccess', plugins_url('/js/jquery-ui-sliderAccess.js', __FILE__)); 
wp_enqueue_script('tek_tour_sliderAccess', plugins_url('/js/jquery-ui-sliderAccess.js', dirname(__FILE__))); 

wp_enqueue_script('jquery-ui-datepicker'); 
wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css'); 
} 
add_action('admin_enqueue_scripts', 'tek_tour_script');

這裏是我的div：

<h3>Times</h3> 
<br> 
<div> 
<input type="text" name="slider_example_1" id="slider_example_1" value="" /> 
<input type="text" id="MyDate" name="MyDate" value=""/> 
</div>

這裏是我的CSS：

function tek_tour_time_css(){ 
?> 
<style> 
.ui-timepicker-div .ui-widget-header { 
    margin-bottom: 8px; 
} 
.ui-timepicker-div dl { 
    text-align: left; 
} 
.ui-timepicker-div dl dt { 
    float: left; 
    clear: left; 
    padding: 0 0 0 5px; 
} 
.ui-timepicker-div dl dd { 
    margin: 0 10px 10px 45%; 
} 
.ui-timepicker-div td { 
    font-size: 90%; 
} 
.ui-tpicker-grid-label { 
    background: none; 
    border: none; 
    margin: 0; 
    padding: 0; 
} 
.ui-timepicker-rtl { 
    direction: rtl; 
} 
.ui-timepicker-rtl dl { 
    text-align: right; 
    padding: 0 5px 0 0; 
} 
.ui-timepicker-rtl dl dt { 
    float: right; 
    clear: right; 
} 
.ui-timepicker-rtl dl dd { 
    margin: 0 45% 10px 10px; 
} 
</style> 
<?php 
} 
add_action('admin_enqueue_scripts','tek_tour_time_css');

謝謝!!

來源

2014-02-08 crg821

jQuery代碼是不正確的，在timepicker需要是jQuery的（文件）。就緒（）內，

jQuery(document).ready(function() { 
    jQuery('#MyDate').datepicker({ 
     dateFormat : 'dd-mm-yy' 
    }); 
    jQuery('#slider_example_1').timepicker({ 
     hourGrid : 4, 
     minuteGrid : 10, 
     timeFormat : 'hh:mm tt' 
    }); 
});

您還需要創建一個JS文件，並將其入隊，因爲它呼應直接在「admin_enqueue_scripts」或「enqueue_scripts」操作中會發生錯誤，因爲那時jQuery並未在WordPress中加載。

而且您還應該添加JS代碼與jQuery庫的依賴關係。還要指定其他庫的依賴關係，以確保它們在jQuery庫之後加載。

將所有CSS和JS作爲單獨文件添加並分別使用wp_enqueue_style（）和wp_enqueue_script（）排隊，而不是直接回顯或打印它們也是一種很好的做法。

實施例：

wp_register_script('tek_tour_sliderAccess', plugins_url('/js/jquery-ui-sliderAccess.js', __FILE__), array('jquery')); 
wp_enqueue_script('tek_tour_sliderAccess');

參考： Wordpress Codex wp_enqueue_script() - Script Dependency

來源

2014-07-12 08:35:21 WisdmLabs

Wordpress插件需要管理員中的Jquery Datepicker和Timepicker

回答

相關問題