4

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.

2
  • 1
    This problem is already solved here is the link stackoverflow.com/questions/36207203/…
    – DHL17
    Aug 11 '17 at 11:19
  • did you added jquery-ui.js file? i think you are missing it. just add it after your jquery library , i hope that will work.
    – Balwant
    Mar 12 '18 at 18:05
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/

0

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.

3
  • No Luck, I have tried: phptechnologytutorials.wordpress.com/2014/04/01/…. This still doesn't work but also doesn't give me an error! Oct 21 '15 at 9:21
  • Maybe your theme does not execute the wp_footer() or wp_head() action. Oct 21 '15 at 9:34
  • It's a custom theme. The header.php executes wp_head(). Could it be that because the wp_head() allready does the enquement of the jquery it fails? I'll try! -> nope! Oct 21 '15 at 9:35
0

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.