Jquery UI 日期选择器无法在内部工作 Google 地图信息窗口

Question

当 jQuery UI 日期选择器放置在 Google 地图信息窗口中时，我遇到了问题。

我们正在构建一个包含多个目的地的行程管理器。每个目的地都有一个到达和离开日期，每个都有一个日期选择器。您可以在两个地方设置这些日期，页面底部的 'itinerary' div 内和 Google 地图上的信息窗口内。日期选择器在行程中工作正常，但日历不显示在 Google 地图信息窗口中。

信息窗口是使用以下两种方法动态创建和更新的：

  #opens the infowindow associated with destination
  openInfowindow: (destination, map) =>
    info_content = @_generateInfowindowHTML(destination)

    if not @infowindow #infowindow not defined
      @infowindow = new google.maps.InfoWindow
        content: info_content
    else #infowindow already created
      @infowindow.setContent(info_content)

    @infowindow.open(map, destination.marker)

  #produces the HTML content for the infowindow association with destination
  _generateInfowindowHTML: (destination) =>
    iw = $('#infowindow-template').clone(true).removeClass('hidden').removeAttr('id')
    iw.find('h5').text(destination.formatted_address) #infowindow header, formatted address
    iw.find('.infowindow-content').attr('data-destination-uid', destination.uid)
    iw.find('.infowindow-content').attr('id', 'infowindow-uid-' + destination.uid)

    #Setting date pickers for destinations
    #NOTE: All datepickers need unique ids
    iw.find('.destination-arrival-date-picker').attr('id', 'infowindow-destination-arrival-datepicker-uid-' + destination.uid)
    iw.find('.destination-arrival-date-picker').datepicker
      autosize: true
      dateFormat: "M d, yy"
      onSelect: (date, input) ->
        console.log 'selected arrival date!'

    iw.find('.destination-departure-date-picker').attr('id', 'infowindow-destination-departure-datepicker-uid-' + destination.uid)
    iw.find('.destination-departure-date-picker').datepicker
      autosize: true
      dateFormat: "M d, yy"
      onSelect: (date, input) ->
        console.log 'selected departure!'


    return  iw.html()

有问题的HTML：

<!-- Info window template -->
<div id="infowindow-template" class="hidden">
  <div class="infowindow-content" data-destination-uid="">
    <h5>Location Name</h5>
    <div class="block info-date-container link-text">
      <div class="add-destination-date">
        <i class="fa fa-calendar-plus-o"></i> <span>Add Dates</span>
      </div>
      <div class="edit-destination-date-div hidden inline-block">
        <i class="fa fa-calendar-plus-o fa-fw in-form-icon"></i>
        <%= text_field_tag '', nil, :class => 'date-picker destination-date-picker destination-arrival-date-picker',
                            :placeholder => 'Arrival Date' %>

        <i class="fa fa-calendar-plus-o fa-fw in-form-icon"></i>
        <%= text_field_tag '', nil, :class => 'date-picker destination-date-picker destination-departure-date-picker',
                            :placeholder => 'Departure Date' %>
        <i class="fa fa-check confirm-destination-dates icon--confirm"
             data-toggle="tooltip" data-placement="right" title="Confirm Dates"></i>
      </div>
      <div class="destination-date-wrapper hidden inline-block">
        <span class="destination-arrival-date"> ? </span>
        <span> to </span>
        <span class="destination-departure-date"> ? </span>
        <i class="fa fa-pencil edit-destination-date" data-toggle="tooltip" data-placement="below" title="Change Dates"></i>
      </div>
    </div> <!-- End Info Date Container -->
  </div>
</div>

我们目前的调查：

我们验证了每个日期选择器输入都有一个唯一的 DOM ID
'hasDatePicker' class 动态添加到正确的输入字段
问题不在于日期选择器隐藏在地图后面。我们知道这一点是因为 chrome 检查员说日期选择器的位置尚未设置
我们在信息窗口中添加了一个测试按钮，并尝试手动初始化日期选择器（例如 $('#datepicker-id').datepicker()），但这没有用。
看起来所有其他类似线程中的问题是日期选择器在日期选择器出现在 DOM 之前被初始化，但根据我的上述调查，我们认为情况并非如此对我们来说。

类似话题：

Jquery date picker not working with Google Map InfoWindow
https://forum.jquery.com/topic/datepicker-not-seem-to-work-inside-infowindow-from-a-google-map-v3-marker

谢谢！

Answer 1

在 _generateInfowindowHTML() 中，您必须 return iw[0] 而不是 iw.html() 。当您 return html 它只是一个字符串时，您将失去所有已添加到该元素及其子元素的功能。

Jquery UI 日期选择器无法在内部工作 Google 地图信息窗口

Jquery UI Datepicker Not Working Inside Google Map Infowindow

jquery-ui

google-maps-api-3

datepicker

coffeescript

jquery-ui-datepicker