it-swarm.com.de

So aktivieren Sie Javascript für eine Datumsauswahl in JHTML :: _ calendar

Ich verwende den folgenden Code, um einen Kalender in meinem Formular anzuzeigen.

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

Ich muss ein onChange- oder onDateSelect-Javascript (jQuery) implementieren, um einen Ajax-Prozess auszuführen.

Versuchte den folgenden Code

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

Dieser Code funktioniert nur, wenn ich das Datum manuell in das Textfeld eingebe. Es wird nicht ausgelöst, wenn ich das Datum aus dem Popup auswähle.

5
Malaiselvan

Dies wird direkt in Core Joomla unterstützt, ab Version 3.8.5.

JHTML::calendar akzeptiert fünf Parameter, den Wert (Datum/Uhrzeit), den Elementnamen, die Element-ID, das Datum/Uhrzeit-Format und Attribute. Das attributes-Element ist ein assoziatives Array und akzeptiert ein Attribut 'onchange', das bei jeder Änderung der Datums- oder Zeitauswahl ausgelöst wird.

Für Ihr Beispiel würden Sie etwas verwenden wie:

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

Das einzige, mit dem ich Probleme hatte, war, die Anführungszeichen um die Zeichenfolge, die wiedergegeben wurde, korrekt zu umgehen.

2
Dom

Sie können dieses Verhalten mit einer Problemumgehung erreichen (Testen von Klicks an Popup-Kalendertagen):

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

Dies prüft automatisch, ob .daysrow (die Klasse einschließlich aller Tage des Popup-Kalenders) angeklickt wurde. Sie müssen nur überprüfen, ob der Wert tatsächlich mit jQuery("#inputid").val() geändert wurde.

1
Kitase88

Wenn Sie einen Kalender mit xml JForm und JFormField rendern, können Sie laut Dom so etwas schreiben, obwohl ich es in Joomla-Dokumenten nicht gefunden habe:

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

In onchange können Sie das gesamte Kalenderfeld mit this übergeben, damit Javascript es verwenden kann, falls es benötigt wird:

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