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

Als Hinweis, und da mich Leute per E-Mail danach gefragt haben. Hier ist ein Code-Chunk, der zu timepicker.js hinzugefügt werden muss:

/**
 * Don't hide the date picker when clicking a date
 */
$.datepicker._selectDateOverload = $.datepicker._selectDate;
$.datepicker._selectDate = function(id, dateStr) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    inst.inline = true;
    $.datepicker._selectDateOverload(id, dateStr);
    inst.inline = false;
    this._updateDatepicker(inst);
}

Viel Glück bei der Umsetzung auf Ihrer Website!

Answer 2

Anstatt die Quelle zu ändern, ist es besser, die bestehenden Ereignisse zu verwenden.

onSelect: function() {
    $(this).data('datepicker').inline = true;                               
},
onClose: function() {
    $(this).data('datepicker').inline = false;
}

Answer 3

Sie müssen den Datepicker selbst hacken. Dies ist der Code, der verwendet wird. Wenn er nicht inline ist, wird er ausgeblendet, wenn Sie ein Datum auswählen.

Sie könnten in Ihre eigene onSelect-Methode übergeben und schnell die datePicker-Instanz ändern, um inline zu sein und dann ändern Sie es zurück, ohne die datepicker Interna zu ändern, aber es ist eine sehr hacky Lösung.

if (inst.inline)
        this._updateDatepicker(inst);
else {
      this._hideDatepicker(null, this._get(inst, 'duration'));
      this._lastInput = inst.input[0];
      if (typeof(inst.input[0]) != 'object')
      inst.input[0].focus(); // restore focus
      this._lastInput = null;
}

Answer 4

Hier ist eine Lösung:

onSelect: function ( dateText, inst ) {
    ..... // Your code like $(this).val( dateText );`

    //Set inline to true to force "no close"
    inst.inline = true;
},
onClose: function(date,inst){
    //Set inline to false => datapicker is closed
    // onClose is called only if you click outside the datapicker, onSelect will not
    // trig onClose due to inline = true
   inst.inline = false;
}

`

Answer 5

Warum bieten alle Kommentare eine Abhilfe an? Es ist ein klares Wort:

Inline-Kalender mit altField verwenden :)

    <input type="text" id="alternate" size="30" />
    <div id="datepicker"></div>

    <script>
       $("#datepicker").datepicker({
          altField: "#alternate"
       });
    </script>

prüfen Sie diese Fiedel: http://jsfiddle.net/menocomp/y2s662b0/1/