添加按钮到datepicker + 6个月

Question

i have a javascript code to create an extra button in the datepicker panel when clikced on the input filed.

$(function() {
$( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd", 
changeMonth: true,
changeYear: true,
yearRange: "2014:2034",
showButtonPanel: true,
    beforeShow: function (input) {
        setTimeout(function () {
            var buttonPane = $(input)
                .datepicker("widget")
                .find(".ui-datepicker-buttonpane");

            var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">CSA</button>');
            btn.unbind("click")
            .bind("click", function () {
                //$.datepicker._clearDate(input);
                //alert('custom text');
                $(input).datepicker("hide");
                $(input).val("0000-00-00");
            });

            btn.appendTo(buttonPane);

        }, 1);
    }
});
});

Now when i click the extra button "CSA" in the panel, 0000-00-00 appears. Now what i want to is that when the button "CSA" is clicked the date off today + 6 months to appear. Is that possible in datepicker?

Answer 1

I did this a while back adding year support to the calendar: https://stackoverflow.com/a/10558308/402706

Without much tweaking you can get a +6 month (from today) button as well.

<kbd>Live Demo</kbd>

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

        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._setDateDatepicker($(\'#' + inst.id + '\')[0], new Date(new Date().setMonth(new Date().getMonth()+6)));"' +
        ' title="CSA"><span style="cursor:pointer;cursor:hand;">CSA</span></a>' :
        (hideIfNoPrevNext ? '' : '<a class="ui-datepicker-next ui-corner-all ui-state-disabled" title="CSA"><span style="cursor:pointer;cursor:hand;">CSA</span></a>'));