Jquery ui Jquery UI日期选择器在Google地图信息窗口内不工作
当jQueryUIDatePicker放在GoogleMapInfoWindow中时,我遇到了一个问题 我们正在建立一个具有多个目的地的行程管理器。每个目的地都有到达和离开日期,每个目的地都有一个日期选择器。有两个地方可以设置这些日期,在页面底部的“行程”分区内和谷歌地图上的信息窗口内。日期选择器在第一代中工作正常,但日历不会显示在谷歌地图信息窗口中 使用以下两种方法动态创建和更新信息窗口:Jquery ui Jquery UI日期选择器在Google地图信息窗口内不工作,jquery-ui,google-maps-api-3,datepicker,coffeescript,jquery-ui-datepicker,Jquery Ui,Google Maps Api 3,Datepicker,Coffeescript,Jquery Ui Datepicker,当jQueryUIDatePicker放在GoogleMapInfoWindow中时,我遇到了一个问题 我们正在建立一个具有多个目的地的行程管理器。每个目的地都有到达和离开日期,每个目的地都有一个日期选择器。有两个地方可以设置这些日期,在页面底部的“行程”分区内和谷歌地图上的信息窗口内。日期选择器在第一代中工作正常,但日历不会显示在谷歌地图信息窗口中 使用以下两种方法动态创建和更新信息窗口: #opens the infowindow associated with destination
#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>
地点名称
添加日期
“日期选择器目标日期选择器目标到达日期选择器”,
:占位符=>'到达日期'%>
“日期选取器目的地日期选取器目的地出发日期选取器”,
:占位符=>'出发日期'%>
?
到
?
我们到目前为止的调查:
- 我们验证了每个datepicker输入都具有唯一的DOM ID
- “hasDatePicker”类被动态添加到正确的输入字段中
- 问题不是日期选择器隐藏在地图后面。我们知道这一点,因为chrome inspector说日期选择器的位置尚未设置
- 我们在信息窗口中添加了一个测试按钮,并尝试手动初始化日期选择器(例如,
),但这不起作用$(“#日期选择器id”).datepicker()
- 看起来所有其他类似线程中的问题都是在datepicker进入DOM之前初始化了datepicker,但是根据我上面的调查,我们认为情况并非如此
谢谢 在
\u generateInfowindowHTML()
中,必须返回iw[0]
而不是iw.html()
。当您返回html时,它只是一个字符串,您将丢失添加到元素及其子元素的所有功能