JSFiddle - React, Tailwind, and code Playground
HTML
<input id="userDateInput" type="date" onchange="findDates()"> <br>
<strong for="firstDay">First Day:</strong> <span id="firstDay"></span> <br>
<strong for="lastDay">Last Day:</strong> <span id="lastDay"></span> <br>
JavaScript
function findDates() {
const userInput = document.getElementById('userDateInput').value;
const dates = getFirstLastDayOfWeek(userInput);
document.getElementById('firstDay').innerHTML = dates.firstDay;
document.getElementById('lastDay').innerHTML = dates.lastDay;
}
function getFirstLastDayOfWeek(userDate) {
let result = {};
var curr = new Date(userDate); // get current date
var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
var last = first + 6; // last day is the first day + 6
result = {
firstDay:new Date(curr.setDate(first)).toUTCString(),
lastDay:new Date(curr.setDate(last)).toUTCString()
};
return result;
};