jQuery Datepicker: Schließen des Pickerls beim Anklicken eines Datums verhindern

Question

Hallo Stackoverflow-Kollegen,

Ich benutze die jQuery Datepicker-Plugin zusammen mit Martin Milesich Timepicker Plugin. Alles funktioniert gut, außer der Tatsache, dass ein Datum in der Datumsauswahl klicken, schließt das Widget, so dass keine Zeit, um die Zeit zu wählen.

Frage: Ich frage mich, ob es eine Möglichkeit gibt, das Schließen des Widgets zu verhindern, wenn man auf ein Datum klickt, und stattdessen die Benutzer zu zwingen, auf die Schaltfläche "Fertig" zu klicken (die angezeigt wird, wenn die Option "showButtonPanel: true" aktiviert wird), oder außerhalb des Widgets zu klicken. Ich möchte nicht, dass meine Benutzer das Widget zweimal öffnen müssen! Siehe das Verhalten online bei der Timepicker-Demo

Für jede Hilfe bei der Lösung dieses Problems oder sogar für Hinweise in die richtige Richtung sind wir dankbar!

Mehr Infos: Ich verwende die von Martins Download-Link gelieferten Dateien: http://milesich.com/tpdemo/timepicker-0.2.0.zip

• jquery-ui-1.7.2.custom.min.js
• timepicker.js (neueste Version 0.2.0)

Dies sind die Optionen, die ich verwende:

$(document).ready(function(){
    $(".datepicker").datepicker({
        duration: '',  
        showTime: true,  
        constrainInput: false,  
        stepMinutes: 5,  
        stepHours: 1, 
        time24h: true,
        dateFormat: "yy-mm-dd",
        buttonImage: '/static/images/datepicker.png',
        buttonImageOnly: true,
        firstDay: 1,
        monthNames: ['Januari','Februari','Mars','April','Maj','Juni','Juli','Augusti','September','Oktober','November','December'],
        showOn: 'both',
        showButtonPanel: true
     });
})

Answer 1

In Anlehnung an den Vorschlag von Emil habe ich einen schöneren und einfacheren Weg gefunden, das Widget so zu modifizieren, dass es bei einem Select-Ereignis nicht schließt.

Zunächst habe ich eine weitere Eigenschaft zum Standarddiktat des Widgets hinzugefügt:

closeOnSelect:true //True to close the widget when you select a date

Zweitens finden Sie diese Anweisung in der Methode _selectDate:

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

Und ändern Sie die Bedingung wie folgt:

var closeOnSelect = this._get(inst, "closeOnSelect");        
if (inst.inline || !closeOnSelect)
        this._updateDatepicker(inst);
else {
        ...
    }

Probieren Sie es aus, es funktioniert bei mir. Ich habe es über die JQuery UI 1.8.5 Version.

Answer 2

Cool, wenn Sie jquery-ui-1.8.5.custom.min.js und jquery-ui.multidatespicker.js verwenden, können Sie die jquery-ui-1.8.5.custom.min.js ändern: aus:

if(a.inline)this._updateDatepicker(a);

in:

if(a.inline || !this._get(a, 'closeOnSelect'))this._updateDatepicker(a);

Answer 3

Nun, das ist ein schmutziger Workaround ... aber es funktioniert bei mir ... sogar mit showButtonPanel: true

  $(function() {
    var dp_c = null, dp_once = false;
    $( '#datepicker' ).datepicker({
      showButtonPanel: true,
      onSelect: function() {
        $(this).data('datepicker').inline = true;  
        setTimeout(function () {
          $('#ui-datepicker-div').find('.ui-datepicker-buttonpane').append(dp_c);
        }, 1);

      },
      onClose: function() {
        $(this).data('datepicker').inline = false;
      }
    }).click(function () {
      if(!dp_once) {
        setTimeout(function () {
          dp_c = $('#ui-datepicker-div').find('.ui-datepicker-close').clone();
        }, 500);
        dp_once = !!1;
      }
    });

    $('#ui-datepicker-div').on('click', '.ui-datepicker-close', function () {
      $('#datepicker').datepicker( "hide" );
    });

  });

Answer 4

Sie sollten die native js-Funktion außer Kraft setzen:

 /* Update the input field with the selected date. */
        _selectDate: function(id, dateStr) {
            var target = $(id);
            var inst = this._getInst(target[0]);
            dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
            if (inst.input)
                inst.input.val(dateStr);
            this._updateAlternate(inst);
            var 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 {
                if(inst.settings.hideOnSelect != false){
                    this._hideDatepicker();
                }
                this._lastInput = inst.input[0];
                if (typeof(inst.input[0]) != 'object')
                    inst.input.focus(); // restore focus
                this._lastInput = null;
            }
        },

Und fügen Sie die entsprechende Option zur Datumsauswahlkonfiguration hinzu, wie zum Beispiel:

var defaultDatePickerOptions = {
        hideOnSelect: false,
        ...
    }; 
 var birthDate = jQuery.extend({}, defaultDatePickerOptions);
 $('#birthdate').datepicker(birthDate);