web-dev-qa-db-ja.com

月/年を選択/変更した後のjQueryUI Datepicker

ユーザーが日を選択した後、または月/年を変更した後、毎日いくつかのコードを実行する方法（mouseenterイベントをアタッチする）を知りたいですか？

私はこれらのイベントにイベントを添付しようとしました

  • beforeShow
  • beforeShowDay
  • onChangeMonthYear
  • onSelect

ホバー時に、同じ行にある場合は翌日を強調表示します。

現在、日付ピッカーが作成された後（インライン）のすべての日にmoouseenter/mouseleaveイベントをアタッチしています。

以下のJSフィドルで行っていることを簡略化しました。日付を選択した後、月/年を変更した後、これらのイベントを機能させる必要があります。

JSフィドル： http://jsfiddle.net/MartinTale/Xx4GS/2/

$("div").datepicker({
    changeMonth: true,
    changeYear: true,
    inline: true,
    altField: "#datep"
});

$("tbody td:not(.ui-state-disabled, .active-calendar-cell)").mouseenter(function (e) {
    $(this).closest('td').next().find("a").addClass("hover-calendar-cell");    
    console.log('test');
});

$("tbody td:not(.ui-state-disabled)").mouseleave(function (e) {
    $("a.hover-calendar-cell").removeClass("hover-calendar-cell");
    console.log('test out');
});

前もって感謝します。

javascriptjqueryjquery-uijquery-ui-datepicker
5
Martin Tale

これがハッキーハックです。

http://jsfiddle.net/Xx4GS/3/

それは機能し、翌日（この場合は次のtd）を強調表示します。

setTimeoutは、jquery uiがアクティブな日付アイテムを破棄すると思うため、正しいアイテムが見つかるまで待ちます。

.changeの代わりにonSelectを使用できるかもしれませんが、大したことではありません。

Console.logをそこに残したので、何が起こっているのかを少し見ることができます。

8
Funkodebat

提供されているjQuerydatepickerイベント onSelect および onChangeMonthYear を使用できます。

コード：

$("#datep").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function () {
        console.log('s');
    },
    onChangeMonthYear: function () {
        console.log('o');
    }
});

デモ： http://jsfiddle.net/IrvinDominin/Xx4GS/

14
Irvin Dominin

日付をパラメータとする「onSelect」というイベントがあります。この例を参照してください。

$("#datePicker").datepicker({
    //the format
    dateFormat: "dd/mm/yy",
    //called when date is selected
    onSelect: function (date) {
        alert(date);
    }
});

Couは、api-docですべての詳細を見つけることができます： http://api.jqueryui.com/datepicker/#option-onSelect

1
PLM57