如何在jQuery中計算日期，並將輸入日期的值設置爲該值？

Question

我有這個網站：

<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> 

這之前，設置「datepickerTo」到上週六（這是基於週四9/15今天的日期）和「datepickerFrom」到週日。

雖然這是手動添加;我想這樣做編程，jQuery的，是這樣的：

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

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

我認爲這應該工作，但我不知道要放什麼功能：

function getLastSaturday() { 
    return ???; 
} 

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

Answer 1

如果你不想使用像moment.js任何圖書館或其他

試試這個：

$(function(){ 
 

 
\t 
 
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(); 
 
\t daysAfterSat = newDate.getDay()+1; 
 
\t lastSat = new Date(newDate.setDate(newDate.getDate()-daysAfterSat)); 
 
\t dateString = lastSat.getFullYear()+ "-"+('0' + (lastSat.getMonth()+1)).slice(-2) + '-'+('0' + lastSat.getDate()).slice(-2); 
 
       
 
\t return dateString; 
 
} 
 

 
function getSundayBeforeLastSat(lastSat) { 
 
    date = new Date(lastSat); 
 
\t lastSun = new Date(date.setDate(date.getDate()-6)); 
 
\t dateString = lastSun.getFullYear()+ "-"+('0' + (lastSun.getMonth()+1)).slice(-2) + '-'+('0' + lastSun.getDate()).slice(-2); 
 
\t 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>

Answer 2

這裏是一個Date在ES6中操縱。

jQuery可能有一些模塊可以做到嗎？

否則moment.js是一個很好的庫，可以幫你嗎？

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">

而且使用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">