JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.28.5/date_fns.min.js"></script>
<div id=id1>
</div>
<div id=id2>
</div>
<div id=id3>
</div>
<div id=id4>
</div>

JavaScript

//toLocaleDateString formats the date
//these are the options used for toLocaleDateString
const options = { month: 'long', year: 'numeric'};
const today = new Date();
const nextMonth = dateFns.addMonths(today, 2)
var d = new Date(y,m,d);

document.getElementById('id4').innerHTML = d
//put answer inside id1
//dateFns.startOfQuarter(new Date()) gives the date
//toLocaleDateString("en-US", options) formats the date
document.getElementById('id1').innerHTML = dateFns.startOfQuarter(nextMonth).toLocaleDateString("en-US", options) + " - " + dateFns.endOfQuarter(nextMonth).toLocaleDateString("en-US", options)
//kinda weird put -1 gets next quareter not previous
document.getElementById('id2').innerHTML =  dateFns.startOfQuarter(dateFns.subQuarters(nextMonth,-1)).toLocaleDateString("en-US", options) + " - " + dateFns.lastDayOfQuarter(dateFns.subQuarters(nextMonth,-1)).toLocaleDateString("en-US", options)