JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>
<div id="time_display"></div>
<button id="next">Next</button>
<button id="prev">Previous</button>
CSS
body {
margin: 20px;
text-align: right;
}
#time_display {
border: 1px solid black;
font: 20pt 'Arial';
padding: 5px;
margin-bottom: 10px;
text-align: left;
}
JavaScript
var $ = document.getElementById.bind(document); // convenience id selector
var selected_date = moment(); // initalize moment.js object ('today')
var showDate = function() { // update DOM with delected_date
var output_pattern = "dd, MMMM, D, YYYY"; // see moment.js docs for various date patterns
$("time_display").innerHTML = selected_date.format(output_pattern);
}
var changeDate = function(difference) { // update value of selected_date
selected_date.add(difference, 'days')
}
var changeAndShow = function(difference) { // the actual click action
changeDate(difference);
showDate();
}
showDate(); // initially shoe today's date
$("next").onclick = function () {
changeAndShow(1); // increase by one day
}
$("prev").onclick = function () {
changeAndShow(-1); // decrease by one day
}