JQuery Datepicker in individuellem Template

[Hasen]

Hallo Gemeinde,

ich habe für einen Kunden eine EFG-Formular gebastelt. Darin soll er u.a. ein Datum eingeben. Um das für ihn zu vereinfachen, habe ich für das entsprechende Textfeld ein individuelles Template (basierend auf "form-textfield") verwendet, indem ich <script>-Code entsprechend dieser Anleitung https://jqueryui.com/datepicker/ angefügt habe:

...
<input type="<?= $this->type ?>" name="<?= $this->name ?>" id="datepicker_<?= $this->id ?>" class="text<?php if ($this->hideInput) echo ' password'; ?><?php if ($this->class) echo ' ' . $this->class; ?> hasDatepicker" value="<?= specialchars($this->value) ?>"<?= $this->getAttributes() ?> type="text">

...

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
	  $(function(){
   		$("#datepicker_<?= $this->id ?>").datepicker();
  	});

</script>
<?php $this->endblock(); ?>

  

Vieles probiert, will aber ums verrecken nicht funktionieren. Was die Verwirrung bei mir noch gesteigert hat, ist die Tatsache, dass andere JQuery-Widgets (wie Autocomplete etc.) problemlos auf diese Weise funktionieren. Selektiere ich das übergeordnete <div> statt dem <input> so wird der Datepicker fest angehängt. Für das gedachte Inputfeld funktionierts nicht, egal was ich mache.
Bevor die Frage aufkommt, die Calendarfield-Extensions sind hier ausnahmsweise keine Option. Verwendete Contao-Version 3.5.17.
Irgendwelche Vorschläge, eigene Erfahrungen?

[Spooky]

Poste einen Link zur Seite.

[Hasen]

Poste einen Link zur Seite.

Geht leider nicht, liegt auf einem internen Testserver.

[Hasen]

Um das noch etwas zu spezifizieren, wenn ich mir den Seitenquelltext anschaue, wird für das Ziel-<input>-Feld überhaupt kein Event-Listener gebunden, quasi so, als würde das Feld nicht getroffen, weil ID oder Klassen-Selektor falsch angegeben. Allerdings ist das nur bei Datepicker so. Verwende ich für dasselbe Feld bspw. das Autocomplete-Widget nach diesem Beispiel https://jqueryui.com/autocomplete/ funktioniert alles wie es soll. Dann werden auch die nötigen Event-Listener an das Feld gebunden. Nur bei $(SELEKTOR).datepicker() funzt es nicht... ich verstehe es einfach nicht.

[Spooky]

Dann kann man nur raten. Auffällig ist, dass du bspw. jQuery selbst nochmal eingebunden hast. Evt. liegt nun ein Konflikt vor. Das Wrapping der JavaScript Funktion ist auch nicht korrekt. Näheres findest du evt. in der JavaScript Konsole.

[Hasen]

Dann kann man nur raten. Auffällig ist, dass du bspw. jQuery selbst nochmal eingebunden hast. Evt. liegt nun ein Konflikt vor.

Dann dürften ja theoretisch auch die anderen Widgets nicht funktionieren. Allerdings werd ich auch das nochmal durchtesten.

Das Wrapping der JavaScript Funktion ist auch nicht korrekt. Näheres findest du evt. in der JavaScript Konsole.

Inwiefern?

[Spooky]

Dann dürften ja theoretisch auch die anderen Widgets nicht funktionieren.

Nicht unbedingt.

Inwiefern?

Besser wäre

<script>
(function($){
	$("#datepicker_<?= $this->id ?>").datepicker();
})(jQuery);
</script>

[hase666]

Das war für mich die Lösung des Problems:
Speziell für Inputfelder mit jQuery Ui Datepicker ein Template anlegen.

Umschließende DIVs müssen entfernt werden, damit der Datepicker an Input-Feld und nicht an das DIV gebunden wird.
Sonst erscheint der Kalender immer inline und nicht im Overlay bei Klick auf Input.

Ich hoffe, das hilft.

[Hasen]

@hase666

Ich werde das mal ausprobieren und Bescheid geben! Danke schonmal.

Am Wrappen liegt es btw nicht.