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. p> toute aide est appréciée :) p> p>
9 Réponses :
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();
});
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 code> code> lorsque vous appelez la fonction et utilisez-le dans la fonction
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" ); }
4 indentement de l'espace, ou appuyez sur le bouton '101010', pour le format de code.
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. P>
J'ai modifié le jquery.ui.datepicker.mobile.js strong> pour mettre en évidence des jours avec des rendez-vous avec
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"); });
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"); }); });
$('.ui-datepicker-current-day').click();
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.
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 code> doit être remplacé par votre élément DatePicker. Dans mon cas, j'appelais cela à partir d'un événement code> code>. P>
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
Voici ce que j'ai proposé et semble être la meilleure solution: et cela fonctionne comme un charme p> p>
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.
J'utilise un autre moyen, déclenche 2 événements p>
JQuery ('# My-My-Calendar'). DatePicker ("Setdate", "09/29/2020") CODE> LI>
- Trigger Cliquez sur l'événement
JQuery ('# My-My-Calendar .ui-State-actif'). Trigger ("Cliquez sur") CODE> LI>
ol>