JQuery Datepicker, no se puede activar el evento onSelect manualmente.

Question

Estoy usando jquery's datepicker, donde una lista de elementos se completa desde una llamada ajax cada vez que se elige una fecha de un objeto datepicker en línea. La secuencia de comandos funciona perfectamente, excepto que no puedo activar un evento onSelect para rellenar mi lista inicial de elementos.

Pude solucionar este problema rellenando la lista inicialmente usando php, pero realmente me gustaría evitar esto.

$(document).ready(function(){ 

     //create date pickers 
    $("#date_calendar").datepicker(
    { 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'yy-mm-dd', 
     defaultDate: $.datepicker.parseDate("y-m-d", $('#date').val()), 
     onSelect: function(dateText, inst) 
      { 
       alert('onSelect triggered! Yay!'); 
       $('#date').val($.datepicker.formatDate("yy-mm-dd", $('#date_calendar').datepicker('getDate'))); 

       // Ajax for populating days when selected 
       $.post(
        "server_requests/show_day.php", 
         { 
         date: $('#date').val(), 
         user_id: $('#user_id').val() 
         }, 
        function(data) 
        { 
         //return function 
         $('#my_day_tasks').html(data.resultTable); 
        }, 
        "json" 
       ); 
      } 
    }).disableSelection(); 

    $("#date_calendar").trigger('onSelect'); 

}); 

Cualquier ayuda se agradece :)

Answer 1

no pudiste refactor que a una función de su propia, que se vuelve a utilizar? Estrictamente hablando, un selector de fecha no es realmente lo que sucede en la carga de la página. Solo quiere hacer exactamente lo mismo que sucede cuando se selecciona efectivamente el marcador de fecha.

function populateList(dateText, inst) 
{ 
    alert('alert test'); 
    $('#date').val($.datepicker.formatDate("yy-mm-dd",$('#date_calendar').datepicker('getDate'))); 

    // Ajax for populating days when selected 
    $.post("server_requests/show_day.php", 
     { 
      date: $('#date').val(), 
      user_id: $('#user_id').val() 
     }, 
     function(data) 
     { 
      //return function 
      $('#my_day_tasks').html(data.resultTable); 
     }, 
     "json" 
    ); 
} 

$(document).ready(function(){ 
    //create date pickers 
    $("#date_calendar").datepicker(
    { 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'yy-mm-dd', 
     defaultDate: $.datepicker.parseDate("y-m-d", $('#date').val()), 
     onSelect: populateList 
    }).disableSelection(); 

    // i'm not bothering to pass the input params here, because you're not using them anyway 
    populateList(); 

}); 

Answer 2

Usted podría intentar algo como esto -

$(document).ready(function(){ 
    //when page loads      
    SetDateTime(null); 
    //create date pickers 
    $("#date_calendar").datepicker(
    { 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'yy-mm-dd', 
     defaultDate: $.datepicker.parseDate("y-m-d", $('#date').val()), 
     onSelect: function(dateText, inst) 
      { 
       SetDateTime(dateText); 
      } 
    }).disableSelection(); 

    $("#date_calendar").trigger('onSelect'); 
}); 

function SetDateTime(selectedDate) 
{ 
    if(selectedDate == null) 
    { 
     //get todays date 
     var dateNow = new Date(); 
     //if its a single digit day, add a zero before it 
     var sDay = dateNow.getDate().toString(); 
     if(sDay.length == 1) 
     { 
      sDay = "0" + sDay; 
     } 
     selectedDate = dateNow.getFullYear() + "-" + (dateNow.getMonth() + 1) + "-" + sDay; 

     //load timetable 
     ShowDay(selectedDate); 
    } 
    else 
    { 
     var ds = selectedDate.split("-"); 

     //load timetable 
     ShowDay(selectedDate); 
    } 
} 

function ShowDay(dateToday) 
{ 
     alert('onSelect triggered! Yay!'); 
     $('#date').val($.datepicker.formatDate("yy-mm-dd", $('#date_calendar').datepicker('getDate'))); 

     // Ajax for populating days when selected 
     $.post(
      "server_requests/show_day.php", 
       { 
       date: dateToday, 
       user_id: $('#user_id').val() 
       }, 
      function(data) 
      { 
       //return function 
       $('#my_day_tasks').html(data.resultTable); 
      }, 
      "json" 
     ); 
} 

Answer 3

yo estaba tratando de hacer casi lo mismo, pero en mi caso tengo que citas de calzado en la carga y no en la selección.

Aunque esto no es necesario para su solución, me gustaría agregar mi solución porque podría ayudar a otros que quieran hacer lo mismo con la carga.

he modificado los jquery.ui.datepicker.mobile.js para resaltar días con citas con beforeShowDay, nombramiento de carga onSelect etc. Simplemente puede inicializar sus citas añadiendo las siguientes líneas en la parte inferior de la función de reescritura datepicker:

//rewrite datepicker 
$.fn.datepicker = function(options){ 

    // ... all the options and event stuff 

    function initAppointments() { 
     // select the 'selected' days to trigger the onSelect event# 
     // and initalize the appointments within the event handler 
     $(".ui-datepicker-calendar a.ui-state-active", dp).trigger('click'); 
     updateDatepicker(); 
    } 

    //update now 
    updateDatepicker(); 

    // and on click 
    $(dp).click(updateDatepicker); 
    $(dp).ready(initAppointments); // new 

    //return jqm obj 
    return this; 
}; 

Answer 4

Así es como resolví el mismo problema. Simplemente registre un evento con el código que desea llamar, luego llame a ese evento desde el método onSelect dentro de datepicker y luego llame al mismo evento en cualquier momento que lo desee.

$(document).ready(function(){ 

    // Onselect event registration 
    $("#date_calendar").bind("datepickeronSelect", function(){ 

     alert("onSelect called!"); 

    }) 

    //create date pickers 
    $("#date_calendar").datepicker(
    { 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'yy-mm-dd', 
     defaultDate: $.datepicker.parseDate("y-m-d", $('#date').val()), 
     onSelect: function(dateText, inst) 
     { 
      $("#date_calendar").trigger("datepickeronSelect"); 
     } 
    }).disableSelection().trigger("datepickeronSelect"); 
}); 

Answer 5

hay otra solución para saber cuándo seleccionar una fecha.

$(".uc_datepicker :text").datepicker(); 
$(".uc_datepicker :text").click(function() { 
    $(".ui-datepicker-calendar a").click(function() { 
     alert("date selected"); 
    }); 
}); 

Answer 6

$('.ui-datepicker-current-day').click(); 

Answer 7

La respuesta aceptada no era algo que pudiera utilizar, porque estaba usando código común que añade la funcionalidad de tecla de acceso directo a todas las datepickers en mi aplicación web (para ajustar el valor de hoy, 1 día 1 mes, etc.), y quería asegurarse de que onselect se llamara para validar el valor de fecha que se calculó con la tecla de acceso rápido.

Lo tomé del código fuente del archivo datepicker.js. Tenga en cuenta que el this debe reemplazarse con su elemento datepicker. En mi caso, estaba llamando esto desde un evento keydown.

// this is SUCH a hack. We need to call onselect to call any 
// specific validation on this input. I stole this from the datepicker source code. 
var inst = $.datepicker._getInst(this), 
onSelect = $.datepicker._get(inst, "onSelect"); 
if (onSelect) { 
    dateStr = $.datepicker._formatDate(inst); 
    onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); 
} 

Answer 8

Esto es lo que se me ocurrió y parece ser la mejor solución:

var inst = $.datepicker._getInst($("#date")[0]); 
$.datepicker._get(inst, 'onSelect').apply(inst.input[0], [$("#date").datepicker('getDate'), inst]); 

y funciona como un encanto