How can I calculate dates in jQuery, and set an input date's value to that?

Question

I have this html:

<input class="smalldatepicker" type="date" id="datepickerFrom" value="2016-09-04">
</input>
<label class="cccsfont"> to </label>
<input type="date" class="smalldatepicker" id="datepickerTo" value="2016-09-10">
</input>

Which sets "datepickerTo" to the last Saturday (this is based on today's date of Thursday, 9/15) and "datepickerFrom" to the Sunday before that.

This is manually added, though; I want to do it programmatically, in jQuery, something like:

var lastSat = getLastSaturday(); // return in form "YYYY-MM-DD" 
var sundayBeforeLastSat = getSundayBeforeLast(lastSat); // " "

$("#datepickerTo").val(lastSat);
$("#datepickerFrom").val(sundayBeforeLastSat);

I think this should work, but I don't know what to put in the functions:

function getLastSaturday() {
     return ???;
}

function sundayBeforeLastSat(lastSat) {
     return ???;
}

Answer 1

Here is a Date manipulation in ES6.

jQuery may have some module that can do it?

Otherwise moment.js is a fine library that may do it for you?

function pad(num) {
  return `0${num}`.slice(-2);
}

// d is a Date object,returns 'YYYY-MM-DD'
function format(d) {
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
}

function day(d, dow) {
  d.setTime(d.getTime() + (dow - d.getDay()) * 86400000);
  return d;
}

// dateString is of form 'YYYY-MM-DD'
function parse(dateString) {
  const args = dateString.split('-');
  args[1] -= 1;
  return args;
}

function getLastSaturday(...dateArgs) {
  return format(day(new Date(...dateArgs), -1));
}

function getSundayBeforeLast(lastSat) {
  return format(day(new Date(...parse(lastSat)), 0));
}

const lastSat = getLastSaturday();
const sundayBeforeLastSat = getSundayBeforeLast(lastSat);

$('#datepickerTo').val(lastSat);
$('#datepickerFrom').val(sundayBeforeLastSat);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="smalldatepicker" type="date" id="datepickerFrom">
<label class="cccsfont">to</label>
<input type="date" class="smalldatepicker" id="datepickerTo">

And using moment.js

function getLastSaturday(...dateArgs) {
  return moment(dateArgs).day(-1).format('YYYY-MM-DD');
}

function getSundayBeforeLast(lastSat) {
  return moment(lastSat).day(0).format('YYYY-MM-DD');
}

const lastSat = getLastSaturday();
const sundayBeforeLastSat = getSundayBeforeLast(lastSat);

$('#datepickerTo').val(lastSat);
$('#datepickerFrom').val(sundayBeforeLastSat);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.js"></script>
<input class="smalldatepicker" type="date" id="datepickerFrom">
<label class="cccsfont">to</label>
<input type="date" class="smalldatepicker" id="datepickerTo">

Answer 2

If you don't want to use any library like moment.js or other

Try this :

$(function(){

	
var lastSat = getLastSaturday(); // return in form "YYYY-MM-DD" 
var sundayBeforeLastSat = getSundayBeforeLastSat(lastSat); // " "
console.log("Last satuarday: "+lastSat);
    console.log("Last Sunday: "+sundayBeforeLastSat);

$("#datepickerTo").val(lastSat);
$("#datepickerFrom").val(sundayBeforeLastSat);
});

function getLastSaturday() {
    newDate= new Date();
	daysAfterSat = newDate.getDay()+1;
	lastSat = new Date(newDate.setDate(newDate.getDate()-daysAfterSat));
	dateString = lastSat.getFullYear()+ "-"+('0' + (lastSat.getMonth()+1)).slice(-2) + '-'+('0' + lastSat.getDate()).slice(-2);
              
	return dateString;
}

function getSundayBeforeLastSat(lastSat) {
    date = new Date(lastSat);
	lastSun = new Date(date.setDate(date.getDate()-6));
	dateString = lastSun.getFullYear()+ "-"+('0' + (lastSun.getMonth()+1)).slice(-2) + '-'+('0' + lastSun.getDate()).slice(-2);
	return dateString;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="smalldatepicker" type="date" id="datepickerFrom" value="">
</input>
<label class="cccsfont"> to </label>
<input type="date" class="smalldatepicker" id="datepickerTo" value="">
</input>
</form>