JQUERY-UI: Datepicker - отключить событие щелчка на день

Question

В настоящее время у меня есть средство выбора даты с изменением месяца и года на true ... но как часть моих отзывов о пользовательских отчетах, им не понравилось, что средство выбора даты автоматически закрывается при выборе дня, потому что иногда они меняют датув случайном порядке выбора из месяца, дня и года.Так, например, если они сначала изменили дату, выбрав «Месяц», а затем «День», средство выбора даты автоматически закрывается уже с неизменным годом.

Так что я искал что-то вроде средства выбора даты, в котором устройство смены дня просто устанавливает значенияне вызывать событие закрытия, а просто делегировать это событие закрытия только кнопке «Готово», когда для showButtonPanel задано значение true.

Есть идеи, как этого добиться?

Вот мой фрагмент кода:

<script type="text/javascript">
$(function() {
    $('#datepicker').datepicker({
        changeMonth: true,
        changeYear: true,
  showButtonPanel: true,
  yearRange: 'c-70:c+nn'
    });
});

Answer 1

Я бы не стал использовать это решение, потому что оно создает ошибки практически в каждом браузере.

$(function() {
    $('#datepicker').datepicker({
       onSelect: function(dateText, inst) { inst.show() }
    });
});

Лучшее, что вы можете сделать, это переписать метод _selectDate в jQuery ui datepicker.

Вы делаете это, снова добавляя эту функцию в указатель даты следующим образом:

$('#dateField').datepicker({

    changeMonth: true,
    changeYear: true,

},

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

    dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
    if (inst.input) {
       inst.input.val(dateStr);
    }
    this._updateAlternate(inst);

    onSelect = this._get(inst, "onSelect");
    if (onSelect) {
        onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);  // trigger custom callback
    } else if (inst.input) {
        inst.input.trigger("change"); // fire the change event
    }

    if (inst.inline){
        this._updateDatepicker(inst);
    } else {

        this._lastInput = inst.input[0];
            if (typeof(inst.input[0]) !== "object") {
            inst.input.focus(); // restore focus
        }
        this._lastInput = null;
    }

})

);

обычно это будет this._hideDatepicker (); в этом сценарии. Я оставил это. Вы также можете изменить сам файл jQuery, однако я не фанат таких действий, потому что вы потеряете свою функциональность после обновления jQuery.

С моим решением не было бы необходимости делать это.

Answer 2

попробуйте это (я предполагаю, что вы используете jqueryui datepicker):

$(function() {
        $('#datepicker').datepicker({
           onSelect: function(dateText, inst) { inst.show() }
        });
    });

Answer 3

При создании средства выбора даты используйте следующие параметры:

$('input').datepicker({
   onClose: function(d,i){setTimeout(function(){$('input').datepicker("show");},1)}
});

Но, конечно, вам придется справиться с настоящим закрытием самостоятельно.

var realClose = false;
$('input').datepicker({
   onClose: function(d,i){if(realClose)setTimeout(function(){$('input').datepicker("show"); realClose = false},1)}
});
$("#done").click(function(){realClose=true;$('input').datepicker("hide")})

Answer 4

Я искал такое же решение. Мне нужны кнопки «ОК» и «Отмена», а при выборе даты поле ввода не обновляется, пока вы не нажмете кнопку «ОК».

Вам необходимо настроить следующее:

• add stayOpen: true для this._defaults = {глобальные значения по умолчанию.

• в _selectDate: function (id, dateStr) {вам необходимо настроить:

  if (inst.input)
      inst.input.val(dateStr);
  

до

    var stayOpen = this._get(inst, 'stayOpen');
    if (!stayOpen && inst.input)
        inst.input.val(dateStr);

, поскольку при обновлении даты обновляется значение поля ввода. Вам нужно установить stayOpen: true, если вы хотите изменить дату только при нажатии кнопки «ОК», в противном случае средство выбора даты закроется при выборе новой даты. Вот почему мы также получаем stayOpen, чтобы, если это так, он обновлял поле ввода перед закрытием.

Вы также можете использовать этот параметр в остальном, чтобы не скрывать средство выбора даты:

else if (!stayOpen) {
    this._hideDatepicker();

• Я использую кнопку закрытия в качестве кнопки ОК, поэтому в _generateHTML: function (inst) {вам нужно настроить data-handler = "hide" этой кнопки на что-то другое, например data-handler = "ok".

• В _attachHandlers: function (inst) {затем вы можете добавить новый обработчик в конец:

  ,
  ok: function () {
      window['DP_jQuery_' + dpuuid].datepicker._updateInput(id, inst);
  }
  

• затем вы можете добавить новую функцию, подобную этой, чтобы обновить поле ввода и скрыть указатель даты:

  _updateInput: function(id, inst) {
      if (inst.input) {
          inst.input.val(this._formatDate(inst));
      }
      this._hideDatepicker(); 
  },