Jquery UI日期選擇器不能在Google Map Infowindow中工作

當我將jQuery UI Datepicker置於Google Map Infowindow中時，我遇到了問題。Jquery UI日期選擇器不能在Google Map Infowindow中工作

我們正在建立一個有多個目的地的行程管理器。每個目的地都有一個到達和離開日期，每個日期都有一個日期選擇器。有兩個地方可以設置這些日期，位於頁面底部的'itinerary'div內，並位於Google Map上的InfoWindow內部。 datepickers在intinerary中工作正常，但日曆不會顯示在Google Map infowindow內部。

的信息窗口中創建和使用以下兩種方法動態更新：

#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'類動態添加到正確的輸入字段
問題不在於datepicker隱藏在地圖後面。我們知道這是因爲鉻檢查員說，日期選擇器的位置還沒有確定
我們增加了一個測試按鈕信息窗口內，並試圖手動初始化日期選擇器（例如$('#datepicker-id').datepicker()），但這並沒有工作。
它看起來像所有其他類似的線程問題是，日期選擇是有史以來在DOM前的日期選擇器被初始化，但根據我上面的調查，我們不認爲這是對我們的情況。

類似主題：

謝謝！

來源

2015-12-28 CHawk

在_generateInfowindowHTML()您必須返回iw[0]而不是iw.html()。當您返回它只是一個字符串的HTML，你將失去所有已添加到元素的功能和它的孩子。

來源

2015-12-28 11:29:09

Jquery UI日期選擇器不能在Google Map Infowindow中工作

回答

相關問題