JQuery Datepicker not showing on clean WP install

  • Aurovrata Venet

    (@aurovrata)


    8 years, 7 months ago

    Hello

    I got a strange error trying to get the jquery datepicker to work using the WordPress built-in jquery libraries.

    Initially I was trying this on a mature site (running the lastest WP) which has a certain number of plugins and could not get it to work. Reading around on various forums about the countless ways the datepicker can fail due to jquery conflicts, I decided to get it to work on a fresh install of WP 4.3 with no plugins and twentyfifteeen theme running. No luck!

    Here is the code I am running, I am loading the jquery libraries from WP in the functions.php file,

    add_action( 'wp_enqueue_scripts' , 'my_scripts' , 999 );
function my_scripts() {
    wp_enqueue_script('jquery');
	wp_enqueue_script('jquery-ui-core');
	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');
}

    Then I set up my input field and fire the datepicker function on document load,

    <p> Date <input type="text" class="hasDatepicker"> </p>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.hasDatepicker').datepicker({
      dateFormat : 'yyyy-mm-dd'
    });
  });
</script>

    When the page loads, no error on the js console, but a datepicker div element is correctly inserted into the page.

    <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>

    However this is empty. If I run the same code with a static html page, the above <div> get populated with various other elements which show up the calendar as expected.

    Anyone come across this issue and found a solution?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 7 months ago

    You need to link us the page with the issue

    Thread Starter Aurovrata Venet

    (@aurovrata)

    8 years, 7 months ago

    Dear Andrew, thank you for the reply.

    Here is the initial site I was trying to get it to work on…

    beta2.martinhal.com

    the Check-In / Check-out field in the top right corner of the page have datepicker enabled which don’t show up.

    The clean install is on a localhost install.

    I am still running a few more test and will report back my progress.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 7 months ago

    Oh, actually it’s just because you’re already defining a class of ‘hasDatePicker’, so the datePicker library never actually initiates.

    Thread Starter Aurovrata Venet

    (@aurovrata)

    8 years, 7 months ago

    Hi Andrew. I found that out through trial and error, but it cost me a good deal of time.

    Is this a bug or expected functionality of Datepicker?

    In fact I found that any input element with a class definition will not initiate with datepicker. I find that strange given that some examples of datepicker functionality suggest that several fields can be instantiated with a jquery call to the their class,
    $('.hasDatepicker').datepicker();

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 7 months ago

    I didn’t see examples where jQuery call their class – where did you find that class? It’s a class that is supposed to be generated by the jQuery DatePicker library, it’s not meant to be added onto the HTML.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 7 months ago

    It’s not a bug, it’s intentional. See the “connectDatePicker” method in the jQuery UI library. It says, if that class exists on the element that you’re calling the DatePicker method on, then it will exit.

    ...
/* Class name added to elements to indicate already configured with a date picker. */
markerClassName: "hasDatepicker",

_connectDatepicker: function(target, inst) {
    ...
    if (input.hasClass(this.markerClassName)) {
	return;
    }
...
    Thread Starter Aurovrata Venet

    (@aurovrata)

    8 years, 7 months ago

    Hi Andrew, thank you for the enlightenment….I shall sleep a wee bit more knowledgeable tonight 🙂

    Here is a WP thread talking about using the class selector to initialise the datepicker on a group of fields.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘JQuery Datepicker not showing on clean WP install’ is closed to new replies.

Tags