Date and Date Methods
Purple: Style
Blue: HTML
Green: JavaScript
<!DOCTYPE html>
<html>
<style>
#dates {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#dates td, #dates th {
border: 1px solid #ddd;
padding: 1px;
}
#dates tr:nth-child(even){background-color: #f2f2f2;}
#dates tr:hover {background-color: #ddd;}
#dates th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<body>
<h2>Date Method</h2>
<table id="dates">
<tr>
<td>
<p id="p1"></p>
</td>
<td>
<p id="p2"></p>
</td>
</tr>
<tr>
<td>
<p id="p3"></p>
</td>
<td>
<p id="p4"></p>
</td>
</tr>
<tr>
<td>
<p id="p5"></p>
</td>
<td>
<p id="p6"></p>
</td>
</tr>
<tr>
<td>
<p id="p7"></p>
</td>
<td>
<p id="p8"></p>
</td>
</tr>
<tr>
<td>
<p id="p9"></p>
</td>
<td>
<p id="p10"></p>
</td>
</tr>
<tr>
<td>
<p id="p11"></p>
</td>
<td>
<p id="p12"></p>
</td>
</tr>
<tr>
<td>
<p id="p13"></p>
</td>
<td>
<p id="p14"></p>
</td>
</tr>
<tr>
<td>
<p id="p15"></p>
</td>
<td>
<p id="p16"></p>
</td>
</tr>
<tr>
<td>
<p id="p17"></p>
</td>
<td>
<p id="p18"></p>
</td>
</tr>
<tr>
<td>
<p id="p19"></p>
</td>
<td>
<p id="p20"></p>
</td>
</tr>
<tr>
<td>
<p id="p21"></p>
</td>
<td>
<p id="p22"></p>
</td>
</tr>
</table>
<script>
document.getElementById("p1").innerHTML = "Create new date and object" ;
var d = new Date();
document.getElementById("p2").innerHTML = d;
document.getElementById("p3").innerHTML = "toDateString() converts a date to a date string";
document.getElementById("p4").innerHTML = d.toDateString();
document.getElementById("p5").innerHTML = "Return only year from the date";
document.getElementById("p6").innerHTML = d.getFullYear();
document.getElementById("p7").innerHTML = "Return only month/ Javascript starts counting from 0 so to get correct month we will need to add +1";
//document.getElementById("p8").innerHTML = d.getMonth()+1;
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
document.getElementById("p8").innerHTML = months[d.getMonth()];
document.getElementById("p9").innerHTML = "Return only date from the date";
document.getElementById("p10").innerHTML = d.getDate();
document.getElementById("p11").innerHTML = "Return only time from the date";
document.getElementById("p12").innerHTML = d.getHours()
document.getElementById("p13").innerHTML = "Return only minutes from the date";
document.getElementById("p14").innerHTML = d.getMinutes();
document.getElementById("p15").innerHTML = "Return only seconds from the date";
document.getElementById("p16").innerHTML = d.getSeconds();
document.getElementById("p17").innerHTML = "Return only milliseconds from the date";
document.getElementById("p18").innerHTML = d.getMilliseconds();
document.getElementById("p19").innerHTML = "Return only day from the date";
document.getElementById("p20").innerHTML = d.getDay();
document.getElementById("p21").innerHTML = "Return only day from the date";
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("p22").innerHTML = days[d.getDay()];
</script>
</body>
</html>
No comments:
Post a Comment