Agregue el campo selector de fecha a la página de configuración del complemento en WordPress

3 minutos de lectura

Avatar de usuario de ReynierPM
ReynierPM

Estoy desarrollando un complemento simple (mi primer desarrollo de complemento WP) y estoy tratando de agregar un datepicker campo en la página de configuración del complemento usando este código:

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

El código viene de esto correo pero me sale este error:

Error fatal: llamada a la función no definida add_settings_field() en /var/www/html/arubaair/wp-content/plugins/frequent-traveler/frequent-traveler.php en la línea 41

Y no sé por qué. El complemento está instalado y activo y si elimino el código, todo funciona. ¿Qué estoy haciendo mal?

ACTUALIZAR

Cambio el código original por este:

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

El archivo ft.js Está encendido js directorio de complementos. Luego, en la página donde construyo el formulario, tengo esta línea:

<input type="date" id="frequent_traveler_from_date" name="frequent_traveler_from_date" value="" class="datepicker" />

Y ft.js contiene este código:

jQuery(document).ready(function() {
    jQuery('.datepicker').datepicker();
});

Y no funciona, compruebo la fuente de la página y los scripts no están cargados, ¿por qué?

avatar de usuario de brasofilo
brasofilo

Como su código no es compilable, publicaré un ejemplo de trabajo basado en el esqueleto de su código de muestra. Requerido: PHP 5.3, consulte Funciones de 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');
    });
});  

Y ft.js con un pequeño ajuste:

jQuery(document).ready(function($) {
    $('.datepicker').datepicker();
});

Para cargar el script y el estilo de fuelle, agregue el código de fuelle en el tema funciones.php archivo.

Script para uso front-end

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

Script para uso de back-end

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

Solo pon este código también funciones.php archivo o debajo de esos códigos.

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

Tendrás un selector de fechas en Admin Menú->Configuración->Selector de fecha. Ver más detalles Agregue un jQuery DatePicker al tema o complemento de WordPress.

¿Ha sido útil esta solución?