Кнопка «Сегодня» в jQuery Datepicker не работает

Мне не нравится решение для изменения исходного кода jQuery, поскольку оно удаляет возможность использования CDN. Вместо этого вы можете переназначить функцию _gotoToday, включив этот код на основе @meesterjeeves answer где-нибудь в вашем файле области видимости страницы:

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

Вышеприведенный код по существу такой же, как и jQuery UI Datepicker от версии 1.10.1, за исключением двух строк, указанных выше. Весь mumble-jumbo с gotoCurrent можно фактически удалить, поскольку этот параметр не имеет смысла с нашим новым значением "сегодня".

Я думаю, что лучший способ справиться с этим - переопределить метод _goToToday вне самой библиотеки. Это решило проблему для меня:

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

Простой и не требует взлома любых событий или изменения каких-либо базовых функций

Хотя я знаю, что это уже принято, вот мое расширенное решение, основанное на Идея Сами Зина. Это использовало 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 date
    var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date());
    // (optional) close the datepicker once done
    $associatedInput.datepicker("hide");
});

Вы также можете также blur() $associatedInput и сосредоточиться на следующем вводе/выборе на своей странице, но это не так, чтобы делать это в общем случае или специфично для реализации.

В качестве примера я сделал это на странице, на которой я работал над используемыми таблицами для макета (не заставляйте меня начинать, я знаю, что это плохая практика!):

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

Просто добавьте следующие две строки кода в функцию _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));
},

Мне не нравится идея добавления дополнительного кода в исходный код jQuery. И я не хочу переопределять метод _gotoToday, копируя его реализацию где-то в коде javascript и добавляя дополнительные строки внизу.

Итак, я изменил его с помощью этого кода:

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

jQuery UI Datepicker Today Link

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

Я добавил параметр 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));

Вы также можете попробовать использовать приведенный ниже код, чтобы заполнить текущую дату в поле ввода при нажатии кнопки "Сегодня". Просто поставьте код ниже в функции _gotoToday (в конце функции) в jquery.ui.datepicker.js.

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

Обратите внимание, что я использую версию 1.8.5 jquery datepicker.

Я просто избавился от него.

В некоторых файлах CSS эта часть вашей страницы:

.ui-datepicker-current {
    visibility:hidden
}

В документации говорится, что кнопка "сегодня", название которой может быть изменено с помощью

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

изменяется только текущий месяц. Это поведение также можно настроить

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

После этого нажатие кнопки изменит отображаемый месяц на выбранную дату.

Кажется, что дата с этой кнопкой невозможна по дизайну.

Вы должны использовать опцию: todayBtn: "linked". (вместо todayBtn: true).

todayBtn Boolean, "linked". По умолчанию: false

Если значение true или "connected", в нижней части datepicker отображается кнопка "Сегодня", чтобы выбрать текущую дату. Если true, кнопка "Сегодня" будет только перемещать текущую дату в поле зрения; если "связанный", текущая дата также будет выбрана.

Подробнее см. следующую ссылку: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

Это простой хак

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

});

Это хак, который работал у меня, который использует функцию обратного вызова Datepicker beforeShow, в отличие от метода live().

     ,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 {};
     }

Вы также можете попробовать добавить это в свой script:

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

(используйте функцию .live, а не .click)

Датпикер реорганизуется как минимум в 10 раз более удивительным. Новая версия рассмотрит эту проблему.

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

(Обратите внимание, что это не вопрос. Я стараюсь быть полезным, предоставляя свое решение, поскольку другие решения не работают для меня.)

Я не мог заставить datepicker оставаться скрытым с любыми другими ответами. Календарь закрывается, а затем снова открывается. Следующий код работал у меня, чтобы изменить кнопку "Сегодня", чтобы установить дату в текущий день и закрыть календарь.

jQuery UI - v1.11.4 jQuery JavaScript Library v1.11.1 IE 11.0.28

Я включил свои значения по умолчанию для полноты.

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