9
votes

JQuery DatePicker, ne peut pas déclencher manuellement l'événement de l'événement!

J'utilise DatePicker de JQuery, où une liste d'articles est remplie d'un appel AJAX à chaque fois qu'une date est choisie à partir d'un objet DatePicker en ligne. Le script fonctionne parfait, sauf que je ne peux pas déclencher un événement onSelect pour renseigner ma liste initiale d'articles.

Je pouvais contourner ce problème en peuplant la liste initialement en utilisant PHP, mais j'aimerais vraiment éviter cela. xxx

toute aide est appréciée :)


0 commentaires

9 Réponses :


13
votes

Ne pouviez-vous pas simplement refroidir cela à une fonction de son propre, que vous réutilisez? Strictement parlant, une sélection de DatePicker n'est pas vraiment em> ce qui se passe sur la charge de la page. Vous voulez juste faire exactement la même chose qui se passe lorsque la datePicker est bien sélectionnée.

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

});


4 commentaires

Vous savez ... Parfois, vous regardez quelque chose si fort que vous deviendrez stupide :) Cela fait beaucoup trop de sens. Mille mercis!


Cela ne fonctionne que si vous n'avez qu'un seul salepicker


J'ai déjà eu une fonction distincte comme si vous avez mentionné ici, mais d'une manière ou d'une autre ne pensait même pas à l'appeler manuellement. Wow. Merci pour votre observation évidente et extrêmement utile!


@ ogc-nick juste envoyer le long de l'identifiant lorsque vous appelez la fonction et utilisez-le dans la fonction



3
votes

Vous pouvez essayer quelque chose comme ça -

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


1 commentaires

4 indentement de l'espace, ou appuyez sur le bouton '101010', pour le format de code.



1
votes

J'essayais de faire presque la même chose, mais dans mon cas, je dois faire des rendez-vous sur la charge et non sur la sélection.

Bien que cela ne soit pas nécessaire pour votre solution, j'aimerais ajouter ma solution parce que Cela pourrait aider les autres qui veulent faire la même chose sur la charge.

J'ai modifié le jquery.ui.datepicker.mobile.js pour mettre en évidence des jours avec des rendez-vous avec Beforeshowday < / forte>, rendez-vous de chargement surNselect etc. Vous pouvez simplement initialiser vos rendez-vous en ajoutant les lignes suivantes au bas de la fonction de réécriture DatePicker: xxx


0 commentaires

3
votes

Voici comment j'ai eu le même problème. Enregistrez simplement un événement avec le code que vous souhaitez appeler, puis appelez cet événement à partir de la méthode OnSélectionnez DatePicker, puis appelez ce même événement à toute autre heure que vous souhaitez.

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


0 commentaires

3
votes

Il existe une autre solution pour déterminer lorsqu'une date SELECT.

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


0 commentaires

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

1 commentaires

C'était la méthode que j'utilisais au début, mais elle n'est pas fiable lors de l'appelant la méthode "Sedate" avec une date qui me conduit à un mois différent. Dans ce cas, l'utilisation de la solution de David a fonctionné, et c'était l'ensemble le plus fiable.



1
votes

La réponse acceptée n'était pas quelque chose que je pourrais utiliser, car j'utilisais un code commun qui a ajouté une fonctionnalité de raccourci racis de rachat sur tous les pickers de mon application Web (pour définir la valeur à aujourd'hui, +1 jour, +1 mois, etc.), etc.) et Voulait s'assurer que OnSelect a été appelé à valider la valeur de la date calculée avec la touche de raccourci.

J'ai pris cela à partir du code source du fichier DatePicker.js. Remarque Thiat Ce doit être remplacé par votre élément DatePicker. Dans mon cas, j'appelais cela à partir d'un événement . xxx


1 commentaires

Pensez que vous méritez le +1 sur Adrianpop car votre réponse était bien plus d'un an avant le sien et que le vôtre est plus robuste. La vôtre a également la mention du formatDATE, qui est nécessaire pour le premier paramètre de la fonction OnSelect. Cependant, vous auriez vraiment dû définir ce que "ceci" fait référence. Vous devriez nous faire savoir que c'est l'élément DOM de la boîte de saisie



4
votes

Voici ce que j'ai proposé et semble être la meilleure solution: xxx

et cela fonctionne comme un charme


2 commentaires

Cela devrait être une réponse.


Ceci est en fait incorrect, $ ("# date"). DatePicker ('GetDate') vous donne l'objet de date, mais le premier paramètre est censé être la chaîne de date.



0
votes

J'utilise un autre moyen, déclenche 2 événements

  1. setDate JQuery ('# My-My-Calendar'). DatePicker ("Setdate", "09/29/2020")
  2. Trigger Cliquez sur l'événement JQuery ('# My-My-Calendar .ui-State-actif'). Trigger ("Cliquez sur")

0 commentaires