自定义按钮从 JQuery Datepicker 中消失

Question

我大致按照以下建议向 Jquery UI 日期选择器添加了两个按钮： jQuery datepicker adding 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);
}
});

​

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

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 文件的同一文件夹中..