2014-01-14 45 views
2

我必須爲jQuery UI Datepicker的標題欄添加額外的功能。最簡單的方法似乎是創建一個單獨的外部標題欄,並使用它來控制日期選擇器的月份步進功能與外部按鈕(同時隱藏原始標題欄)。通過外部按鈕瀏覽jQuery日期選擇器上的月份之間

目前我只能通過更改日期做到這一點,但我希望能夠進入下一一個月沒有實際改變日期,就像DatePicker的內置的一個月步進按鈕:

當前HTML:

<div id="datepicker"></div> 
<br/> 
<button id="prev">Previous Month</button>&nbsp; 
<button id="next">Next month</button> 

當前JS:

$('#datepicker').datepicker(); 

$('#next, #prev').on('click', function(e) { 
    var date = $('#datepicker').datepicker('getDate'); 
    e.target.id == 'next' ? date.setMonth(date.getMonth()+1) : date.setMonth(date.getMonth()-1); 
    $('#datepicker').datepicker('setDate', date); 
}); 

有沒有更好的方式來對外步驟月?

http://jsfiddle.net/KFbZy/1/

+0

是不是在日期選擇器的頂部的左/右箭頭的默認使用情況如何?你需要什麼? –

+0

是的,但我必須在頂部標題欄添加一些額外的功能。我必須使它能夠切換(顯示/隱藏)日曆部分。顯示完整日期,並在日曆部分關閉時使用右側/左側箭頭僅步行一天。然後當點擊日期時,我必須打開日曆部分。 – orszaczky

+0

關閉狀態: [image](http://i.imgur.com/kyMq86F.jpg)。打開狀態(正常日期選擇器功能): [image](http://i.imgur.com/uiehhxS.jpg)。 抱歉沒有弄清楚如何包含圖片url – orszaczky

回答

2

在日期選擇器在日期選擇器的頂部的左右箭頭可以讓你去到下一個先前一個月的標準用法。

但是,如果您想觸發下一個上一個月,您可以觸發標準按鈕上的點擊,因此行爲將與默認功能相同。

代碼:

$('#next, #prev').on('click', function(e) { 
    $('.ui-datepicker-'+e.target.id).trigger("click"); 
}); 

演示:http://jsfiddle.net/IrvinDominin/5Dcg3/

+0

非常好,謝謝,這正是我之後的事情! :) – orszaczky

+0

從來沒有想過要這樣解決它!多麼簡單:)再次感謝! – orszaczky

+0

@TheRebel歡迎:-) –

相關問題