JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head></head>
<body>
<a href="#" id='back'>Back</a>
<a href="#" id='next'>Next</a>
<div id='DateList'></div>
<div id='WeekNo'></div>
</body>
</html>
CSS
#WeekNo { background-color: #ccffcc;
margin-top:10px;}
JavaScript
$(document).ready(function() {
// Handler for .ready() called.
var myYear = 2018;
var myWeek =52;
writeDays(myYear, myWeek);
$('#next').on('click',function(){
if(myWeek>51){
myWeek=1;
myYear = myYear +1;
}
else{
myWeek ++;
}
writeDays(myYear, myWeek);
});
$('#back').on('click',function(){
if(myWeek<2){
myWeek=52;
myYear =myYear -1;
}
else{
myWeek --;
}
writeDays(myYear, myWeek);
});
});
function writeDays(myYear, myWeek){
var days = getDays(myYear , myWeek);
var strDays='';
for (var i in days) {
strDays +=(days[i].toDateString() + "<br>");
}
$('#DateList').html(strDays);
$('#WeekNo').html("Year : "+myYear+ "Week: "+myWeek);
}
function getDays(year, week) {
var j10 = new Date(year, 0, 10, 12, 0, 0),
j4 = new Date(year, 0, 4, 12, 0, 0),
mon = j4.getTime() - (j10.getDay()-1) * 86400000,
result = [];
for (var i = -1; i < 6; i++) {
result.push(new Date(mon + ((week - 1) * 7 + i) * 86400000));
}
return result;
}