CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
odiseo
odiseo

Reputation: 6784

Custom button dissapearing from JQuery Datepicker

I've added two buttons to a Jquery UI datepicker following roughly this suggestion: jQuery datepicker adding custom button

I've basically want to add two buttons or double arrows in the header to change between years (yes, I know there's a changeYear property but I really need those arrows). My code is here:

jsfiddle

var dates = $("#fromDate").datepicker({
changeYear: true,
beforeShow: function(input) {
    setTimeout(function() {
        var widgetHeader = $(input).datepicker("widget").find(".ui-datepicker-header");
        var prevYrBtn = $('<button title="PrevYr">&lt;&lt; Prev Year</button>');
        prevYrBtn.unbind("click").bind("click", function() {
            $.datepicker._adjustDate($(input), -1, 'Y');

        });
        var nextYrBtn = $('<button title="NextYr">Next year &gt;&gt;</button>');
        nextYrBtn.unbind("click").bind("click", function() {
            $.datepicker._adjustDate($(input), +1, 'Y');

        });
        prevYrBtn.appendTo(widgetHeader);
        nextYrBtn.appendTo(widgetHeader);

    }, 1);
}
});

​

Everything seems to work fine, however, when you click on any of the << or >> buttons, these dissapear. Can somebody help me to make them permanent in the widget?

Upvotes: 2

Views: 1665

Answers (2)

odiseo
odiseo

Reputation: 6784

I managed to solve this, check:

http://jsfiddle.net/odiseo/EuBgE/20/

<label for="from">From</label>
<input type="text" id="fromDate" name="fromDate"/>

var inputDate = $("#fromDate");
var changeYearButtons = function() {
    setTimeout(function() {
        var widgetHeader = inputDate.datepicker("widget").find(".ui-datepicker-header");
        //you can opt to style up these simple buttons tho
        var prevYrBtn = $('<button title="PrevYr">&lt;&lt; Prev Year</button>');
        prevYrBtn.bind("click", function() {
            $.datepicker._adjustDate(inputDate, -1, 'Y');
        });
        var nextYrBtn = $('<button title="NextYr">Next year &gt;&gt;</button>');
        nextYrBtn.bind("click", function() {
            $.datepicker._adjustDate(inputDate, +1, 'Y');

        });
        prevYrBtn.appendTo(widgetHeader);
        nextYrBtn.appendTo(widgetHeader);

    }, 1);
};

var dates = $("#fromDate").datepicker({
    beforeShow: changeYearButtons,
    onChangeMonthYear: changeYearButtons
});​

Upvotes: 2

Daniel Ezra
Daniel Ezra

Reputation: 1444

make it to:

var dates = $("#fromDate").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-120:+0",
         dateFormat: "d/m/yy",
beforeShow: function(input) {
    setTimeout(function() {
        var widgetHeader = $(input).datepicker("widget").find(".ui-datepicker-header");
        var prevYrBtn = $('<button title="PrevYr">&lt;&lt; Prev Year</button>');
        prevYrBtn.unbind("click").bind("click", function() {
            $.datepicker._adjustDate($(input), -1, 'Y');

        });
        var nextYrBtn = $('<button title="NextYr">Next year &gt;&gt;</button>');
        nextYrBtn.unbind("click").bind("click", function() {
            $.datepicker._adjustDate($(input), +1, 'Y');

        });
        prevYrBtn.appendTo(widgetHeader);
        nextYrBtn.appendTo(widgetHeader);

    }, 1);
}
});

you can delete the: changeMonth: true, if you don't need it.

and the attribute: yearRange: "-120:+0" is for choose the range of the years, for example -120 +0 is for choosing birthday, because you can't choose date in the future (the + is 0)

and change the date format, you can use for example: dd-mm-yy, mm/dd/yy , etc..

and if you want to see the images (the arrows), you have to download it from here jqueryui.com/download/ , in this page remove all the checkboxs, choose only datepicker, choose your design, download and put the image folder in the same folder of the datepicker css file..

Upvotes: 0

Related Questions