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

Ответ 1

Их код на самом деле не сломан. Это просто не делает то, что ожидали бы от большинства людей. Который должен ввести сегодня дату в поле ввода. То, что он делает, является ключевым моментом для того, чтобы пользователь мог видеть сегодняшнюю дату в календаре. Если они отключились через месяц или другой год, календарь возвращается к сегодняшнему просмотру без отмены выбора даты, которую пользователь уже выбрал.

Чтобы сделать его более интуитивно понятным, вам необходимо обновить код плагина в соответствии с вашими потребностями. Дайте мне знать, как это происходит.

Вам нужно получить несжатую версию jquery-ui javascript. Я смотрю версию 1.7.2, а функция "_gotoToday" находится в строке 6760. Просто добавьте вызов в этот _gotoToday, который отключает функцию _selectDate() в строке 6831.:) Happy Coding.

Ответ 2

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

$.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, за исключением двух строк, отмеченных выше. Весь gotoCurrent с gotoCurrent может быть фактически удален, так как этот параметр не имеет смысла с нашим новым значением "сегодня".

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

Хотя я знаю, что это уже принято, вот мое расширенное решение, основанное на Идея Сами Зина. Это использовало 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();

Ответ 6

Мне не нравится идея добавления дополнительного кода в исходный код 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));
    }
})();

Ответ 7

Вы должны использовать опцию todayBtn:

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

(вместо todayBtn: true).

todayBtn

Boolean, "связанный". По умолчанию: false

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

Для получения дополнительной информации перейдите по следующей ссылке: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

Ответ 8

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

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

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

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

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

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

Ответ 9

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

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

.ui-datepicker-current {
    visibility:hidden
}

Ответ 10

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

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

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

Ответ 11

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

Ответ 12

jQuery UI Datepicker Today Link

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

Ответ 13

$.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">

Ответ 14

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

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

Ответ 15

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

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

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

Ответ 16

Это хак, который работал у меня, который использует функцию обратного вызова 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 {};
     }

Ответ 17

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

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

});

Ответ 18

Я решил это по-другому.

Я нахожу это раздражающим, переходя к дате, поэтому не забывая нажимать на день, даже если он уже выбран (после нажатия на следующий/предыдущий месяц).

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

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

Ответ 19

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

Я не мог заставить 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
    });