web-dev-qa-db-fra.com

Comment activer javascript sur une sélection de date sur JHTML :: _ calendar

J'utilise le code ci-dessous pour afficher un calendrier dans mon formulaire.

echo JHTML::calendar("", "timetable_slot_date", "id_timetable_slot_date")

Ce dont j'ai besoin, c'est d'implémenter un javascript (jQuery) onChange ou onDateSelect pour effectuer certains processus Ajax.

Essayé le code ci-dessous

jQuery('#id_timetable_slot_date').change(function() { alert('changed') });

Ce code ne fonctionne que si je saisis manuellement la date dans la zone de texte. Cela ne se déclenche pas lorsque je sélectionne la date dans la fenêtre contextuelle.

joomla-3.xjquerycalendar
5
Malaiselvan

Ceci est supporté directement dans le noyau Joomla, à la location dans la version 3.8.5.

JHTML::calendar prend cinq paramètres, la valeur (date/heure), le nom de l’élément, son identifiant, son format et ses attributs. L'élément attributs est un tableau associatif et accepte un attribut 'onchange', qui est déclenché chaque fois que le sélecteur de date ou d'heure est modifié.

Pour votre exemple, vous utiliseriez quelque chose comme:

echo JHTML::calendar( 
    "", 
    "timetable_slot_date", 
    "id_timetable_slot_date", 
    "%Y-%m-%d",
    array('onChange'=>'alert(\'hello\');')
);

Le seul problème avec lequel j'ai eu des problèmes était d'échapper correctement aux guillemets de la chaîne en écho.

2
Dom

Vous pouvez obtenir ce problème avec une solution de contournement (test des clics sur des jours calendaires contextuels):

jQuery(".icon-calendar").click(function(){
    jQuery("body").on("click",".daysrow",function(){
      /* Check input values and do stuff */
    });
});

Ceci vérifiera de façon dinamonique si .daysrow (la classe incluant tous les jours du calendrier contextuel) a été cliqué, il vous suffit de vérifier si la valeur a été réellement modifiée avec jQuery("#inputid").val()

1
Kitase88

En continuant avec la réponse de Dom, si vous rendez un calendrier à l'aide de xml JForm et JFormField, vous pouvez écrire quelque chose comme ceci, même si je ne pouvais pas le trouver dans les documents Joomla:

<field name="date" type="calendar" default="NOW" label="COM_EXAMPLE_FORM_LBL_DATE" 
    description="COM_EXAMPLE_FORM_DESC_DATE" hint="COM_EXAMPLE_FORM_LBL_DATE"
    format="%Y-%m-%d %H:%M:%S" showtime="true" class="example_calendar form-control"
    onchange="calendarValueChange(this)"/>

Dans onchange, vous pouvez transmettre tout le champ de calendrier à l'aide de this pour que Javascript puisse l'utiliser, au besoin:

function calendarValueChange(el) {
  // with jQuery
  if (!jQuery(el).val().length) {
    alert("Calendar value is empty!");
  }
  // without jQuery
  if (!el.value.length) {
    alert("Calendar value is empty!");
  }
}
0
mavrosxristoforos