jQuery selector de fechas: evitar el cierre selector al hacer clic en una fecha

Question

Hola compañero stackoverflow: ERS,

estoy usando el jQuery Datepicker plugin, junto con Martin Milesich Timepicker plugin. Todo funciona muy bien, excepto por el hecho de que al hacer clic en una fecha en el selector de fecha, se cierra el widget, sin dejar tiempo para elegir la hora.

Pregunta: Así que me pregunto si hay una forma de evitar que el widget se cierre al hacer clic en una fecha y obligue a los usuarios a hacer clic en el botón "Listo" (que aparece cuando se habilita la opción "showButtonPanel: true"), o haciendo clic fuera del widget. ¡No quiero que mis usuarios tengan que abrir el widget dos veces! Ver el comportamiento online at the timepicker demo

¡Cualquier ayuda que resuelva este problema, o incluso indicadores en la dirección correcta, se aprecia!

Más información: estoy usando los archivos suministrados desde Martins enlace de descarga: http://milesich.com/tpdemo/timepicker-0.2.0.zip

• jQuery-UI-1.7.2.custom.min.js
• timepicker.js (última versión 0.2 .0)

Estas son las opciones que estoy usando:

$(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

en lugar de cambiar la fuente que lo mejor es utilizar los eventos existentes

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

Answer 2

Tendrá que hackear el datepicker usted mismo. Este es el código que usa. Si no está en línea, se ocultará cuando seleccione una fecha.

Puede pasar su propio método onSelect y cambiar rápidamente la instancia de datePicker para que esté en línea y luego volver a cambiarla sin tener que cambiar el interno de datepicker, pero es una solución muy hacky.

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 3

Como referencia, y como la gente me ha preguntado esto por correo. He aquí un trozo de código que necesita ser añadido a timepicker.js:

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

Buena suerte en conseguir que funcione en su sitio!

Answer 4

Siguiendo con lo que sugirió Emil, encontré una manera más fácil y más fácil de modificar el widget para admitir un widget que no cierra en el evento seleccionado.

En primer lugar, he añadido otra propiedad a los valores predeterminados de diccionario en el widget:

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

En segundo lugar, encontramos esta declaración en el método _selectDate:

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

Y cambiar la condición de ser como este :

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

Pruébalo, está funcionando para mí. Lo hice sobre la versión de JQuery UI 1.8.5.

Answer 5

Genial, si está utilizando jquery-ui-1.8.5.custom.min.js y jquery-ui.multidatespicker.js, puede modificar jquery-ui-1.8.5.custom.min.JS: de:

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

en:

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

Answer 6

bien esta solución alternativa sucia ... pero se funciona para mí ... incluso con showButtonPanel: verdadero

$(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 7

Debe anular nativa función JS:

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

Y añada opción apropiada para selector de fecha de configuración, como ejemplo:

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

Answer 8

Aquí es una solución:

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 9

¿Por qué todos los comentarios proporcionan una solución alternativa? se straigtfarword:

utilizar el calendario en línea con altField :)

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

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

cheque este violín: http://jsfiddle.net/menocomp/y2s662b0/1/