3

日付ピッカーを新しいdivに配置する必要があります。これは（shadow-）border-divになります。

私は次のことを試しました：

beforeShow: function (input) {
  $(input).datepicker("widget")
   .find(".ui-datepicker-header, ui-datepicker-calendar")
   .wrapAll("<div class='datepickerBorder'/>");
}

しかし、それは機能しません。

さらに、ピッカー全体をラップしようとしましたが、border-divの位置やサイズなどが同じではありません。

4

2 に答える 2

5

デートピッカーコントロールは絶対に配置されています。要素内でラップすると、その要素内に日付ピッカーは含まれません。折り返し要素はページの下部に配置され、日付ピッカーはコントロールの横に表示されます。

解決策1：クラスをdatepickerウィジェット自体に追加できます。

$("#datepicker2").datepicker({
    beforeShow: function() {
        $(this).datepicker("widget").addClass("datepickerBorder");
    },
    onClose: function() {
        $(this).datepicker("widget").removeClass("datepickerBorder");
    }
});

デモ

解決策2：DOMの読み込み時に絶対位置+非表示のラッピングdivを作成し、表示されたときに日付ピッカーの後ろにdivを再配置+サイズ変更します。beforeShow落とし穴があります。関数内のウィジェットのオフセット（レンダリングされる座標）を確認することはできません。

于 2012-05-30T09:19:48.583 に答える
3 
$('#datepicker').wrap('<div class="datepickerBorder"/>');

#datepickerこれがdatepickerid入力フィールドです。何か他のものがあるかもしれません。

jQuery .wrap（）を確認してください。

内でこれを行う必要はありませんbeforeShow()。DOM対応機能内で実行してください。

あなたの各内側の要素をラップするには、datepicker試してみてください

$('div#ui-datepicker-div > *').wrap('<div class='datepickerBorder'/>');
于 2012-05-30T08:49:31.467 に答える