JQuery डेटपिकर, ईवेंट को मैन्युअल रूप से चयन करें पर ट्रिगर नहीं कर सकता!

Question

मैं jquery के डेटपिकर का उपयोग कर रहा हूं, जहां किसी भी तारीख को किसी इनलाइन डेटपिकर ऑब्जेक्ट से चुनी जाने पर आइटम की एक सूची अजाक्स कॉल से पॉप्युलेट की जाती है। स्क्रिप्ट सही काम करता है सिवाय इसके कि मैं वस्तुओं की अपनी प्रारंभिक सूची को पॉप्युलेट करने के लिए एक ईवेंट पर ट्रिगर नहीं कर सकता।

मैं शुरू में PHP का उपयोग करके सूची को पॉप्युलेट करके इस समस्या को हल कर सकता हूं लेकिन मैं वास्तव में इससे बचना चाहूंगा।

$(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'); 

}); 

किसी भी मदद की सराहना की है :)

Answer 1

तुम सिर्फ अपने आप में एक समारोह है, जो आप पुन: उपयोग करने के लिए कि refactor नहीं सकते हैं? कड़ाई से बोलते हुए, डेटपिकर का चयन वास्तव में पृष्ठ लोड पर क्या होता है। आप बस वही काम करना चाहते हैं जो तब होता है जब डेटपिकर वास्तव में चुना जाता है।

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

आप कुछ इस तरह की कोशिश कर सकते -

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

मैं लगभग एक ही बात करने के लिए कोशिश कर रहा था, लेकिन मेरे मामले में मैं लोड पर जूता नियुक्तियों के लिए और चयन पर नहीं है।

हालांकि यह आपके समाधान के लिए आवश्यक नहीं है, लेकिन मैं अपना समाधान जोड़ना चाहता हूं क्योंकि यह उन लोगों की मदद कर सकता है जो लोड पर ऐसा करना चाहते हैं।

मैं jquery.ui.datepicker.mobile.js संशोधित beforeShowDay, लोड नियुक्ति onSelect आदि के साथ नियुक्तियों के साथ दिन उजागर करने के लिए आप बस तल पर निम्नलिखित लाइनों को जोड़कर अपने नियुक्तियों को प्रारंभ कर सकते हैं डेटपिकर रीराइटिंग फ़ंक्शन का:

//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

इस तरह मैं एक ही समस्या को पार करता हूं। बस उस कोड के साथ एक ईवेंट पंजीकृत करें जिसे आप कॉल करना चाहते हैं, फिर उस ईवेंट को डेटपिकर के अंदर चयन विधि से कॉल करें और फिर उसी ईवेंट को किसी अन्य बार कॉल करें जिसे आप चाहते हैं।

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

दिनांक चुनने पर पता लगाने के लिए एक और समाधान है।

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

स्वीकार किए जाते हैं जवाब है, कुछ मैं इस्तेमाल कर सकते हैं नहीं था, क्योंकि मैं आम कोड है कि मेरी वेब अनुप्रयोग में सभी datepickers पर हॉटकी कार्यक्षमता जोड़ा उपयोग कर रहा था (आज के लिए मूल्य निर्धारित करने के लिए, +1 दिन, +1 महीने, इत्यादि), और यह सुनिश्चित करना चाहता था कि हॉटसे के साथ गणना की गई तारीख मान को सत्यापित करने के लिए अचयनित किया गया था।

मैंने इसे datepicker.js फ़ाइल के स्रोत कोड से लिया। नोट थियेट this को आपके डेटपिकर तत्व से बदला जाना चाहिए। मेरे मामले में, मैं इसे 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

यहाँ मैं के साथ आया है और सबसे अच्छा समाधान लगता है:

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

और यह एक आकर्षण