0

Nothing happens when I select the datepicker field.

This is the code for the field:

<input id="sticky_date" name="sticky_date" class="datepicker hasDatepicker" type="text">

The javascript

jQuery(function() {
  jQuery( '.datepicker' ).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: "-100:-10"
  });
});

The include code

add_action('admin_head', 'admin_datepicker');
function admin_datepicker() {
  wp_register_script(
    'pub-datepicker',
    get_template_directory_uri().'/js/datepicker.js',
    array( 'jquery-ui-core', 'jquery-ui-datepicker' ),
    false,
    true
  );
  wp_enqueue_script('pub-datepicker');
}

I'm not really sure if I'm missing something, there's no error on the js console, nothing happens

Improve this question
2

3 Answers 3

Reset to default
0

Use admin_enqueue_scripts action instead of admin_head. Then see network tab in dev tools that datepicker scripts are included.

You need the include the jQuery UI CSS also, it is not included in WP core.

Improve this answer
3
  • Added the CSS and changed from admin_head to admin_enqueue_scripts, all files are shown as 200 OK in network tab Commented Dec 17, 2015 at 7:38
  • What happens when you run jQuery( '.datepicker' ).datepicker(); in a console? Check that your form input is in that page Commented Dec 17, 2015 at 11:45
  • This was printed: Object { 0: <input#pub_sticky_date.datepicker.hasDatepicker>, length: 1, prevObject: Object, context: HTMLDocument → admin.php, selector: ".datepicker" } Commented Dec 17, 2015 at 18:35
0

If my guess is correct, you might have included and its execured before the element(.datepicker) is present. Please use jQuery( document ).ready(function() function 

jQuery( document ).ready(function() {
  jQuery( '.datepicker' ).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: "-100:-10"
  });
});

Try the above and let us know if you see any error in console.

Improve this answer
2
  • Still nothing. Not even an error Commented Dec 17, 2015 at 10:02
  • 1
    jQuery(function () { } ); is equivalent to jQuery( document ).ready(function() { } ); Commented Dec 17, 2015 at 11:35
0

I found the problem. My input field was declared like this:

<input id="sticky_date" name="sticky_date" class="datepicker hasDatepicker" type="text">

It turns out that the hasDatepicker is assigned by the js when the date picker popup is shown, so when I clicked it nothing happened because it basically "thought" that the popup had been shown already. I simply changed it to:

<input id="sticky_date" name="sticky_date" class="datepicker" type="text">

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.