4

次のような jQuery UI 日付ピッカーを作成しました。

 $.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();
        }
    });

すべての主要なブラウザで動作します。jQueryダイアログでない場合にのみ、Ipadでも正常に動作します。jQueryダイアログでも、日付を選択するためにdatepickerを使用すると、正常に機能します。月または日付を選択するためのドロップダウンのみがまったく機能していません。ドロップダウン オプションが表示され、任意のオプションをクリックすることもできますが、オプションを選択した後にオプション リストが非表示になることはなく、そこにとどまります。

onchange多くのデバッグの後、月または年を選択したときに発生するはずのイベントが発生していないことがわかりました。

日付ピッカーがjQueryダイアログにない場合、月/年の選択でもiPadで正常に機能します。

何が問題なのかわからない。

4

5 に答える 5

4

ポップアップの外で作成されている ui-datepicker-div に関連しているようです。Twitterのブートストラップモーダルを使用しているときに同じ問題が発生していました。以下を使用して回避できました。

$('#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-04T19:27:24.497 に答える
3

報告されたバグがあります: http://bugs.jqueryui.com/ticket/8989 (修正済みとしてマークされていますが、適切に修正されていないことが議論で示唆されています)。

Firefox/Mac の jQuery-UI 日付ピッカーを使用した Bootstrap Modal で問題が発生しています。

于 2013-09-03T09:43:59.130 に答える
2

twitter-bootstrap モーダルで作業しているときに、この問題が発生していました。上で答えた JadedCore のように。ポップアップ（私の場合はモーダル）の外で作成された日付ピッカーが問題の原因であるという彼の仮定はかなり確信しています。

私はこの日付ピッカーをいくつかのモーダルで使用しましたが、すべての場所を「修正」する何かが必要でした。私は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-20T18:17:16.113 に答える
1

これは私にとってはうまくいっています：http://jsbin.com/onuhos

于 2012-02-02T13:17:48.517 に答える