• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Timestamp in Datum und Uhrzeit umwandeln

R

Rollimen

New member
Ich hoffe es ist kein Problem wenn ich mal noch ein weiteres Problem poste obwohl das letzte noch nicht behoben ist aber wenn ich mal wo hänge mach ich einfach mal an anderer Stelle weiter bis mir eine Lösung einfällt oder ich mit eurer Hilfe die Lösung finde.

Auch hier geht es mal wieder um eine "geklaute" Sache von Video2Brain die ich versuche für meine Zwecke umzuändern. Teilweise hat es ja schon geklappt aber jetzt hänge ich mal wieder und finde leider keine funktionierende Lösung.

Zum Problem:

Ich habe mir eine Seite für Notizen gemacht, dort gibt es eine textarea wo man seine Notizen eingeben kann und diese werden dann im localStorage gespeichert und oberhalb ausgegeben, das klappt auch soweit.

Als ID für den localStorage wird der aktuelle Timestamp verwendet. Das möchte ich gerne nutzen um zu jeder Notiz Datum und Uhrzeit anzuzeigen an der sie eingetragen wurde. Der Timestamp selbst wird problemlos angezeigt aber wenn ich ihn umwandeln möchte erhalte ich nur "NaN". Hab auch schon herausgefunden das es sich dabei um "not a number" handelt aber nicht wieso bzw. wie man das ändern kann.

Hier mal der Code:

HTML: 
<!DOCTYPE html>
	<head>
		<title>Sintra-Data</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/jquery.mobile-1.4.3.min.js"></script>
		
		<link rel="stylesheet" href="style/jquery.mobile-1.4.3.min.css" />
		<link rel="stylesheet" href="style/styles.css" />
		
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

		<!-- Add to Homescreen Android -->
		<meta name="mobile-web-app-capable" content="yes">
		<link rel="icon" sizes="72x72" href="http://forum.jswelt.de/images/sintra_icon_klein.png" />
		<link rel="icon" sizes="128x128" href="http://forum.jswelt.de/images/sintra_icon_mittel.png" />
		<link rel="icon" sizes="196x196" href="http://forum.jswelt.de/images/sintra_icon_gross.png" />
		<link rel="icon" href="http://forum.jswelt.de/images/sintra_icon.png" />

		<!-- Add to Homescreen Apple -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<link rel="apple-touch-icon-precomposed" href="http://forum.jswelt.de/images/icon-ipad.png" sizes="72x72" />
		<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone-retina.png" sizes="114x114" />
		<link rel="apple-touch-icon-precomposed" href="bilder/icon-ipad-retina.png" sizes="144x144" />
		<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone.png" />
	
	</head>
	<body>
	

		<div data-role="page" id="notizen">
			<div data-role="header" data-tap-toggle="false" data-position="fixed" data-theme="d">
				<a href="index.html" data-role="button" data-icon="home" data-iconpos="left" data-theme="d">Home</a>
				<h1>Notizen</h1>
			</div>
			<div data-role="content" id="notizen_liste">
				<ul id="liste">
					
				</ul>
				<form action="#" method="post" id="add">
      		<fieldset data-role="fieldcontain">
      			<textarea name="notiz" id="notiz" placeholder="Notiz hinzufügen!"></textarea>
      		</fieldset>
      		<button type="submit" data-theme="d" id="submitform">Speichern</button>
    		</form>

			</div>				
			<div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="d">
				<div data-role="navbar" data-theme="d">
					<ul>
						<li><a href="mein_sintra.html" data-icon="star" data-transition="fade">MEIN SINTRA</a></li>
						<li><a href="daten.html" data-icon="star" data-transition="fade">DATEN</a></li>
						<li><a href="notizen.html" data-icon="star" data-transition="fade" class="ui-btn-active">NOTIZEN</a></li>
					</ul>
				</div>
			</div>

		<script src="js/zepto.js"></script>
		<script>
		
		$('form#add').on('submit',function(){
  		task = $('#notiz').val();
  		id = Date.now();
  		

  		$('#notizen_liste').append('<li>' + task + '</li>');
  		localStorage.setItem(id,task);
  
  		$('#notiz').val('');
  		return false;
		});


		$(function(){
  		if(localStorage.length > 0) {
    		for(id in localStorage) {
						var notedate = new Date(id);
  					var dd=notedate.getDate();
  					var mm=notedate.getMonth() + 1; 
  					var yy=notedate.getYear(); 
  					var HH=notedate.getHours(); 
  					var MM=notedate.getMinutes(); 

      		$('#notizen_liste').append('<li>' + dd + '.' + mm + '.' + yy + ' <br /> ' + localStorage[id] + '</li>');
    		}
  		}
		});
		
		</script>
		
		</div>

	</body>
</html>

Und hier der Link zur Seite: Sintra-Data

Zusätzlich habe ich auch noch das Problem das der eingegebene Text unformatiert ausgegeben wird, also ohne Zeilenumbruch. Gibt es bei Javascript so etwas ähnliches wie "nl2br" in PHP und wo muss man das einsetzen ?

Danke schon mal für eure Geduld und Hilfe.

Schönen Sonntag
Rollimen
 
Zuletzt bearbeitet:
Mein Debugger sagt "invalid date" nach der Umwandlung und zeigt id als String an. Hast Du schon mal versucht, die ID mit parseInt() in einen Integer umzuwandeln? Wenn Date() einen String als Parameter bekommt, erwartet es die Angabe als Tag/Monat/Jahr etc. und kann mit einer Zahl nichts anfangen.
 
Zuletzt bearbeitet:
Hab ich schon versuch aber wenn ich hier am Anfang....

Code: 
				var notedate = new Date(id);
  					var dd=notedate.getDate();
  					var mm=notedate.getMonth() + 1; 
  					var yy=notedate.getYear(); 
  					var HH=notedate.getHours(); 
  					var MM=notedate.getMinutes();

....das parseInt einfüge....

Code: 
id = parseInt("id");

.... einfüge bekomme ich weiterhin NaN und zusätzlich wird der Text als "undefined" ausgegeben. :(

NACHTRAG: Ist eigentlich klar weil ich ja "id" verändere und somit gibt es dann hier "localStorage[id]" ein Problem aber selbst wenn ich statt "id" etwas anderes nehme (z.B. datum = parseInt("id") ) verwende wird noch immer Datum und Zeit als NaN angezeigt.
 
Zuletzt bearbeitet:
So kann es auch nicht funktionieren, weil Du einen String "id" als Parameter übergibst und nicht die Variable. Probier es mal so:
Code: 
var notedate = new Date(parseInt(id));
 
Tja, ich müsste wohl einfach nur anfangen anders zu denken, bin etwas PHP fixiert.

Funktioniert aber nicht ganz denn das Jahr wird nicht richtig angezeigt und bei einem neuen Eintrag wird Datum und Uhrzeit erst angezeigt wenn man das Fenster aktualisiert. Außerdem werden die Einträge nicht in der richtigen Reihenfolge angezeigt.
 
das Jahr wird nicht richtig angezeigt
Zum Vergrößern anklicken....
getYear() hat so seine Tücken, siehe hier:
SELFHTML: JavaScript / Objektreferenz / Date
mit getFullYear() geht es besser.
erst angezeigt wenn man das Fenster aktualisiert
Zum Vergrößern anklicken....
Das liegt daran, dass Du die Auswertung von Datum und Uhrzeit im document-ready, also beim Laden der Seite, machst:
Code: 
		$(function(){
  		if(localStorage.length > 0) {
    		for(id in localStorage) {
						var notedate = new Date(parseInt(id));
  					var dd=notedate.getDate();
  					var mm=notedate.getMonth() + 1; 
  					var yy=notedate.getYear(); 
  					var HH=notedate.getHours(); 
  					var MM=notedate.getMinutes();
Du musst Datum und Uhrzeit gleich einfügen, wenn man den Button betätigt.
Außerdem werden die Einträge nicht in der richtigen Reihenfolge angezeigt.
Zum Vergrößern anklicken....
Das liegt daran, dass localStorage ein Objekt ist und bei diesem ist die Reihenfolge der Elemente undefiniert. Wie Du sie sortieren kannst, ist hier beschrieben:
Sorting JavaScript Object by property value - Stack Overflow
Dort wird zwar nach Property sortiert, aber das kannst Du leicht abwandeln.
 
Zuletzt bearbeitet:
Ähh, okay.

Jahreszahl korregieren war noch einfach, Danke.

Du musst Datum und Uhrzeit gleich einfügen, wenn man den Button betätigt.
Zum Vergrößern anklicken....

Keine Ahnung ob ich richtig liege aber das würde bedeuteten dass ich das Ganze hier rein tu muss ....

Code: 
		$('form#add').on('submit',function(){
  		task = $('#notiz').val();
  		id = Date.now();
  		

  		$('#notizen_liste').append('<li>' + task + '</li>');
  		localStorage.setItem(id,task);
  
  		$('#notiz').val('');
  		return false;
		});

.... dann habe ich allerdings unten in der Ausgabe alle Werte als "undefined". Somit müsste ich das dann eigentlich in den "task" packen oder gleich in den localStorage dazu (z.B. localStorage.setItem(id,task,datum);)

Ist meine Überlegung soweit richtig ?

Übrigens, Danke dass du mir zutraust das "sortieren" mal ganz einfach anzupassen, ich fürchte aber das kann etwas dauern bis ich mich da durchblicke aber ich versuch es mal.

@Julian

Ganz allgemein, die Anführungszeichen waren ein Fehler beim kopieren des Textes.
 
Zuletzt bearbeitet:
Rollimen schrieb:
das würde bedeuteten dass ich das Ganze hier rein tu muss
Zum Vergrößern anklicken....
Genau. Dann hast Du Datum und Uhrzeit gleich in der Variablen task und im Inhalt des Localstorage und brauchst es beim Laden der Seite nicht nochmal zu ermitteln.

Rollimen schrieb:
das "sortieren" mal ganz einfach anzupassen
Zum Vergrößern anklicken....
Du brauchst nur dieses:sortable.sort(function(a, b) {return a[1] - b[1]});
so umzuändern:sortable.sort(function(a, b) {return parseInt(a[0]) - parseInt(b[0])});

- - - Aktualisiert - - -

Hallo Mikdoe, danke für den Hinweis, hatte mich schon gefragt, wie man das macht.
 
Zuletzt bearbeitet von einem Moderator:
Rollimen schrieb:
Gibt es bei Javascript so etwas ähnliches wie "nl2br" in PHP und wo muss man das einsetzen ?
Zum Vergrößern anklicken....
Du kannst doch im CSS einfach ein white-space: pre; angeben, dann werden die Umbrüche beachtet.

Rollimen schrieb:
Ist meine Überlegung soweit richtig ?
Zum Vergrößern anklicken....
Muss nicht sein. Du musst bei diesem .append() hald genauso das Datum ausgeben, wie du es später machst.

PS: id und task sind komplet unnötigerweise globale Variablen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben