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

63

Я использую jQueryUI Datepicker и показываю "Сегодня" кнопка. Но это не работает. Он также не работает в демоверсии:http://www.jqueryui.com/demos/datepicker/#buttonbar

Я хочу заполнить ввод сегодняшним днем, когда нажимаю эту кнопку.

Можно ли заставить его работать?

Ваш Ответ

18   ответов
2

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

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

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

todayBtn

Boolean, “linked”. Default: false

If true or “linked”, displays a “Today” button at the bottom of the datepicker to select the current date. If true, the “Today” button will only move the current date into view; if “linked”, the current date will also be selected.

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

2

Для этого я добавил опцию в средство выбора даты: 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));
7

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

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

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

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

@WalterStaboszcomments can include syntax highlighting
Мне не нравится решение по модификации исходного кода jQuery, потому что оно лишает возможности использовать CDN. Смотрите мой ответ о том, как изменить функцию _gotoToday без изменения файла кода плагина. (Я бы сохранил это как комментарий, а не как ответ, если бы комментарии могли включать подсветку синтаксиса)
<light-hearted-sarcasm>& quot; Их код на самом деле не сломан. Он просто не делает то, что большинство людей ожидают от него ». - по мнению большинства людей, это определение сломанного ;-)</light-hearted-sarcasm>
Мне больше нравится предложение Грегла.
@ ChrisMorley Это не работает на IE, я думаю.
26

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

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

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

Если вам нравится это решение и вы хотите потерять фокус ввода, просто добавьте$(id).blur(); послеthis._selectDate(id).
Используя 1.10.2, и работает блестяще. Добавил его в мою конфигурацию shim для init для requirejs:shim: { 'datepicker': { deps: ['jquery','ui_core'], init: function ($, core) { var oldGoToToday = $.datepicker._gotoToday $.datepicker._gotoToday = function(id) { oldGoToToday.call(this, id); this._selectDate(id); }; } }, }
@itslittlejohn: отличный совет; IE 11 и ниже нуждаются в дополнительной настройке, к сожалению, в противном случае диалоговое окно всплывет сразу же: append$(id).datepicker('option', 'showOn', null); setTimeout(function () { $(id).datepicker('option', 'showOn', 'focus') }) временно отключить средство выбора даты, а затем снова включить его послеblur событие завершило обработку.
Немного глючит (календарь не будет появляться, пока не будет удален фокус), но в остальном работает отлично.
это сработало для меня, проблема фокуса не была проблемой, так как я использую опцию, чтобы открывать только по щелчку значка, но если кто-то еще работает над проблемами фокуса и стиля, вот несколько ответов:stackoverflow.com/questions/3139237/…
1

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

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

2

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

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

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

2

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

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

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

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

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

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

Большое спасибо, это спасло меня много раз.
1

Это простой взлом

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

});
83

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

Эта гораздо более короткая версия работала для меня (на v1.10.3):$.datepicker._gotoToday = function (id) { $(id).datepicker('setDate', new Date()).datepicker('hide').blur(); };
ломает кнопку для меня.
Большое спасибо. Пробовал все виды способов заставить кнопку «Сегодня» вести себя таким образом в IE, но ваш единственный работал.
Я использую его с jquery-1.6.2.min.js и /1.8.15/jquery-ui.min.js, которые не являются последними версиями. Возможно, в новых версиях произошли изменения кода, которые нарушают этот хак.
Это работает для меня в IE 7 и выше, а также в Firefox и Chrome.
2

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

1

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

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

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

9

Хотя я знаю, что это уже было принято, вот мое расширенное решение, основанное наИдея Сэми Зина, Он использовал 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() $associatedInput и сосредоточиться на следующем вводе / выборе на вашей странице, но это не тривиально, чтобы сделать в общем, или зависит от реализации.

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

$associatedInput.closest('tr').next('tr').find('input,select').first().focus();
Обновление: я действительно нашел проблемы с моим решением здесь, в IE (большинство версий). Вместо этого я остановился на подходе Уолтера Стабоса, который работал в IE (а также в других браузерах).
1

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

JQuery UI Datepicker Сегодня Ссылка

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

Это правильно устанавливает текущую дату, но она открывает всплывающее окно DatePicker после установки.
10

Just add the following two lines of code to the _gotoToday function...


/* 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));
},

-1

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

Я не мог заставить средство выбора даты оставаться скрытым ни с одним из других ответов. Календарь закроется, а затем снова откроется. Приведенный ниже код помог мне изменить кнопку «Сегодня», установить дату на текущий день и закрыть календарь.

Пользовательский интерфейс jQuery - 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
    });

Область Ответов предназначена для ответов, а не для последующих вопросов. Пожалуйста, рассмотрите возможность размещения этого как Вопроса (ссылка на него внутри него), или как комментарий к вопросу, или как один из существующих ответов.
2

Я только что избавился от этого.

В каком-то CSS-файле, который является частью вашей страницы:

.ui-datepicker-current {
    visibility:hidden
}
Нет, он только спрятал кнопку «Сегодня», а не «Готово».
Нет смысла делать это таким образом, так как вы можете просто пропустить опцию, чтобы скрыть кнопки.showButtonPanel:false - и это значение по умолчанию в любом случае.

Похожие вопросы