jQuery ui - datepicker prevenir la actualización onSelect

Question

Estoy usando jQuery ui Datepicker para mostrar un calendario en línea anual lleno de "fechas especiales" (con colores). Esto es para permitir a los usuarios agrupar fechas especiales seleccionando un rango y algunos otros detalles.

$('#calendar').datepicker({ 
    ... 
    , onSelect: function (selectedDate, inst) { 
     $('.date_pick').toggleClass('focused'); 
     if ($('.date_pick.end').hasClass('focused')) { 
     $('.date_pick.end').val(''); 
     } 
     # inst.preventDefault() ? <- not a function 
     # inst.stopPropagation() ? <- not a function 
     # return (false) ? <- calendar refreshes anyway 
    } 
    ... 
}); 

También estoy usando qtip para mostrar los detalles en cada fecha

Mi problema es cuando hago clic en el calendario, se vuelven a cargar por entero, por lo que perder mi qtips.

Preferiría no utilizar live() con qtip porque no me gusta el comportamiento.

También preferiría que el calendario no se actualice cada vez que hago clic en él (pero esto no parece posible de todos modos), pero probablemente ya no pueda volver a destacar mi selección.

¿Tiene alguna sugerencia para mis problemas?

Answer 1

que estaba teniendo un problema similar. Estaba agregando botones personalizados en la parte inferior del selector de fecha (usando $ (id) .append), pero cuando seleccionaba una fecha el datepicker se actualizaría y destruiría.

Esta es la función de selección de fecha para el selector de fechas en la biblioteca jquery-ui:

_selectDate: function(id, dateStr) { 
    ... 
    if (onSelect) 
     onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); 
    ... 
    if (inst.inline) 
     this._updateDatepicker(inst); 
    ... 
}, 

Como se puede ver, la función de llamada por primera vez el evento onSelect, y luego llama _updateDatepicker (que es lo que vuelve a dibujar el formulario) si inst.inline es verdadero.

Esta es mi solución para prevenir la forma de refrescante mientras se mantiene la funcionalidad de selección:

$("#cal_id").datepicker({ 
    onSelect: function(date, inst){ 

    //This is the important line. 
    //Setting this to false prevents the redraw. 
    inst.inline = false; 

    //The remainder of the function simply preserves the 
    //highlighting functionality without completely redrawing. 

    //This removes any existing selection styling. 
    $(".ui-datepicker-calendar .ui-datepicker-current-day").removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active"); 

    //This finds the selected link and styles it accordingly. 
    //You can probably change the selectors, depending on your layout. 
    $(".ui-datepicker-calendar TBODY A").each(function(){ 
     if ($(this).text() == inst.selectedDay) { 
     $(this).addClass("ui-state-active"); 
     $(this).parent().addClass("ui-datepicker-current-day"); 
     } 
    }); 
    } 
}); 

Answer 2

tengo casi el mismo problema, como algunos other people, tengo una especie de una solución .... pero no es justo:

$('#calendar').datepicker({ 
..., 
onSelect: function (selectedDate, inst) 
{ 
    myFunction(selectedDate, inst); 
} 
}); 
function myFunction(selectedDate, inst) 
{ 

    $('.date_pick').toggleClass('focused'); 
    if ($('.date_pick.end').hasClass('focused')) { 
    $('.date_pick.end').val(''); 
    } 
    inst.preventDefault(); # aa; works too, but writing aa; is going too far xD 
} 

No es perfecto, pero funciona ... I' Trataremos de hacer que funciona muy bien, hasta entonces ...

EDIT: solucionado añadiendo:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 

Answer 3

establecer inst.inline en false en el interior del onselect no va a funcionar. lugar intentar algo así como

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

Answer 4

Si lo que desea es seleccionar un solo día, entonces usted tiene que especificar el mes y el año en jQuery:

$(".ui-datepicker-calendar TBODY [data-month='"+inst.selectedMonth+"'][data-year='"+inst.selectedYear+"'] A").each(function(){ 

Answer 5

En el caso de tener algunos datepickers en el página Yozomiri ejemplo fallará. Que debe hacer:

 onSelect: function(date, inst){ 
      //This is the important line. 
      //Setting this to false prevents the redraw. 
      inst.inline = false; 

      //The remainder of the function simply preserves the 
      //highlighting functionality without completely redrawing. 

      //This removes any existing selection styling. 
      $(this).find(".ui-datepicker-calendar .ui-datepicker-current-day").removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active"); 

      //This finds the selected link and styles it accordingly. 
      //You can probably change the selectors, depending on your layout. 
      $(this).find(".ui-datepicker-calendar TBODY td").each(function(){ 
       if ($(this).find('a').text() == inst.selectedDay && $(this).data('month') == inst.selectedMonth) { 
       $(this).find('a').addClass("ui-state-active"); 
       $(this).addClass("ui-datepicker-current-day"); 
       } 
      }); 
     } 

https://jsfiddle.net/g2bgbdne/3/