1
У меня проблема с jQuery UI Datepicker, когда он помещен внутри Infowindow.JQuery UI Datepicker Не работает внутри Google Map Infowindow
Мы строим диспетчер маршрутов с несколькими пунктами назначения. Каждый пункт назначения имеет дату прибытия и вылета, в каждом из которых есть датпикер. Есть два места, где вы можете установить эти даты, внутри «маршрута» в нижней части страницы и внутри InfoWindow на карте Google. Датпикеры отлично работают в инсталляции, но календари не отображаются внутри информационного окна Google Map.
В Infowindows создаются и обновляются динамически, используя два метода ниже:
#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
- Класс 'hasDatePicker' динамически добавляется в правильное поле ввода
- Проблема не в том, что датапикер скрыт за картой. Мы знаем это, потому что хромовый инспектор говорит, что положение даты не было установлено.
- Мы добавили тестовую кнопку внутри информационного окна и попытались вручную инициализировать datepicker (например,
$('#datepicker-id').datepicker()), но это не сработало. - Похоже, проблема во всех других подобных потоках заключалась в том, что датапикер инициализировался до того, как 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
Спасибо!