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

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.

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

  • Still nothing. Not even an error – Juan Fuentes Dec 17 '15 at 10:02
  • 1
    jQuery(function () { } ); is equivalent to jQuery( document ).ready(function() { } ); – ville6000 Dec 17 '15 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">

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.