22

私はjquery日付ピッカーを使用していますテキストボックスの近くのカレンダーアイコントリガー画像はデフォルトで一番上にありますテキストボックスの高さと同じ画像サイズ（高さ）を設定したい私のコードはいくつかの提案をしてください

$(#textbox1).datepicker({
    showOn: "button",
    buttonImage: "calendar_1.png",
    buttonImageOnly: true
)};
4

6 に答える 6

29

firebugで要素を調べると、次のようになりました。

<img class="ui-datepicker-trigger" src="http://xxxxx/officeprime/assets/img/calendar.gif" alt="..." title="..."/>

例えば： button.ui-datepicker-trigger img

その後、その CSS クラスを操作できui-datepicker-triggerます。

于 2012-04-20T04:41:33.327 に答える
28

ページにカスタム CSS を追加する

<style>
.ui-datepicker-trigger { position:relative;top:{}px ;right:{}px ; height:{}px }
 /* {} is the value according to your need */
</style>
于 2012-04-20T04:41:18.573 に答える
1

これはどれも私にとってはうまくいきませんでした。準備完了関数を終了するときに、jQuery がイメージ ボタンの高さプロパティを設定しているようです。したがって、ready 関数で height プロパティを設定しようとすると、26px に上書きされます。そこで、body タグの onload イベントで実行する別の関数を作成しました。ボタンの高さプロパティを次のように更新します。

// sample jQuery datepicker button tag: <img style="margin: 0px; padding: 2px; height: 26px; vertical-align: bottom;" class="ui-datepicker-trigger" >
var oDateCell = oTableRow.cells[2];
var sDateCellHTML = oDateCell.innerHTML;
var sRevisedHTML = sDateCellHTML.replace("height: 26px;", "height: 13px;");
oDateCell.innerHTML = sRevisedHTML;

これについてさらに作業を行ったところ、上記のコードにバグがあることがわかりました。クリック イベントが失敗し、画像をクリックしてもカレンダーが表示されません。理由はわかりませんが、うまくいくより良い方法を見つけました。上記の方法は、スタイルを変更するための不格好な (怠惰な?) 方法でした。正しい方法は次のようになります。

            var oTableRow = oTable.rows[iRow];
            if (oTableRow.cells.length > 2)
            {
                var oDateCell = oTableRow.cells[2];
                if (oDateCell.childNodes.length > 1)
                {
                    var oImage = oDateCell.childNodes[1];
                    oImage.style.height = "13px";
                }
            }
于 2012-12-26T21:33:53.737 に答える
1

この CSS を適用します。

.ui-datepicker-trigger {
   position: absolute;
}
于 2015-03-13T07:20:03.407 に答える
0

カレンダー アイコンに独自のパーソナライズされた画像を使用している場合は、必要なサイズの画像を簡単に作成できます。私の場合、入力ボックスの高さは24pxで、アイコンのサイズは でした16X16。画像のサイズを編集して作っただけで24X24問題は解決しました。

于 2012-06-03T11:40:43.513 に答える