-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (83 loc) · 2.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>magic calculator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-datepicker.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-2">
<div class="mb-3">
<label for="datepicker" class="form-label">Select estimated date:</label>
<input type="text" class="form-control" id="datepicker" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="col-1">
</div>
<div class="col-8">
<div class="mb-3">
<div id="output" class="mt-3"></div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-datepicker.min.js"></script>
<script>
// Initialize the datepicker
$(document).ready(function () {
$('#datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true,
});
});
// Get the selected date in the 'yyyy-MM-dd' format
$('#datepicker').on('changeDate', function (e) {
const selectedDate = e.format('yyyy-mm-dd');
printWeekValue(selectedDate)
});
const yyyymmdd = 'yyyy-MM-dd';
function getYmd(val) {
return val.split('-')
}
function printWeekValue(inputDateString) {
const outputDiv = document.getElementById('output');
const resp = getWeekAndDay(inputDateString)
outputDiv.innerHTML = `<p class="mt-2">week+day : ${resp}</p>`;
}
function getWeekAndDay(
estimatedDueDateString,
compareDate = new Date(), // using today as default
) {
const estYmdArr = getYmd(estimatedDueDateString)
const estimatedDueDate = new Date(estYmdArr[0], estYmdArr[1] -1, estYmdArr[2])
// Calculate the difference in days between the estimated due date and the desired date
const diffInDays = Math.floor(
(compareDate.getTime() - estimatedDueDate.getTime()) / (1000 * 60 * 60 * 24)
);
let weeks = 0;
let days = 0;
// Calculate the number of weeks
const diffWeeks = Math.floor(diffInDays / 7);
// Calculate the day within the current week (0-6)
const diffDays = diffInDays % 7;
if (diffInDays < 0) {
weeks = 40 - Math.abs(diffWeeks);
days = Math.abs(diffDays) > 0 ? 7 - Math.abs(diffDays) : 0;
} else if (diffInDays === 0) {
weeks = 40;
} else {
weeks = 40 + diffWeeks;
days = diffDays;
}
return `${weeks}+${days}`;
};
</script>
</body>
</html>