在wordpress中使用jquery datepicker

我希望datepicker能够在我的wordpress模板页面中以某种forms出现，但它不起作用。

这是我的子主题函数的代码.php：

function modify_jquery() { if (!is_admin()) { // comment out the next two lines to load the local copy of jQuery wp_deregister_script('jquery'); wp_register_script('jquery', 'http://ajax.googleapis.com/ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', false, '2.1.1'); wp_enqueue_script('jquery'); } } add_action('init', 'modify_jquery'); function load_jquery_ui_google_cdn() { global $wp_scripts; wp_enqueue_script('jquery-ui-core'); wp_enqueue_script('jquery-ui-slider'); // get the jquery ui object $queryui = $wp_scripts->query('jquery-ui-core'); // load the jquery ui theme $urlui = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"; wp_enqueue_style('jquery-ui-smoothness', $urlui, false, null); } add_action('wp_enqueue_scripts', 'load_jquery_ui_google_cdn'); 

然后我在page-mypage.php中这个：

   $(function() { $( "#datepicker" ).datepicker(); });  ...other code... Date:  ...other code...  

但它没有表现出来。 你能帮我解决什么问题吗？

Answer 1

您用于加载jQuery的代码无效，并且您根本没有加载datepicker（jQuery UI Datepicker）。 我已经发布了一些关于在WordPress中使用jQuery的正确方法的答案，因此我将提供一个工作示例，然后提供一个链接，如果您想阅读更多内容。

将您插入到子主题functions.php中的代码替换为：

 /** * Load jQuery datepicker. * * By using the correct hook you don't need to check `is_admin()` first. * If jQuery hasn't already been loaded it will be when we request the * datepicker script. */ function wpse_enqueue_datepicker() { // Load the datepicker script (pre-registered in WordPress). wp_enqueue_script( 'jquery-ui-datepicker' ); // You need styling for the datepicker. For simplicity I've linked to Google's hosted jQuery UI CSS. wp_register_style( 'jquery-ui', 'http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' ); wp_enqueue_style( 'jquery-ui' ); } add_action( 'wp_enqueue_scripts', 'wpse_enqueue_datepicker' ); 

最后将您的用法替换为：

jquery需要单词Jquery而不是$

Answer 2

对于加载波纹管脚本和样式，在主题functions.php文件中添加波纹管代码。

用于前端使用的脚本

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

用于后端使用的脚本

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

只需将此代码也放在funtions.php文件或下面那些代码中。

 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() { ?> 
  
   

添加此代码后，您将在Admin Menu-> Settigns-> Date Picker上找到日期选择器 。

请参阅有关向WordPress主题或插件添加jQuery DatePicker的详细信息