Question

Jquery ui datepicker正在地图之外工作但在地图中jquery ui datepicker无效。

任何想法可能出错？

代码：

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
    });

我可以保存地图中的所有表单信息。但是，日期选择器在地图中不起作用。

我正在使用的事件监听器：

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);
    });
});

有人有任何想法吗？

图片：http://postimg.org/image/oe40y960z/

Answer 1

使用domready的{{1}} - 事件来创建日期选择器。

在infowindow - 事件之前，表尚未注入到文档中，jQuery可能无法访问domready。

另一个选择：在设置内容之前直接应用datepicker：

#datepicker

注意：当地图覆盖UI时，设置zIndex：

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

Answer 2

您必须在domready中传递datepicker

以下是代码

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

Jquery日期选择器无法使用Google Map InfoWindow

2 个答案: