From de0be491c359f487f4f487005e44fceedce02e45 Mon Sep 17 00:00:00 2001
From: rahachu <13518011@std.stei.itb.ac.id>
Date: Tue, 29 Sep 2020 16:42:01 +0700
Subject: [PATCH] w05
---
W05-Javascript-Date/index.html | 98 ++++++++++++++++++++++++++++++++++
1 file changed, 98 insertions(+)
create mode 100644 W05-Javascript-Date/index.html
diff --git a/W05-Javascript-Date/index.html b/W05-Javascript-Date/index.html
new file mode 100644
index 0000000..65a19ae
--- /dev/null
+++ b/W05-Javascript-Date/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Kalender</title>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
+ <!-- Compiled and minified CSS -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+
+ <!-- Compiled and minified JavaScript -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+
+</head>
+<body>
+ <div class="container row">
+ <div class="input-field col s6">
+ <select id="bulan">
+ <option value="" disabled selected>Choose your option</option>
+ <option value="0">Januari</option>
+ <option value="1">Februari</option>
+ <option value="2">Maret</option>
+ <option value="3">April</option>
+ <option value="4">Mei</option>
+ <option value="5">Juni</option>
+ <option value="6">Juli</option>
+ <option value="7">Agustus</option>
+ <option value="8">September</option>
+ <option value="9">Oktober</option>
+ <option value="10">November</option>
+ <option value="11">Desember</option>
+ </select>
+ <label>Pilih Bulan</label>
+ </div>
+
+ <div class="input-field col s6">
+ <input type="number" id="tahun">
+ <label>Pilih Tahun</label>
+ </div>
+ </div>
+ <div class="container">
+ <table class="centered">
+ <thead>
+ <tr>
+ <th>Senin</th>
+ <th>Selasa</th>
+ <th>Rabu</th>
+ <th>Kamis</th>
+ <th>Jumat</th>
+ <th>Sabtu</th>
+ <th>Minggu</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ </tbody>
+ </table>
+ </div>
+ <script>
+ $(document).ready(function(){
+ $('select').formSelect();
+ });
+ function generateCalendar(year,month) {
+ let jumlahHari = new Date(year,month,0).getDate();
+ let hariPertama = new Date(year,month,1).getDay();
+ let hariIni = new Date();
+ let calendarHTML = '<tr>'
+ console.log(month);
+ for (let i = 0; i < hariPertama; i++) {
+ calendarHTML += '<td/>'
+ }
+ j = hariPertama;
+ for (let i = 1; i <= jumlahHari; i++) {
+ if (hariIni.getDate()==i && hariIni.getMonth()==month && hariIni.getFullYear()==year) {
+ calendarHTML += '<td class="teal lighten-2">'+i+'</td>';
+ } else {
+ calendarHTML += '<td>'+i+'</td>';
+ }
+ j ++;
+ if (j==7) {
+ calendarHTML+='</tr><tr>';
+ j=0;
+ }
+ }
+ calendarHTML += '</tr>'
+ $('tbody').html(calendarHTML);
+ }
+ generateCalendar($('#tahun').val(),$('#bulan').val());
+ $("#tahun").change(function(){
+ generateCalendar($('#tahun').val(),$('#bulan').val());
+ });
+ $("#bulan").change(function(){
+ generateCalendar($('#tahun').val(),$('#bulan').val());
+ });
+ </script>
+</body>
+</html>
\ No newline at end of file
--
GitLab