tag:forum.selfhtml.org,2005:/self Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. – SELFHTML-Forum 2023-03-14T16:15:21Z https://forum.selfhtml.org/self/2023/mar/12/es-soll-eine-js-variable-an-ein-html-input-feld-als-vorbelegung-ubergeben-werden/1806927#m1806927 Peter peter.hafenbrak@t-online.de 2023-03-12T19:03:23Z 2023-03-12T19:03:23Z Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. <p>Hallo liebe HTML- und js - Spezialisten.</p> <p>Ich möchte auf einer html-Seite für einen input-Tag einen Wert vorbelegen. Im Bereich <head> ermittle ich mit javascript das Datum, welches ich vorbelegen möchte. (Aktuelles Datum - 1 Tag) Mein Problem ist, wie bekomme ich die js-Variable dem html-input-value zugegwiesen.</p> <p>Anbei mein html-Seitencode:</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Google Chart parametriert durch flask<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">div linechart_material</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 20em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">form</span> <span class="token punctuation">{</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.gstatic.com/charts/loader.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token comment">/* Funktion um Tage von einem Datum abzuziehen oder zu addieren days kann deshalb positiv oder negativ sein */</span> <span class="token keyword">function</span> <span class="token function">addDaysToDate</span><span class="token punctuation">(</span><span class="token parameter">date<span class="token punctuation">,</span> days</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">var</span> res <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span><span class="token punctuation">;</span> res<span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> days<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> res<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> days_2_sub <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">let</span> date_act <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">,</span> date_start <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> date_act <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> date_start <span class="token operator">=</span> <span class="token function">addDaysToDate</span><span class="token punctuation">(</span>date_act<span class="token punctuation">,</span> days_2_sub<span class="token punctuation">)</span> <span class="token operator">**</span>date_start<span class="token operator">**</span> <span class="token operator">=</span> date_start<span class="token punctuation">.</span><span class="token function">toISOString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'T'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script <span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>label <span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"date"</span><span class="token operator">></span>Von <span class="token operator">:</span><span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"date"</span> name<span class="token operator">=</span><span class="token string">"day_from"</span> value<span class="token operator">=</span><span class="token operator">**</span>`<span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span>document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>date_start<span class="token punctuation">)</span><span class="token punctuation">;</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>`** /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Von :<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time_from<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>00:00:00<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>Also, es soll der Inhalt der js-Variablen date_start, sie hat das Format jjjj-mm-tt dem value von <input type="date" name="day_from" value= zugewiesen werden. Hardgecoded mit value="2023-03-11" funktioniert die Vorbelegung.</p> <p>Hat jemand das Wissen oder eine Idee?</p> <p>Vielen Dank schon Mal </p> https://forum.selfhtml.org/self/2023/mar/12/es-soll-eine-js-variable-an-ein-html-input-feld-als-vorbelegung-ubergeben-werden/1806929#m1806929 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-03-12T19:48:59Z 2023-03-12T19:48:59Z Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. <p>@@Peter</p> <blockquote> <p>Im Bereich <head> ermittle ich mit javascript das Datum, welches ich vorbelegen möchte.</p> </blockquote> <p>Das ist nicht gut, weil es das Rendern der Seite verzögert. Scripte sind am Ende des <code>body</code> gut aufgehoben.</p> <blockquote> <p>Anbei mein html-Seitencode:</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Von :<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>day_from<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>**`<script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>date_start<span class="token punctuation">)</span><span class="token punctuation">;</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>`** /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Von :<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time_from<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>00:00:00<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Die Eingabefelder sind nicht in einem Formular? Warum nicht?</p> <p>Und sie haben keine zugeordnete Beschriftung. Die Angabe im <code>for</code>-Attribut des <code>label</code>-Elements bezieht sich auf eine gleichnamige ID. Solche fehlen bei dir.</p> <p>Und zweimal „Von“ ist auch keine aussagekräftige Beschriftung. Da müsste schon „Datum“ bzw. „Uhrzeit“ mit dabeistehen.</p> <p>Sinnvoll wäre wohl eine Gruppierung in einem <code>fieldset</code> mit <code>legend</code>:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Startzeitpunkt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Datum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date type=<span class="token punctuation">"</span></span><span class="token attr-name">date"</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>day_from<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Uhrzeit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time type=<span class="token punctuation">"</span></span><span class="token attr-name">time"</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time_from<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>00:00:00<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> </code></pre> <hr> <blockquote> <p>Mein Problem ist, wie bekomme ich die js-Variable dem html-input-value zugegwiesen.</p> </blockquote> <p>Du musst dir das Eingebefeld im DOM raussuchen:</p> <pre><code class="block language-js"><span class="token keyword">const</span> dateInputElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'[name="day_from"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>oder – wenn das Element jetzt eine ID hat:</p> <pre><code class="block language-js"><span class="token keyword">const</span> dateInputElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#date'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Wenn das Eingabefeld in einem Formular wäre, müsste nicht erst gesucht werden; dann wäre es schon als <code class="language-js">document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span><span class="token operator"><</span>Name des Formulars<span class="token operator">></span><span class="token punctuation">.</span>elements<span class="token punctuation">.</span>day_from</code> verfügbar.</p> <p>Dem Element weist du den Wert als <code>value</code>-Eigenschaft zu:</p> <pre><code class="block language-js">dateInputElement<span class="token punctuation">.</span>value <span class="token operator">=</span> date_start<span class="token punctuation">;</span> </code></pre> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div> https://forum.selfhtml.org/self/2023/mar/12/es-soll-eine-js-variable-an-ein-html-input-feld-als-vorbelegung-ubergeben-werden/1806930#m1806930 Rolf B 2023-03-12T19:54:40Z 2023-03-12T19:54:40Z Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. <p>Hallo Peter,</p> <p><code><script>...</script></code> ist ein HTML Element. Ein solches kann nicht innerhalb eines Attributs eines anderen Elements (das input-Element) notiert werden. Wenn überhaupt, müsste dein script-Snippet das komplette HTML für das input-Element generieren.</p> <p>Das ist aber nicht die beste Idee.</p> <p>Besser ist es, mit Mitteln der DOM Programmierschnittstelle das input-Element herauszusuchen und ihm dann den gewünschten Wert zuzuweisen. Dafür gilt es mehreres zu beachten. Das mag jetzt kompliziert klingen, aber es sind die Grundlagen der Script-Organisation und des DOM Zugriffs, die hier benötigt werden.</p> <p>(1) Dein Script steht im head, wird also ausgeführt, wenn das DOM noch gar nicht aufgebaut ist. Ohne weiteres kannst Du aus diesem Script heraus also nicht auf ein input-Element zugreifen, das im body steht. Es gibt mehrere Ansätze, wie man das lösen kann</p> <ul> <li>Verschiebe das Script an das Ende des body</li> <li>Packe deinen Initialisierungscode in einen DOMContentLoaded Eventhandler. Unser Wiki-Artikel <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Ereignisverarbeitung" rel="nofollow noopener noreferrer">Ereignisverarbeitung</a> enthält einige Beispiele dazu.</li> <li>Gib dem Script das Attribut <code>defer</code>, dadurch wird es erst gestartet, wenn der Body fertig eingelesen ist. Das geht aber nur bei Scripten, deren Quelltext über ein src-Attribut von extern geladen wird.</li> <li>Mach aus dem Script ein Modul (type="module"). Dadurch gelten im Script leicht andere Regeln, aber type="module" bringt die defer-Eigenschaft mit und das Script wird erst ausgeführt, wenn das DOM aufgebaut ist.</li> </ul> <p>Der DOMContentLoaded Handler ist sozusagen die traditionelle Lösung. Aber die Lösungen 1, 3 und 4 sind deutlich einfacher.</p> <p>(2) Um das input-Element zu finden, könnstest Du die Methode <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/getElementsByName" rel="nofollow noopener noreferrer">document.getElementsByName()</a> verwenden. Das ist ein bisschen umständlich, weil das name-Attribut im DOM nicht eindeutig sein muss und Du deshalb von getElementsByName - wie der Name sagt - Element<strong>e</strong> zurückbekommst und das erste Element der Liste erstmal herausholen musst.</p> <p>Einfacher ist es, dem gewünschten Element eine ID zu geben - die muss eindeutig im DOM sein - und mit getElementById zuzugreifen.</p> <p>Alternativ kannst Du auch document.querySelector("[name=date_from]") verwenden, also einen Attribut-Selektor benutzen. Damit bekommst Du das erste Element mit diesem Namen. Das setzt deinerseits die Disziplin voraus, dass der Name eindeutig ist.</p> <p>(3) Um einem <code><input type="date"></code> Element ein Datum zuzuweisen, <em>kann</em> man dem Value eine passende Zeichenkette zuweisen. Diese muss dann entweder im lokalen Format sein (z.B. tt.mm.jjjj) oder im ISO-Format jjjj-mm-dd.</p> <p>Einfacher ist die Verwendung der Eigenschaft valueAsDate - der weist Du nämlich einfach das Date-Objekt zu.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> heute <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">const</span> gestern <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>heute<span class="token punctuation">.</span><span class="token function">getYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> heute<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> heute<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> datumVon <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"day_from"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> datumVon<span class="token punctuation">.</span>valueAsDate <span class="token operator">=</span> gestern<span class="token punctuation">;</span> <span class="token comment">// Die beiden letzten Zeilen könnte man auch zu einer zusammenfassen:</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"day_from"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>valueAsDate <span class="token operator">=</span> gestern<span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>day_from<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>day_from<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p>Das input-Element braucht die ID für den JavaScript-Zugriff und das name-Attribut, um als Form-Element zum Server geschickt werden zu können.</p> <p>Ein Hinweis am Rande:</p> <pre><code class="block language-js"> <span class="token keyword">let</span> date_act <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">,</span> date_start <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> date_act <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> date_start <span class="token operator">=</span> <span class="token operator">...</span><span class="token punctuation">;</span> </code></pre> <p>Es ist nicht sinnvoll eine Variable mit irgendeinem Wert zu initialisieren, wenn man ihr gleich danach einen anderen Wert zuweist. Da kann mann sich auch gleich mit dem richtigen Wert initialisieren, so wie ich das in meinem Vorschlag getan habe.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/12/es-soll-eine-js-variable-an-ein-html-input-feld-als-vorbelegung-ubergeben-werden/1806931#m1806931 Rolf B 2023-03-12T19:56:34Z 2023-03-12T19:56:34Z Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. <p>Hallo Gunnar,</p> <pre><code class="block bad language-js">dateInputElement<span class="token punctuation">.</span>value <span class="token operator">=</span> date_start<span class="token punctuation">;</span> </code></pre> <p>Bis auf diese Zeile 100% Zustimmung. Zum Thema valueAsDate siehe meinen Beitrag.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/12/es-soll-eine-js-variable-an-ein-html-input-feld-als-vorbelegung-ubergeben-werden/1806955#m1806955 Peter peter.hafenbrak@t-online.de 2023-03-13T10:58:18Z 2023-03-13T10:58:18Z Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. <p>Hallo Rolf, hallo Gunnar, vielen Dank für die schnelle Antwort und vor Allem auch für die umfassende Begründung und weiterführende Tips, ganz toll von Euch !! Werde es heute Abend gleich umsetzen. Eigentlich bin ich das erste Mal mit HTML und Javascript in Berührung gekommen, als ich mit einem Raspi und einem Sensor Daten aufgezeichnet und in einer DB gespeichert habe und nun die Daten eben auch noch im Browser visualisieren möchte. Da nur für den internen Gebrauch, dachte ich das geht mal so kurz .....</p> <p>Werde mich nun doch auch mit HTML und JS näher beschäftigen!</p> <p>Nochmals vielen Dank </p> <p>Peter</p> https://forum.selfhtml.org/self/2023/mar/12/es-soll-eine-js-variable-an-ein-html-input-feld-als-vorbelegung-ubergeben-werden/1806939#m1806939 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-03-12T21:52:17Z 2023-03-12T21:52:17Z Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. <p>@@Rolf B</p> <blockquote> <p>(3) Um einem <code><input type="date"></code> Element ein Datum zuzuweisen, <em>kann</em> man dem Value eine passende Zeichenkette zuweisen. Diese muss dann entweder im lokalen Format sein (z.B. tt.mm.jjjj) oder im ISO-Format jjjj-mm-dd.</p> </blockquote> <p>Nein, das stimmt nicht. Wo hast du das denn her? In der Spec kann ich nichts dergleichen finden.</p> <p>Dort ist beschrieben, was ein <strong><a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string" lang="en" rel="nofollow noopener noreferrer">valid-date-string</a></strong> ist. <code class="good">'2023-03-13'</code> ist einer, <code class="bad">'13.03.2013'</code> ist keiner.</p> <p>Dort steht auch, wie für <a href="https://html.spec.whatwg.org/multipage/input.html#date-state-(type=date)" rel="nofollow noopener noreferrer">Datum-Eingabefelder</a> der <strong lang="en">value sanitization algorithm</strong> aussieht: <em lang="en">“If the value of the element is not a valid date string, then set it to the empty string instead.”</em></p> <p>Und genauso verhalten sich auch Firefox, Safari und Chromia. <a href="https://codepen.io/gunnarbittersmann/pen/OJoQjep?editors=0011" rel="noopener noreferrer">Test</a></p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em>„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“</em><br> — @Grantscheam auf Twitter </div> https://forum.selfhtml.org/self/2023/mar/12/es-soll-eine-js-variable-an-ein-html-input-feld-als-vorbelegung-ubergeben-werden/1807010#m1807010 Peha01 peter.hafenbrak@t-online.de 2023-03-14T14:16:35Z 2023-03-14T14:16:35Z Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. <p>Hallo Rolf,</p> <p>ich hoffe es ist ok für Dich wenn ich mich nochmal zu meinem Problem direkt bei Dir melde.</p> <p>Also, habe Deinen Vorschlag heute umgesetzt. Heite ist der 14.03.2023 Beim debuggen in Chrome wird für gestern = Mo, 13.03.2023 angezeigt, aber in meinem <input type="date" id="day_from" name="day_from" /> wird als Vorbelegung der 12.03.2023 ausgegeben.</p> <p>Das kann doch nicht sein!!!!</p> <p>Anbei mein html-Code:</p> <pre><code class="block"><!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Google Chart parametriert durch flask</title> <style> div linechart_material { height: 20em; } form { margin-bottom: 2em; } </style> <script src="https://www.gstatic.com/charts/loader.js"></script> <script type="module"> /* Funktion um Tage von einem Datum abzuziehen oder zu addieren days kann deshalb positiv oder negativ sein */ const heute = new Date(); // let jahr = heute.getFullYear(); // let monat = (heute.getMonth() + 1); // let tag = (heute.getDate() - 1); let gestern = new Date(heute.getFullYear(), heute.getMonth(), heute.getDate() - 1); document.getElementById("day_from").valueAsDate = gestern; </script> </head> <body> <label for="date">Von :</label> <input type="date" id="day_from" name="day_from" /> <label for="time">Von :</label> <input type="time" id="time_from" name="time_from" value="00:00:00" /><br> </body> </html> </code></pre> <p>Kannst Du mir einen Tipp geben?</p> <p>Danke schon mal.</p> <p>Peter</p> https://forum.selfhtml.org/self/2023/mar/12/es-soll-eine-js-variable-an-ein-html-input-feld-als-vorbelegung-ubergeben-werden/1806945#m1806945 Rolf B 2023-03-13T07:28:21Z 2023-03-13T07:28:21Z Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. <p>Hallo Gunnar,</p> <blockquote> <p>Wo hast du das denn her?</p> </blockquote> <p>Ich muss gestern wohl besoffen gewesen sein. Ich bin überzeugt, ich hätte das ausprobiert und es hätte funktioniert. Heute dagegen geht's nicht.</p> <p>Also, ja, value muss YYYY-MM-DD bekommen. Oder YYYYY-MM-DD. Oder YYYYYY-MM-DD. Die Spec begrenzt es nicht, aber Chrome macht bei 275760-09-13 02:00:00 Schluss. Was einem Wert des Date-Objekts von 8'640'000'000'000'000ms entspricht. Oder der Sekundenzahl von 100 Millionen Tagen (ohne Schaltsekunden).</p> <p>Strange…</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/12/es-soll-eine-js-variable-an-ein-html-input-feld-als-vorbelegung-ubergeben-werden/1806958#m1806958 MudGuard http://www.andreas-waechter.de/ 2023-03-13T12:29:00Z 2023-03-13T12:29:00Z Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. <p>Hi,</p> <blockquote> <p>Also, ja, value muss YYYY-MM-DD bekommen. Oder YYYYY-MM-DD. Oder YYYYYY-MM-DD. Die Spec begrenzt es nicht, aber Chrome macht bei 275760-09-13 02:00:00 Schluss. Was einem Wert des Date-Objekts von 8'640'000'000'000'000ms entspricht. Oder der Sekundenzahl von 100 Millionen Tagen (ohne Schaltsekunden).</p> </blockquote> <p>da kann ich nur hoffen, daß mich das nicht so ereilt wie damals das Jahr-2000-Problem - da mußte ich einiges an Code anpassen.</p> <p>Evtl. wird das Renteneintrittsalter nicht so stark erhöht, daß mich das dann doch noch trifft … </p> <p>Ist ja schon in ca. 273 Jahrtausenden …</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2023/mar/12/es-soll-eine-js-variable-an-ein-html-input-feld-als-vorbelegung-ubergeben-werden/1807013#m1807013 Rolf B 2023-03-14T14:49:54Z 2023-03-14T14:49:54Z Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. <p>Hallo Peter,</p> <p>ich weiß, woran es liegt - aber ich überlege gerade noch an einer Lösung.</p> <p>Problem ist, dass das Date-Objekt seine Informationen als UTC-Zeit speichert. Wenn Du ein Date-Objekt mit "2023-03-13" erzeugst, dann ist das in Wahrheit "2023-03-13 00:00:00.000" lokaler Zeit und "2023-03-12 23:00:00.000" UTC Zeit. Sobald die Sommerzeit losgeht, ist es sogar "2023-03-12 22:00:00.000" UTC.</p> <p>Das input-Element übernimmt nicht das Datum der lokalen Zeit, sondern das Datum der UTC Zeit. Was doof ist.</p> <p>Ich muss jetzt gucken, wie Du ein Datum als UTC-Datum erzeugst. Für Deutschland dürfte es am einfachsten sein, das Date-Objekt mit Uhrzeit 12:00:00 zu erzeugen.</p> <pre><code class="block language-js"><span class="token keyword">let</span> gestern <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>heute<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> heute<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> heute<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Diese Lösung ist nicht für alle Länder tragfähig, aber in D schon.</p> <p>Ich habe gerade noch bei Stackoverflow einen interessanten Hack gefunden: Schwedisches Datum!</p> <pre><code class="block language-js"><span class="token keyword">let</span> gestern <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>heute<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> heute<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> heute<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>gestern<span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token string">"sv"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Ausgabe am 14.03.2023: "2023-03-13 00:00:00"</span> </code></pre> <p>Das schwedische Datumsformat ist YYYY-MM-DD, also ISO-ähnlich. d.h. auf diese Weise bekommst Du einen ISO Datumsstring ohne Timezone-Verfälschung. Den kannst Du dann dem value des input-Elements zuweisen.</p> <pre><code class="block language-js">inputElement<span class="token punctuation">.</span>value <span class="token operator">=</span> gestern<span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token string">"sv"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Schön ist anders, aber funktioniert </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/mar/12/es-soll-eine-js-variable-an-ein-html-input-feld-als-vorbelegung-ubergeben-werden/1807016#m1807016 Peha01 2023-03-14T16:15:21Z 2023-03-14T16:15:21Z Es soll eine js-Variable an ein html-Input-Feld als Vorbelegung übergeben werden. <p>Hallo Rolf, ganz lieben Dank für die schnelle Antwort </p> <p>Wäre ich nie draufgekommen </p>