Question

我在Jquery UI datepicker中添加了两个按钮，大致遵循以下建议： jQuery datepicker adding custom button

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

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

当你点击任何＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;或＆gt;＆gt;按钮，这些消失。有人可以帮助我在小部件中使它们永久化吗？

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

自定义按钮从JQuery Datepicker中消失

2 个答案: