箭頭切換月份的日曆應用程序

Question

我想使用JavaScript來開發一個日曆，我不知道如何處理這種情況，我的意思是我想用2個箭頭（一個向左，一個右邊）切換顯示日期的月份和年份。如何按下右箭頭切換到下一個月等等？

Answer 1

前陣子我修改了jQuery datepicker支持這種事情。我沒有對的git或任何源頭上去所以在這裏，它是：http://jsfiddle.net/ZUrJY/2/

變化的相關部分是在_generateHTML方法。

var prev = (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ? 
'<a style="left: 22px;" class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_' + dpuuid + 
'.datepicker._adjustDate(\'#' + inst.id + '\', -' + stepMonths + ', \'M\');"' + 
' title="' + prevText + '"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>' : 
(hideIfNoPrevNext ? '' : '<a style="left: 22px;" class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="' + prevText + '"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>')); 

prev += (this._canAdjustMonth(inst, -12, drawYear, drawMonth) ? 
'<a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_' + dpuuid + 
'.datepicker._adjustDate(\'#' + inst.id + '\', -' + 12 + ', \'M\');"' + 
' title="Prev Year"><span class="ui-icon ui-icon-circle-arrow-' + (isRTL ? 'e' : 'w') + '">Prev Year</span></a>' : 
(hideIfNoPrevNext ? '' : '<a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="Prev Year"><span class="ui-icon ui-icon-circle-arrow-' + (isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>')); 

var nextText = this._get(inst, 'nextText'); 
nextText = (!navigationAsDateFormat ? nextText : this.formatDate(nextText, 
this._daylightSavingAdjust(new Date(drawYear, drawMonth + stepMonths, 1)), 
this._getFormatConfig(inst))); 
var next = (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ? 
'<a style="right: 22px;" class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_' + dpuuid + 
'.datepicker._adjustDate(\'#' + inst.id + '\', +' + stepMonths + ', \'M\');"' + 
' title="' + nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>' : 
(hideIfNoPrevNext ? '' : '<a style="right: 22px;" class="ui-datepicker-next ui-corner-all ui-state-disabled" title="' + nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>')); 

next += (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ? 
'<a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_' + dpuuid + 
'.datepicker._adjustDate(\'#' + inst.id + '\', +' + 12 + ', \'M\');"' + 
' title="Next Year"><span class="ui-icon ui-icon-circle-arrow-' + (isRTL ? 'w' : 'e') + '">Next Year</span></a>' : 
(hideIfNoPrevNext ? '' : '<a class="ui-datepicker-next ui-corner-all ui-state-disabled" title="Next Year"><span class="ui-icon ui-icon-circle-arrow-' + (isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>'));