web-dev-qa-db-ja.com

jQuery Datepickerの[今日]ボタンが機能しない

JQueryUI Datepickerを使用して、「Today」ボタンを表示しています。しかし、それは機能しません。また、デモでは機能しません： http://www.jqueryui.com/demos/datepicker/#buttonbar

このボタンを押すと、今日を入力で埋めたいと思います。

動作させることは可能ですか？

jquery-uidatepicker
65
Chuprin

彼らのコードは本当に壊れていません。それは、ほとんどの人が期待することをしません。入力ボックスに今日の日付を入力します。それがすることは、ユーザーがカレンダーで今日の日付を見るためのハイライトです。別の月または別の年にオフになった場合、カレンダーは、ユーザーがすでに選択した日付を選択解除せずに、今日のビューに戻ります。

より直感的にするには、ニーズに合わせてプラグインコードを更新する必要があります。それがどうなるか教えてください。

Jquery-ui javascriptの非圧縮バージョンを取得する必要があります。バージョン1.7.2を見て、「_ gotoToday」関数が6760行目にあります。6831行で_selectDate（）関数を起動する_gotoTodayに呼び出しを追加するだけです。:)ハッピーコーディング。

40
DMCS

JQueryのソースコードを変更するソリューションは、CDNを使用する機能が削除されるため、好きではありません。代わりに、ページのJavaScriptスコープファイルのどこかに @ meesterjeeves answer に基づいて次のコードを含めることで、_gotoToday関数を再割り当てできます。

$.datepicker._gotoToday = function(id) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
            inst.selectedDay = inst.currentDay;
            inst.drawMonth = inst.selectedMonth = inst.currentMonth;
            inst.drawYear = inst.selectedYear = inst.currentYear;
    }
    else {
            var date = new Date();
            inst.selectedDay = date.getDate();
            inst.drawMonth = inst.selectedMonth = date.getMonth();
            inst.drawYear = inst.selectedYear = date.getFullYear();
            // the below two lines are new
            this._setDateDatepicker(target, date);
            this._selectDate(id, this._getDateDatepicker(target));
    }
    this._notifyChange(inst);
    this._adjustDate(target);
}

上記のコードは、上記の2行を除いて、バージョン1.10.1のjQuery UI Datepickerと基本的に同じです。 gotoCurrent のmumble-jumbo全体は、「今日」という新しい意味ではそのオプションが意味をなさないため、実際に削除できます。

84
Walter Stabosz

これを処理する最善の方法は、ライブラリ自体の外部で_goToTodayメソッドをオーバーライドすることだと思います。これで問題が解決しました：

var old_goToToday = $.datepicker._gotoToday
$.datepicker._gotoToday = function(id) {
  old_goToToday.call(this,id)
  this._selectDate(id)
}

シンプルで、イベントをハックしたり、基盤となる機能を変更したりする必要はありません

26
Dave

次の2行のコードを_gotoToday関数に追加するだけです...


/* Action for current link. */
_gotoToday: function(id) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
        inst.selectedDay = inst.currentDay;
    inst.drawMonth = inst.selectedMonth = inst.currentMonth;
    inst.drawYear = inst.selectedYear = inst.currentYear;
    }
    else {
        var date = new Date();
        inst.selectedDay = date.getDate();
        inst.drawMonth = inst.selectedMonth = date.getMonth();
        inst.drawYear = inst.selectedYear = date.getFullYear();
    }
    this._notifyChange(inst);
    this._adjustDate(target);

    /* ### CUSTOMIZATION: Actually select the current date, don't just show it ### */
    this._setDateDatepicker(target, new Date());
    this._selectDate(id, this._getDateDatepicker(target));
},
10
meesterjeeves

これはすでに受け入れられていることは知っていますが、ここに Samy Zineのアイデア に基づいた拡張ソリューションを示します。これはjQuery 1.6.3とjQuery UI 1.8.16を使用しており、Firefox 6で機能しました。

_$('.ui-datepicker-current').live('click', function() {
    // extract the unique ID assigned to the text input the datepicker is for
    // from the onclick attribute of the button
    var associatedInputSelector = $(this).attr('onclick').replace(/^.*'(#[^']+)'.*/gi, '$1');
    // set the date for that input to today's date
    var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date());
    // (optional) close the datepicker once done
    $associatedInput.datepicker("hide");
});
_

blur() the _$associatedInput_を使用して、ページ内の次の入力/選択に焦点を当てることもできますが、これは一般的に行うのは簡単ではなく、実装固有です。

例として、レイアウト用のテーブルを使用して作業しているページでこれを行いました（始めないでください、それは悪い習慣です！）：

_$associatedInput.closest('tr').next('tr').find('input,select').first().focus();
_
9
GregL

JQueryのソースコードに余分なコードを追加するという考えは好きではありません。また、実装をjavascriptコードのどこかにコピーアンドペーストし、下部に余分な行を追加することで、_gotoTodayメソッドをオーバーライドしたくありません。

したがって、このコードを使用して微調整しました。

(function(){
    var original_gotoToday = $.datepicker._gotoToday;

    $.datepicker._gotoToday = function(id) {
        var target = $(id),
            inst = this._getInst(target[0]);

        original_gotoToday.call(this, id);
        this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
    }
})();
7
aliona

todayBtnオプションを使用する必要があります。

$("...").datepicker({
  todayBtn: "linked"
})

（の代わりに todayBtn: true）。

todayBtn

ブール、「リンク」。デフォルト：false

Trueまたは「リンク」の場合、日付ピッカーの下部に「今日」ボタンを表示して現在の日付を選択します。 trueの場合、「今日」ボタンは現在の日付のみを表示します。 「リンク」されている場合、現在の日付も選択されます。

詳細については、次のリンクを参照してください。 http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

5
judian
$.datepicker._gotoToday = function(id) {
  var inst = this._getInst($(id)[0]);

  var date = new Date();
  this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
}

$.datepicker.setDefaults({
  changeMonth: true,
  maxDate: 'today',
  numberOfMonths: 1,
  showButtonPanel: true
});
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<input type="text" id="id">
2
rmw

私はそれを取り除きました。

ページの一部であるCSSファイルで：

.ui-datepicker-current {
    visibility:hidden
}
2
BillB

jQuery UI Datepicker Todayリンク

$('button.ui-datepicker-current').live('click', function() { $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); });

2
Mati Horovitz

ドキュメントには、どの「今日」ボタンでタイトルを変更できるかが記載されています

.datepicker('option', 'currentText', 'New Title')

表示されている月のみを現在に変更します。この動作も設定できます

.datepicker('option', 'gotoCurrent', true);

その後、ボタンを押すと、表示されている月が選択した日付に変更されます。

このボタンで日付を送信することは、設計上不可能なようです。

2
Alexander Prokofyev

[今日]ボタンをクリックすると、入力ボックスに現在の日付を入力するために、以下のコードも試すことができます。 _gotoTodayのjquery.ui.datepicker.js関数（関数の最後）に以下のコードを配置するだけです。

this._selectDate(id, this._formatDate(inst,
inst.selectedDay, inst.drawMonth, inst.drawYear));

Jquery datepickerのバージョン1.8.5を使用していることに注意してください。

2
Sandip Panchal

そのために、datepickerにselectCurrentオプションを追加しました。

同じことを行うには、非圧縮のjsファイルに次を追加するだけです。

1）関数Datepicker（）の終わりに向かって、以下を追加します：

selectCurrent: false // True to select the date automatically when the current button is clicked

2）_gotoToday関数の最後に、次を追加します。

if (this._get(inst, 'selectCurrent'))
  this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
2
Fabrice

これは、live（）アプローチではなく、DatepickerのbeforeShowコールバック関数を使用するハックです。

     ,beforeShow: function(input, datepicker) {
         setTimeout(function() {
             datepicker.dpDiv.find('.ui-datepicker-current')
                .text('Select Today')
                .click(function() {
                     $(input)
                         .datepicker('setDate', new Date())
                         .datepicker('hide');
                });
         }, 1);
         return {};
     }
1
Clayton

日付ピッカーは少なくとも10倍以上素晴らしいものにリファクタリングされています。新しいバージョンではこの問題に対処します。

http://wiki.jqueryui.com/w/page/12137778/Datepicker

1
Bryan Downing

これをスクリプトに追加することもできます：

$('.ui-datepicker-current').live('click', function() {
       $(".datepicker").datepicker("setDate", date);
});

（.clickではなく.live関数を使用）

1
Samy Zine

これは単純なハックです

$(function() {
var _gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(a){
var target = $(a);
var inst = this._getInst(target[0]);
_gotoToday.call(this, a);
$.datepicker._selectDate(a, $.datepicker._formatDate(inst,inst.selectedDay, inst.selectedMonth, inst.selectedYear));
target.blur();
}

$( “#datepicker” ).datepicker({
showButtonPanel: true
});

});
1
rvirk

別の方法で解決しました。

日付にナビゲートし、その日が既に選択されている場合でも（翌月/前の月をクリックした後）その日をクリックすることを忘れないでください。

ここでは、月/年を移動するときに入力フィールドを直接更新します。これは、Todayボタンがクリックされたときにも発生します。また、選択が変更されたときに起動するchangeイベントも必要です。

$input.datepicker({
    ...
    onChangeMonthYear: function (year, month, inst)
    {
        var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
        if (!isNaN(date))
        {
            input.value = $.datepicker.formatDate("dd M yy", date);
            $input.change();
        }
    }
}
0
Etherman