Per Javascript Datei anhand von gewählten Datum einbinden

Moin zusammen,
ich bin leider im Thema Javascript so gar nicht beheimatet, bräuchte hier aber etwas, vielleicht kann mir hier wer mit einem Denkanstoß oder gar einer fertigen Datei helfen

Ich habe ein Script gefunden und leicht angepasst, dass mir per Javascript eine XML Datei in eine HTML Table lädt.
Da die XML einen Timestamp im Dateinamen trägt und täglich eine neue XML Datei generiert wird, würde ich das Script gerne so anpassen, dass man in der HTML Datei vorab den Tag, den Monat und das Jahr auswählen kann und dann die XML Datei mit passendem Timestamp geladen wird.
(Entweder mit 3 Dropdown Feldern für Tag, Monat und Jahr oder noch besser ein Kalender in dem man das Datum auswählen kann, falls das nicht zuviel Arbeit ist.)

Aktuell wird nur eine daten.xml geladen später soll es dann eine daten-yymmdd.xml sein.
(Beispiel für das heutige Datum: daten-190522.xml)

Der aktuelle Code lautet wie folgt:

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<button type="button" onclick="loadXMLDoc()">Daten laden</button>  
<br><br>
<table id="tabelle"></table>  

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "daten.xml", true);  
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Mitarbeiter</th><th>Loginname</th><th>Uhrzeit</th></tr>";  
  var x = xmlDoc.getElementsByTagName("Datensatz");  
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +  
    x[i].getElementsByTagName("Mitarbeiter").childNodes.nodeValue +  
    "</td><td>" +  
	x[i].getElementsByTagName("Loginname").childNodes.nodeValue +  
    "</td><td>" +  
    x[i].getElementsByTagName("Uhrzeit").childNodes.nodeValue +  
    "</td></tr>";  
  }
  document.getElementById("tabelle").innerHTML = table;  
}
</script>

</body>
</html>

Schon mal Danke für die Hilfe.

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 454372

Url: https://administrator.de/contentid/454372

Ausgedruckt am: 24.11.2024 um 05:11 Uhr

2 Kommentare

Neuester Kommentar

Hallo!

Dieses Beispiel zeigt, wie du ein Datum auswählen kannst.

<script>
function get_Date()
{
var Datum=new Date(document.getElementById('Datum_Auswahl').value);  
alert (Datum);
}
</script>

<input type='date' id='Datum_Auswahl' onChange='get_Date()' >  

Das Datum wird in die gleichnamige Variable geschrieben. Jetzt musst du nur noch das Format anpassen (zB. mittels https://momentjs.com/) und dir einen Sting basteln, der deiner Dateisyntax entspricht.

Gruß
eisbein

Danke, das hat mir den richtigen Denkanstoß gegeben auch wenn meine Lösung nun anders aussieht.

Hatte noch ein wenig recherchiert und dadurch erst herausgefunden, dass HTML5 eine Datumsauswahl als Form anbietet und das gar nicht per JS gelöst wird.

Dann hab ich noch ein JS gefunden, dass den heutigen Tag schon mal in der Datumsauswahl Form als default Value ausspuckt.

momentjs hab ich mir dann gespart, hab mir das Krafmuschel Script, dass mir meine XML erzeugt umgeschrieben, damit die Dateien einfach schon das passende Datumsformat haben, dass JS benutzt und ich hier nicht das Datumsformat über JS noch anpassen muss.

Durch das JS für den default Value war auch schon eine variable mit dem Datum vorhanden die ich dann nur noch in den String packen musste.

Date Form und JS für den default Value:

<input type="date" name="Datum" id="theDate">  

<script>
var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;  
if (day < 10) day = "0" + day;  

var today = year + "-" + month + "-" + day;         
document.getElementById("theDate").value = today;  
</script>

Anpassung des String:

  xmlhttp.open("GET", "login-" + theDate.value + ".xml", true);  

kompletter Code:

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<input type="date" name="Datum" id="theDate">  

<script>
var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;  
if (day < 10) day = "0" + day;  

var today = year + "-" + month + "-" + day;         
document.getElementById("theDate").value = today;  
</script>

<button type="button" onclick="loadXMLDoc()">Daten laden</button>  
<br><br>
<table id="tabelle"></table>  

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "login-" + theDate.value + ".xml", true);  
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Mitarbeiter</th><th>Loginname</th><th>Uhrzeit</th></tr>";  
  var x = xmlDoc.getElementsByTagName("Datensatz");  
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +  
    x[i].getElementsByTagName("Mitarbeiter").childNodes.nodeValue +  
    "</td><td>" +  
	x[i].getElementsByTagName("Loginname").childNodes.nodeValue +  
    "</td><td>" +  
    x[i].getElementsByTagName("Uhrzeit").childNodes.nodeValue +  
    "</td></tr>";  
  }
  document.getElementById("tabelle").innerHTML = table;  
}
</script>

</body>
</html>