自定義按鈕dissapearing從JQuery的日期選擇器

Question

我添加了兩個按鈕，一個jQuery UI日期選擇以下大致是這樣的建議： jQuery datepicker adding custom button

我已經基本上要添加兩個按鈕或雙箭頭的頭幾年間改變（是的，我知道有一個changeYear屬性，但我真的需要這些箭頭）。我的代碼是在這裏：

jsfiddle

var dates = $("#fromDate").datepicker({ 
changeYear: true, 
beforeShow: function(input) { 
    setTimeout(function() { 
     var widgetHeader = $(input).datepicker("widget").find(".ui-datepicker-header"); 
     var prevYrBtn = $('<button title="PrevYr">&lt;&lt; Prev Year</button>'); 
     prevYrBtn.unbind("click").bind("click", function() { 
      $.datepicker._adjustDate($(input), -1, 'Y'); 

     }); 
     var nextYrBtn = $('<button title="NextYr">Next year &gt;&gt;</button>'); 
     nextYrBtn.unbind("click").bind("click", function() { 
      $.datepicker._adjustDate($(input), +1, 'Y'); 

     }); 
     prevYrBtn.appendTo(widgetHeader); 
     nextYrBtn.appendTo(widgetHeader); 

    }, 1); 
} 
}); 

一切似乎都做工精細，但是，當你點擊任何< <或>>按鈕，這些dissapear的。有人可以幫助我將它們永久化在小部件中嗎？

Answer 1

我設法解決這個問題，請檢查：

http://jsfiddle.net/odiseo/EuBgE/20/

<label for="from">From</label> 
<input type="text" id="fromDate" name="fromDate"/> 

var inputDate = $("#fromDate"); 
var changeYearButtons = function() { 
    setTimeout(function() { 
     var widgetHeader = inputDate.datepicker("widget").find(".ui-datepicker-header"); 
     //you can opt to style up these simple buttons tho 
     var prevYrBtn = $('<button title="PrevYr">&lt;&lt; Prev Year</button>'); 
     prevYrBtn.bind("click", function() { 
      $.datepicker._adjustDate(inputDate, -1, 'Y'); 
     }); 
     var nextYrBtn = $('<button title="NextYr">Next year &gt;&gt;</button>'); 
     nextYrBtn.bind("click", function() { 
      $.datepicker._adjustDate(inputDate, +1, 'Y'); 

     }); 
     prevYrBtn.appendTo(widgetHeader); 
     nextYrBtn.appendTo(widgetHeader); 

    }, 1); 
}; 

var dates = $("#fromDate").datepicker({ 
    beforeShow: changeYearButtons, 
    onChangeMonthYear: changeYearButtons 
});​ 

Answer 2

使其：

var dates = $("#fromDate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: "-120:+0", 
     dateFormat: "d/m/yy", 
beforeShow: function(input) { 
    setTimeout(function() { 
     var widgetHeader = $(input).datepicker("widget").find(".ui-datepicker-header"); 
     var prevYrBtn = $('<button title="PrevYr">&lt;&lt; Prev Year</button>'); 
     prevYrBtn.unbind("click").bind("click", function() { 
      $.datepicker._adjustDate($(input), -1, 'Y'); 

     }); 
     var nextYrBtn = $('<button title="NextYr">Next year &gt;&gt;</button>'); 
     nextYrBtn.unbind("click").bind("click", function() { 
      $.datepicker._adjustDate($(input), +1, 'Y'); 

     }); 
     prevYrBtn.appendTo(widgetHeader); 
     nextYrBtn.appendTo(widgetHeader); 

    }, 1); 
} 
}); 

可以刪除：changeMonth：真， 如果你不需要它。

和屬性：yearRange：「-120：+0」 是選擇年的範圍內，例如-120 + 0是選擇生日，因爲你不能選擇在未來日期（ + 0）

和更改日期格式，可以使用例如：DD-MM-YY，MM/DD/YY等。

，如果你想看到圖像（箭頭），你必須從這裏下載 jqueryui.com/download/，在這個頁面中刪除所有複選框，只選擇日期選擇器，選擇你的設計，下載並把圖像文件夾中的日期選擇器CSS文件的同一文件夾..