箭头切换月份的日历应用程序 [英] Arrows to switch the month in a calendar app

问题描述

我想使用JavaScript来开发一个日历，我不知道如何处理这种情况，我的意思是我想用2箭头（一个向左，一个向右）月开关和将显示该天的一年。我怎么做，当右箭头是pressed切换到下个月等等？

I would like to develop a calendar using javascript and i don't know how to approach the situation, i mean i would like to use 2 arrows ( one to the left , one to the right ) to switch the month and the year for which the days are displayed. How do i do that when the right arrow is pressed to switch to the next month and so on ?

推荐答案

前阵子我修改了 jQuery的日期选择器来支持这种事情。我没有对的git或任何源达所以在这里，它是： http://jsfiddle.net/ZUrJY / 2 /

A while back I modified the jQuery datepicker to support this kind of thing. I don't have the source up on git or anything so here it is: http://jsfiddle.net/ZUrJY/2/

变化的相关部分是在 _generateHTML 方法。

The relevant portion of the change is in the _generateHTML method.

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>'));

这篇关于箭头切换月份的日历应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！