add button to datepicker + 6 months

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?

$(input).val("0000-00-00"); This has nothing to do with datepicker. You just need to use the Date() function to calculate your desired date and put it as value to your field — andrew, Feb 18 '14 at 13:17
i know, but the script was like that before that 0000-00-00 must been shown, but now it must become date off today + 6 months — Johan, Feb 18 '14 at 13:25

score 2 · Accepted Answer · edited May 23 '17 at 10:31

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.

enter image description here

Live Demo

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

score 0 · Answer 2 · answered Feb 18 '14 at 13:18

To add six months, you can use:

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

I'm not sure on how to set a date in your datepicker widget, but if we follow your code:

        .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());


        });

score 0 · Answer 3 · answered Feb 18 '14 at 13:22

0

Attach this to the button click event:

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

answered Feb 18 '14 at 13:22

Andres SK

10,779
25
90
152

and how do i attach it, srry i am not familiar with javascript – Johan Feb 18 '14 at 13:24
just create the `` – Andres SK Feb 18 '14 at 19:04

add button to datepicker + 6 months

3 Answers3