添加按钮到datepicker + 6个月

Question

我有一个javascript代码，可以在输入字段上填充时在datepicker面板中创建一个额外的按钮。

$(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);
    }
});
});

现在，当我点击面板中的额外按钮“CSA”时，会出现0000-00-00。现在我想要的是，当点击按钮“CSA”时，今天关闭日期+ 6个月才会出现。这可能是在datepicker吗？

Answer 1

我做了一段时间，将年份支持添加到日历中：https://stackoverflow.com/a/10558308/402706

如果没有太多调整，您也可以获得+6个月（从今天开始）按钮。

的 Live Demo

更改的相关部分位于_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>'));

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

Answer 2

要添加六个月，您可以使用：

        var date = new Date();
        date.setMonth(date.getMonth() + 6);

我不确定如何在datepicker小部件中设置日期，但如果我们按照您的代码：

        .bind("click", function () {
            //$.datepicker._clearDate(input);
            //alert('custom text');
            $(input).datepicker("hide");
            var date = new Date();
            date.setMonth(date.getMonth() + 6);
            $(input).val(date.getFullYear() + "-" date.getMonth() + "-" + date.getDate());


        });

Answer 3

将其附加到按钮点击事件：

$('#csa-button').click(function(){
    var mydate = new Date();
    mydate.setMonth(date.getMonth()+6);
    $(this).datepicker('setDate', mydate);
});