JSFiddle - React, Tailwind, and code Playground

by brineryte

HTML

<input id="cool" type="date">

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the UTC day of the month for the given, local, date-time.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var d = new Date("2018-12-21");
  var n = d.getDate();
  document.getElementById("demo").innerHTML = d;
}
</script>

</body>
</html>

JavaScript

$(document).ready(function(){

  $("#cool").on("change", function(){
    let date = new Date(getFixedFormatDate($("#cool")));
    console.log(date);
    let selectedDate = forceMondayPickupOnWeekendSelection(date);
    selectedDate = new Date(zeroTime(selectedDate));
    let newDate = selectedDate.getFullYear() + '-' + (selectedDate.getMonth() + 1) + '-' + selectedDate.getUTCDate();
    $("#cool").val(newDate);
	});

});

function getFixedFormatDate(elem){
	return $(elem).val().replace(/-/g, '\/');
}

function forceMondayPickupOnWeekendSelection(selectedDate) {
            if (selectedDate === undefined) {
                selectedDate = new Date($("#DeliveryDate").val());
            }
            if (selectedDate.getDay() === 0) {
                selectedDate = zeroTime(addDays(selectedDate, 1));
            } else if (selectedDate.getDay() === 6) {
                selectedDate = zeroTime(addDays(selectedDate, -1));
            }
            return selectedDate;
        }

function addDays(date, days) {
            var result = new Date(date);
            result.setDate(result.getDate() + days);
            return result;
        }