2016-09-15 5 views
1

Ich habe diesen HTML:Wie kann ich Daten in jQuery berechnen und den Wert eines Eingabedatums auf diesen Wert setzen?

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

Welche „datepickerTo“ bis zum letzten Samstag setzt (dies basiert auf dem heutigen Datum von Donnerstag, 15.09) und „datepickerFrom“ bis Sonntag davor.

Dies wird jedoch manuell hinzugefügt; Ich will es programmatisch tun, in jQuery, so etwas wie:

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

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

Ich denke, das sollte funktionieren, aber ich weiß nicht, was in den Funktionen zu setzen:

function getLastSaturday() { 
    return ???; 
} 

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

Verwenden Sie die Methoden des 'Date' Objekt. jQuery hat dafür nichts, aber moment.js könnte nützlich sein. – Barmar

Antwort

2

Wenn Sie eine Bibliothek wie moment.js oder andere

nicht verwenden möchten

Versuchen Sie folgendes:

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

+0

Ändern Sie die "-6" in "-5" und es ist perfekt. –

+0

@ B.ClayShannon warum "-5" nicht "-6" kannst du mehr erklären. Wir müssen letzten Sonntag vor dem gegebenen Samstag berechnen. Also denke ich, wir müssen 6 Tage und nicht 5 Tage vorbei gehen. –

+0

Ich weiß nicht warum nicht, aber das funktioniert. -6 hat es 9-3 zu 9-10 gemacht, wenn ich 9-4 (Sonntag) bis 9-10 (Samstag) brauche. –

1

Hier ist ein Date Manipulation in ES6.

jQuery kann ein Modul haben, das kann es tun?

Sonst moment.js ist eine feine Bibliothek, die es für Sie tun kann?

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

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

+1

Interessieren Sie sich, warum die Down-Vote? Ich kann nichts tun, um die Antwort zu korrigieren, wenn ich nicht weiß, was das Problem ist. – Xotic750

+0

Ich denke, dass einige Katzen einfach aus reiner Schlichtheit ablehnen; Es muss traurig sein, so kleinlich und sanftmütig zu sein. –

+0

Vielleicht. Vielleicht liegt es daran, dass dieses Beispiel nur ein allgemeines Werkzeug war, um Sie zu führen, und nicht der genaue Code war, den Sie zum Kopieren und Einfügen benötigten. :/ – Xotic750

Verwandte Themen