JQuery的UI日期選擇器的選擇月/年的下拉在iPad不工作，如果日期選擇器是jQuery的對話框

我創建了一個jQuery UI的日期選擇器這樣的：JQuery的UI日期選擇器的選擇月/年的下拉在iPad不工作，如果日期選擇器是jQuery的對話框

$.datepicker.setDefaults({ 
      changeMonth: true, 
      changeYear: true, 
      defaultDate: null, 
      dateFormat: dateTimeFormat, 
      showOn: 'both', 
      buttonImageOnly: true, 
      buttonImage: urlPath + 'Content/styles/images/calendar.gif', 
      buttonText: 'Calendar' 
     }); 

    $('input.datetime', controlContext).datepicker({ 
     onSelect: function (dateText, inst) { 
      $(inst, controlContext).val(dateText); 
      var dateSelected = $(inst, controlContext).datepicker("getDate"); 
     }, 
     beforeShow: function (input, inst) { 
      $('.hasDatepicker').blur(); 
     } 
    });

它適用於所有的主流瀏覽器。它也適用於Ipad，只有當它不在jQuery對話框中。在jQuery對話框中，如果我使用datepicker來選擇日期，那麼它工作正常。只有選擇某個月份或日期的下拉菜單根本不起作用。我可以看到下拉選項，甚至可以點擊任何選項，但是在選擇任何選項後它並沒有隱藏選項列表，它只是停留在那裏。

經過大量調試後，我發現onchange事件在選擇任何一個月或一年時應該觸發。

如果日期選擇器不在jQuery對話框中，要重複甚至選擇月/年在iPad上正常工作。

不確定發生了什麼問題。

來源

2011-09-02 Bipul

您可以發佈更相關的代碼嗎？下拉和onchange？你可以把他們放在jsfiddle嗎？ –

你使用最新的JQuery UI嗎？對話框模式？ –

這是對我工作的罰款：http://jsbin.com/onuhos

來源

2012-02-02 13:17:48

有一個bug報告：http://bugs.jqueryui.com/ticket/8989（它被標記爲固定的，而討論表明它沒有正確固定）。

我在使用Firefox/Mac上的jQuery-UI日期選取器時遇到Bootstrap模態的問題。

來源

2013-09-03 09:43:59

我也有這個問題。 – uesports135

它似乎是與在彈出窗口之外創建的ui-datepicker-div相關的東西。我在使用twitter bootstrap模式時遇到同樣的問題。我能夠通過使用以下幾點解決它：

$('#ui-datepicker-div').ready(function() { 
    var popup = document.getElementById('**ID OF YOUR POPUP**'); 
    var datePicker = document.getElementById('ui-datepicker-div'); 
    popup.appendChild(datePicker); 
});

希望幫助！

來源

2013-09-04 19:27:24 JadedCore

謝謝，解決了這個問題。現在日期選擇器的節奏不正確，但至少它工作正常！ –

確實如此，這解決了主要問題。有關如何解決由解決方案引起的位置偏移的任何線索？ – mabian69

@ mabian69你能給我一個你看到的和一個代碼示例的屏幕截圖嗎？ – JadedCore

-1

對我來說，解決方案是簡單地增加dataPicker所有者元素的z-index的，在$('input.datetime', controlContext)

來源

2015-01-14 13:52:23 rebpp

我遇到此問題與Twitter的引導模式工作，而你的情況下，增加的z-index;就像JadedCore，他回答如上。我相當肯定他假設日期選擇器是在彈出窗口之外創建的（在我的情況下是模式）是造成問題的原因。

我已經在幾種模式中使用這個datepicker，並想要'修復'所有位置的東西。我拿JadedCore的答案進行了修改，使其對多模態更具普遍性;當模式關閉時，我還會將日期選擇器移回到主體。如果同時顯示多個模態，我會預見這個例子的問題，所以要小心。

$(function() { 
    $('.modal').on('show.bs.modal', function (e) { 
     var datePicker = document.getElementById('ui-datepicker-div'); 
     if (datePicker) { 
      e.delegateTarget.appendChild(datePicker); 
     } 
    }); 

    $('.modal').on('hide.bs.modal', function (e) {  
     var datePicker = document.getElementById('ui-datepicker-div'); 
     if (datePicker) { 
      $("body").append(datePicker); 
     } 
    }); 
});

來源

2015-10-20 18:17:16 tylerwal

這對我來說非常合適。 –

JQuery的UI日期選擇器的選擇月/年的下拉在iPad不工作，如果日期選擇器是jQuery的對話框

回答

相關問題