在Wordpress中向插件设置页中添加datepicker字段
我正在开发一个简单的插件(我的第一个WP插件开发)，并试图使用以下代码在插件设置页面中添加一个datepicker字段：
add_settings_field('example_date_picker', 'Example Date Picker', 'pu_display_date_picker', 'ft_admin.php', '', array());
add_action('admin_enqueue_scripts', 'enqueue_date_picker');
function pu_display_date_picker($args)
{
extract($args);
echo '<input type="date" id="datepicker" name="example[datepicker]" value="" class="example-datepicker" />';
}
/**
* Enqueue the date picker
*/
function enqueue_date_picker()
{
wp_enqueue_script(
'field-date-js', 'ft.js', array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'), time(), true
);
wp_enqueue_style('jquery-ui-datepicker');
}代码来自这个帖子，但是我得到了这个错误：
致命错误:在第41行调用/var/www/html/arubaair/wp-content/plugins/frequent-traveler/frequent-traveler.php中的未定义函数add_settings_field()
我也不知道为什么。插件已安装并处于活动状态，如果我删除代码，所有插件都可以工作。我做错什么了？
更新
我将原始代码更改为：
add_action('admin_enqueue_scripts', 'enqueue_date_picker');
function enqueue_date_picker()
{
wp_enqueue_script(
'field-date-js', 'ft.js', array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'), time(), true
);
wp_enqueue_style('jquery-ui-datepicker');
}ft.js文件位于js插件目录中。然后，在我构建表单的页面中，我有以下一行：
<input type="date" id="frequent_traveler_from_date" name="frequent_traveler_from_date" value="" class="datepicker" />ft.js包含以下代码：
jQuery(document).ready(function() {
jQuery('.datepicker').datepicker();
});而且它不起作用，我检查页面源代码和脚本没有加载，为什么？
回答 2
Stack Overflow用户
发布于 2014-06-11 20:28:06
由于您的代码不可编译，我将根据示例代码的框架发布一个工作示例。必需:PHP5.3，请参阅Lambda函数
add_action( 'admin_menu', function()
{
$hook = add_menu_page(
'Date Pick',
'Date Pick',
'manage_options',
'sub-page-date-picker',
function() {
echo '<h1>Date Pick</h1>';
echo '<input type="date" id="datepicker" name="example[datepicker]" value="" class="example-datepicker" />';
}
);
# echo $hook; die(); // get the correct hook slug
add_action( 'admin_enqueue_scripts', function( $hook )
{
if( 'toplevel_page_sub-page-date-picker' !== $hook )
return;
wp_enqueue_script(
'field-date-js',
plugins_url( '/ft.js', __FILE__ ),
array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'),
time(),
true
);
wp_enqueue_style('jquery-ui-datepicker');
});
}); 和ft.js进行了小小的调整：
jQuery(document).ready(function($) {
$('.datepicker').datepicker();
});Stack Overflow用户
发布于 2016-04-18 06:40:43
为了加载波纹管脚本和样式，在主题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() { ?>
<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');
?>您将在Admin 菜单上有一个日期选择器->Settigns-> date Picker。请参阅更多细节将jQuery DatePicker添加到WordPress主题或插件。
https://stackoverflow.com/questions/24003896
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号