I have a four week work schedule start date should be 2022-03-01.
I made code to do that but the problem is:
In java script you can not write start date as it should, but must be at least one month before real start date, and if you change start date, you get different results.
I tried many start dates until I found the best start date is 20-01-27 the result is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
</head>
<body>
<div class="container">
<div class="majed" id="schema">
<form id="myFormsch">
<label for="Datum">Datum:</label>
<span>
<input type="text" readonly="" id="date"placeholder="Klick och välj datum">
</span>
<label for="dag">Dag:</label>
<span>
<input type="text" readonly="" id="day">
</span>
<label for="Arbetar">Ulf:</label>
<input type="text" readonly="" id="Arbetar">
</form>
</div>
<script>
$(function () {
var weekStart = new Date(2022, 01, 27);
var roster =
['Sun week 1 Day 1','Mon week 1 Day 2','Tue week 1 Day 3','Wed week 1 Day 4','Thu week 1 Day 5','Fri week 1 Day 6','Sat week 1 Day 7',
'Sun week 2 Day 8','Mon week 2 Day 9','Tue week 2 Day 10','Wed week 2 Day 11','Thu week 2 Day 12','Fri week 2 Day 13','Sat week 2 Day 14',
'Sun week 3 Day 15','Mon week 3 Day 16','Tue week 3 Day 17','Wed week 3 Day 18','Thu week 3 Day 19','Fri week 3 Day 20','Sat week 3 Day 21',
'Sun week 4 Day 22','Mon week 4 Day 23','Tue week 4 Day 24','Wed week 4 Day 25','Thu week 4 Day 26','Fri week 4 Day 27','Sat week 4 Day 28'];
$('#date').datepicker({
firstDay: 1 ,
dateFormat: "yy-mm-dd",
minDate: weekStart,
onSelect: function (dateText, inst) {
var date = $(this).datepicker('getDate');
var d = new Date(dateText);
$.datepicker.iso8601Week(d);
var days = Math.floor((date.getTime() - weekStart.getTime()) / (24 * 60 * 60 * 1000)) ;
var week = Math.floor((days / 7) % 4);
$('#week').val(week +1);
$('#day').val($.datepicker.formatDate('DD', date) +" " +"Week"+" "+ ($.datepicker.iso8601Week(d))) ;
$('#Arbetar').val(roster[(week) * 7 + date.getDay()]);
}
});
});
</script>
</div>
</body>
</html>
2022-04-03 Sun week 1 Day 1 wrong
it should be sun week 2 day 8 but it is sun week 1 day 1.
I do not know how to solve the problem,
Do you have suggestions for the problem?, please help me
thanks