Add `datetimepicker` to form

by

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.

3 Answers
3

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/

Leave a Comment