2014-01-27 52 views
0

我已經看到一些關於datepicker的帖子,但這些問題都不能給我答案。用HTML/CSS圖像顯示jquery datepicker

這筆交易,我已經使用從jQuery的的日期選擇器功能(部件),它是:

$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "/debasis/hoofdstuk03/img/calendar.png", 
     buttonText: "Open de kalender", 
     buttonImageOnly: true, 
     inline: true, 
     showOtherMonths: true, 
     dayNamesMin: ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za','Zo'], 
     monthNames: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 
      'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'], 

    }); 
    }); 

連同它的HTML是:

<input type="hidden" id="datepicker"> 

正如你可以看到我有使用按鈕圖像顯示圖像並在點擊圖像時顯示日曆。雖然這個問題是我想對我的圖像進行樣式設置(目前它很大),我也不知道,因爲我在Jquery中是個不錯的選擇,所以如何正確地做到這一點。我可以例如風格的圖像沒有CSS,只是在功能本身?我已經閱讀了關於.height和.width的一些信息,但我不知道如何包含它,以便它能正常工作。我也嘗試過用html和設置src和id來做到這一點,所以我可以用css/html來設計它,然後我嘗試將該功能更改爲「點擊」功能(id)。但這不會做任何事情(該功能沒有工作),這可能是因爲我只是以怪異/不可能的方式插入代碼(因爲我是jquery nooby)。

所以任何人都可以點我朝着正確的方向:)

THX的幫助提前!

+0

爲什麼你使用隱藏的輸入? – j08691

回答

0

的jQuery UI的日期選擇器控件將會把你輸入後直接選擇圖像,這樣就可以通過CSS使用adjacent sibling selector+)選擇:

#datepicker + img { 
    width: 16px; 
    height: 16px; 
} 

jsFiddle example

+0

啊,謝謝你們兩位!這將會訣竅! – Nicolas

0

您可以使用CSS設計圖像的樣式。目標與元素:

#datepicker img { 

    width: 32px; 
    height: 32px; 

} 

jQuery的也將指定一個類的圖像ui-datepicker-trigger,你可以用它來針對與CSS的圖像。

+0

忘了'+'加號,看看其他答案。 – luke2012