如何設置jquery的大小和位置日期選擇器日曆圖標觸發器圖像

我正在使用jquery日期選擇器日曆圖標觸發圖像附近的文本框默認情況下是在上面我想設置圖像大小（高度）相同的文本框高度，請給我一些建議我的代碼是如何設置jquery的大小和位置日期選擇器日曆圖標觸發器圖像

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

來源

2012-04-20 UMAIR ALI

例如http://jqueryui.com/demos/datepicker/#icon-trigger – 2012-04-20 04:32:44

尋找jQueryUI的產生是什麼，使用螢火蟲，看看他們正在使用什麼類，與你可以給一些css觸摸 – Gerep 2012-04-20 04:38:55

Thnaks Gerep的幫助 – 2012-04-20 04:47:42

與firebug檢查的元素，我得到這個：

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

然後，您可以使用該CSS類ui-datepicker-trigger。

來源

2012-04-20 04:41:33 Gerep

感謝Gerep的幫助 – 2012-04-20 04:48:16

添加自定義CSS在網頁

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

來源

2012-04-20 04:41:18 diEcho

感謝diEcho的幫助 – 2012-04-20 04:46:12

這對我有效：'.ui-datepicker-trigger {position：relative; top：7px;' – 2015-05-27 12:11:14

感謝您提供屬性答案... – 2017-04-04 11:28:00

如果您將自己的個性化圖片用於日曆圖標，那麼您可以簡單地製作所需大小的圖片。對於我的情況，我的輸入框的高度爲24px，圖標大小爲16X16。我剛剛編輯了圖像的大小，並將其製作成24X24，問題解決了。

來源

2012-06-03 11:40:43

這一切都爲我工作。看起來jQuery在離開ready函數時設置了圖像按鈕的高度屬性。因此，如果您嘗試在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-26 21:33:53

您可以使用jQuery編輯類的.ui-日期選擇觸發，但日期選擇器功能後，使編輯是很重要的。

例子：

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

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

來源

2013-05-26 10:45:42

這太好了。你讓它變得如此簡單，親愛的朋友;）。我讚賞（y） – NullPointer 2014-01-17 09:34:59

應用此CSS：

.ui-datepicker-trigger { 
    position: absolute; 
}

來源

2015-03-13 07:20:03

如何設置jquery的大小和位置日期選擇器日曆圖標觸發器圖像

回答

相關問題