Add datepicker field to plugin settings page in Wordpress

Question

I'm developing a simple plugin (my first WP plugin development) and I'm trying to add a datepicker field in the plugin settings page using this code:

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

The code come from this post but I get this error:

Fatal error: Call to undefined function add_settings_field() in /var/www/html/arubaair/wp-content/plugins/frequent-traveler/frequent-traveler.php on line 41

And I don't know why. The plugin is installed and active and if I remove the code all works. What I'm doing wrong?

UPDATE

I change the original code to this one:

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

The file ft.js is on js plugin directory. Then in the page where I build the form I have this line:

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

And ft.js contains this code:

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

And it's not working, I check the page source and scripts aren't loaded, why?

Answer 1

As your code is not compilable, I'll post a working example based on the skeleton of your sample code. Required: PHP 5.3, see Lambda functions:

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

And ft.js with a small adjustment:

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