Jquery date picker not working with Google Map InfoWindow

问题

Jquery ui datepicker is working outside the map but in the map the jquery ui datepicker not working.

Any Idea what could be wrong?

Code:

var html = "<table width='250px' height='300px'>" +
                 "...." +
                 "<tr><td>Url:...." +
                 "<tr><td>Date:</td> <td><input type='text' id='datepicker'/> </td> </tr>" +               
                 "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr></table>";

    infowindow = new google.maps.InfoWindow({
     content: html
    });

I can save all the form information from the map. But the datepicker is not working inside the map.

And the event listener i am using:

google.maps.event.addListener(map, "click", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    }); 
    google.maps.event.addListener(marker, "click", function() {
        $( "#datepicker" ).datepicker();
      infowindow.open(map, marker);
    });
});

Anyone have any idea?

image: http://postimg.org/image/oe40y960z/

回答1:

use the domready-event of the infowindow to create the datepicker.

Before the domready-event the table hasn't been injected into the document and #datepicker may not be accessed by jQuery.

Another option: apply the datepicker directly before you set the content:

infowindow = new google.maps.InfoWindow({
 content: $(html).find('#datepicker').datepicker().end()[0]
});

Note: when the UI will be covered by the map set the zIndex:

#ui-datepicker-div{z-index:1000 !important}

回答2:

You have to pass datepicker in domready

Below is the code

 infowindow.addListener('domready', function() {
        $('.datepicker').fdatepicker({
            pickTime: true,
        });
    });

来源：https://stackoverflow.com/questions/21661703/jquery-date-picker-not-working-with-google-map-infowindow

标签

google-maps

jquery-ui-datepicker