web-dev-qa-db-ja.com

jqueryの日付ピッカーのカレンダーアイコンのトリガー画像のサイズと位置を設定する方法

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

$(#textbox1).datepicker({
    showOn: "button",
    buttonImage: "calendar_1.png",
    buttonImageOnly: true
)};
jqueryjquery-uijquery-plugins
22
UMAIR ALI

firebug で要素を検査すると、これが得られました：

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

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

29
Gerep

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

<style>
.ui-datepicker-trigger { position:relative;top:{}px ;right:{}px ; height:{}px }
 /* {} is the value according to your need */
</style>
28
diEcho

クラス.ui-datepicker-triggerはjQueryで編集できますが、datepicker関数の後に編集することが重要です。

例：

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

$(".ui-datepicker-trigger").css("margin-bottom","-6px");
11
Adnan Mulalic

これはどれも私にとってはうまくいきませんでした。 jQueryは、ready関数を終了するときに画像ボタンのheightプロパティを設定するようです。そのため、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";
                }
            }
1
Dallas Steve

このCSSを適用します。

.ui-datepicker-trigger {
   position: absolute;
}
0
Ronak Patel

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

0
Bodhisatwa Ghosh