Initial commit

5b2685c1 · Владислав Цой · 5b2685c1 · 5b2685c1 · 5b2685c1
Commit 5b2685c1 authored Jul 13, 2020 by Владислав Цой
Expand all Hide whitespace changes
Inline Side-by-side

Showing with 61 additions and 0 deletions

index.html index.html +61 -0

jQuery.js js/jQuery.js +0 -0

moment.js js/moment.js +0 -0

No files found.
--- a/index.html
+++ b/index.html
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+<input type="text" id="datepicker">
+<input type="date">
+
+<script src="js/jQuery.js"></script>
+<script src="js/moment.js"></script>
+<script>
+    $(() => {
+        let now = moment();
+        let month = now.month();
+        const startOfMonth = now.month(month).startOf('month').day();
+        const daysOfMonth = now.month(month).daysInMonth();
+        console.log(startOfMonth, daysOfMonth);
+
+        const datepicker = $('#datepicker');
+        // datepicker.prop('disabled', true);
+
+        const calendar = (e) => {
+            e.target.disabled = true;
+            const table = $("<table>" +
+                "<thead>" +
+                "<tr>" +
+                "<th>Sunday</th>" +
+                "<th>Monday</th>" +
+                "<th>Tuesday</th>" +
+                "<th>Wednesday</th>" +
+                "<th>Thursday</th>" +
+                "<th>Friday</th>" +
+                "<th>Saturday</th>" +
+                "</tr>" +
+                "</thead>" +
+                "</table>");
+                let getCells = (table, startOfMonth, daysOfMonth) => {
+                let day = 1;
+                for(let i = 0; i < daysOfMonth / 7; i++) {
+                    const row = $("<tr>");
+                    for (let k = 1; k <= 7; k++) {
+                        if(i === 0 && k <= startOfMonth) row.append($('<td> </td>'))
+                        else if(day <= daysOfMonth) row.append($('<td>' + day++ + '</td>'))
+                    }
+                    table.append(row);
+                }
+            }
+            getCells(table, startOfMonth, daysOfMonth);
+            $('body').append(table);
+        }
+        datepicker.on('click', calendar);
+    })
+</script>
+</body>
+</html>
\ No newline at end of file
--- a/js/jQuery.js
+++ b/js/jQuery.js
--- a/js/moment.js
+++ b/js/moment.js