javascript - parsedate - jquery datepicker formatdate

jQuery Datepicker: impide que se cierre el selector al hacer clic en una fecha

Question

Hola compañeros de stackoverflow: ers,

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

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

Cualquier ayuda para resolver este problema, o incluso punteros en la dirección correcta, se agradece.

Más información: Estoy usando los archivos provistos desde el enlace de descarga de Martins: 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

¿Por qué todos los comentarios proporcionan una solución? es palabra clave:

Usa el calendario en línea con altField :)

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

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

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

Answer 2

Aquí hay 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 3

Bueno, esta es una solución sucia ... pero funciona para mí ... incluso con 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

Debes anular la función js nativa:

 /* 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 agregue la opción apropiada a la configuración del selector de fecha, como ejemplo:

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

Answer 5

En lugar de cambiar la fuente, es mejor usar los eventos existentes

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

Answer 6

Genial, si estás usando jquery-ui-1.8.5.custom.min.js y jquery-ui.multidatespicker.js, puedes modificar el jquery-ui-1.8.5.custom.min.js: from:

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

dentro:

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

Answer 7

Para referencia, y desde que la gente me lo ha pedido por correo. Aquí hay un fragmento de código que debe agregarse 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 para que funcione en tu sitio!

Answer 8

Siguiendo con lo que Emil sugirió, encontré una forma más fácil y sencilla de modificar el widget para que sea compatible con un widget de no cierre en un evento seleccionado.

Primero, agregué otra propiedad a los valores predeterminados dictados en el widget:

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

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

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

Y cambia la condición para ser así:

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 JQuery UI 1.8.5.

Answer 9

Tendrás que hackear el selector de fechas tú mismo. Este es el código que utiliza. Si no está en línea, se ocultará cuando seleccione una fecha.

Podría 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 del selector de fechas, pero es una solución muy intrincada.

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;
}