jquery - 从 JQuery Datepicker 中消失的自定义按钮

Question

我大致按照以下建议向 Jquery UI datepicker 添加了两个按钮： jQuery datepicker added custom button

我基本上想在标题中添加两个按钮或双箭头以在年份之间进行更改（是的，我知道有一个 changeYear 属性，但我真的需要那些箭头）。我的代码在这里：

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

​</p>

一切似乎都正常，但是，当您单击任何 << 或 >> 按钮时，这些按钮就会消失。有人可以帮我将它们永久保存在小部件中吗？

Answer 1

我设法解决了这个问题，请检查：

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
});​

Answer 2

使它：

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

你可以删除：changeMonth: true，如果你不需要它。

属性：yearRange: "-120:+0" 用于选择年份的范围，例如-120 +0 用于选择生日，因为您不能选择未来的日期（+ 为0）

并更改日期格式，您可以使用例如：dd-mm-yy、mm/dd/yy 等。

如果您想查看图像（箭头），您必须从这里下载它 jqueryui.com/download/ ，在此页面中删除所有复选框，仅选择 datepicker，选择您的设计，下载并将图像文件夹放入datepicker css文件的同一个文件夹..