2

おおよそ次の提案に従って、Jquery UI datepicker に 2 つのボタンを追加しました 。

基本的に、ヘッダーに 2 つのボタンまたは二重矢印を追加して、年ごとに変更したいと考えています (はい、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>

すべて正常に動作しているように見えますが、<< または >> ボタンのいずれかをクリックすると、これらが消えます。誰かがウィジェットでそれらを永続的にするのを手伝ってくれますか?

4

2 に答える 2

2

私はこれを解決することができました、チェックしてください：

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
});​
于 2012-11-13T21:24:17.173 に答える
0

それをする：

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ファイルの同じフォルダー..

于 2012-11-09T19:10:35.263 に答える