Add `datetimepicker` to form

Question

I have a form where i would like to add a datetimepicker(). I must be doing something wrong.

I have done the following: In my header.php

<?php wp_enqueue_script("jquery"); ?>

In my functions.php

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

In my template.php

<form id="" name="" action="<?php echo get_permalink(); ?>" method="post">
    <input type="text" id="MyDate" name="MyDate" value=""/>
    <input type="submit" value="Submit" name="submit">
</form>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#MyDate').datepicker({
            dateFormat : 'dd-mm-yy'
        });
    });
</script> 

Here is the error:

Uncaught TypeError: jQuery(...).datepicker is not a function

I see the <input> element but if I click in it nothing happens.
This all comes from the following link

Hope anyone sees my mistake(s)!
M.

Answer 1

You can try this.

add_action( 'wp_enqueue_scripts', 'wpcustom_enqueue_script' );
function wpcustom_enqueue_script() {
    wp_enqueue_style( 'datepicker-style', 'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' );
    wp_enqueue_script( 'js-datepicker', 'https://code.jquery.com/ui/1.12.1/jquery-ui.js', array('jquery'), null, true); 
}

Readmore: http://jqueryui.com/datepicker/

Answer 2

I guess, the scripts are loaded in the footer action while your script is loaded before.

So, what I would try: Add your scripts via th proper action: wp_enqueue_scripts

function wpse_206140_enqueue_script() {
    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( 'wp_enqueue_scripts', 'wpse_206140_enqueue_script' );

If you still run into the problem: Consider to external your script into a file and enqueue this file in dependency of jquery-ui-datepicker, see here.

Also: Check wp_head() and wp_footer() Another possible reason could be, your theme does not execute the wp_head and wp_footer actions. Check your header.php and footer.php for wp_header() and wp_footer(). These functions need to be placed there.

Hope, this helps.

Answer 3

Try using the wp_print_footer_scripts action (front-end) or admin_print_footer_scripts action (back-end) with a large priority to ensure your javascript gets executed as late as possible, eg

add_action( 'wp_print_footer_scripts', function () {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#MyDate').datepicker({
            dateFormat : 'dd-mm-yy'
        });
    });
    </script>
    <?php
}, 50 );

(cf https://wordpress.stackexchange.com/a/175855/57034)