jQuery datePicker Woche Auswahl

Question

Ich habe ein jQueryUI datepicker und ich versuche, den Code zur Auswahl der bestimmten Woche, die der Tag ausgewählt wird, es funktioniert für jeden Tag außer Sonntags. Wenn ich einen Sonntag auswähle, wird die folgende Woche angezeigt, aber es sollte die aktuelle Woche angezeigt werden. Wenn ich zum Beispiel 9. Mai auswähle, ist der Bereich 9. Mai bis 15. Mai 2016, aber wenn ich den 15. wähle, bekomme ich 16. Mai bis 22. Mai 2016, wenn ich denke, dass es den gleichen Bereich wie anzeigen sollte wenn ich ausgewählt, um den neunten

HTML

<input style="display: none" name="date" type="input" id="datePick"/> 
<span>Week Of: </span> 
<span style="font-weight: bold" id="weekRange">   
</span> 
<br/> 
M : <span id="mondayNum"></span> 
<br/> 
TU : <span id="tuesdayNum"></span> 
<br/> 
W : <span id="wednesdayNum"></span> 
<br/> 
TH : <span id="thursdayNum"></span> 
<br/> 
F : <span id="fridayNum"></span> 
<br/> 
SA : <span id="saturdayNum"></span> 
<br/> 
SU : <span id="sundayNum"></span> 

Javascript

$(document).ready(function() 
    { 

     //alert(t1); 
     $("#datePick").datepicker(
     { 
      showWeek:true, 
      showOtherMonths: true, 
      selectOtherMonths: true, 
      firstDay: 1, 
      showOn: "button", 
      buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png", 
      buttonImageOnly:true, 
      onSelect: function(dateText, inst) 
      { 
       var dayOne,dayTwo,dayThree,dayFour,dayFive,daySix,daySeven; 
       var date = $(this).datepicker('getDate'); 
       //console.log($.datepicker.iso8601Week(new Date(dateText))); 
       tempDay = $.datepicker.formatDate('D', date); 

       if(tempDay == 'Sun') 
       { 
        console.log("Sunday"); 
        console.log(date);     
        console.log(tempDay); 

       dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1); 
      // 
       dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2); 
       dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3); 
       dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4); 
       dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5); 
       daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
       daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7); 
      $('#weekRange').text($.datepicker.formatDate('M d', dayOne) + " to " + $.datepicker.formatDate('M d, yy', daySeven)); 
       $('#mondayNum').text($.datepicker.formatDate('d', dayOne)); 
       $('#tuesdayNum').text($.datepicker.formatDate('d', dayTwo)); 
       $('#wednesdayNum').text($.datepicker.formatDate('d', dayThree)); 
       $('#thursdayNum').text($.datepicker.formatDate('d', dayFour)); 
       $('#fridayNum').text($.datepicker.formatDate('d', dayFive)); 
       $('#saturdayNum').text($.datepicker.formatDate('d', daySix)); 
       $('#sundayNum').text($.datepicker.formatDate('d', daySeven)); 
       $("#datePick").datepicker("setDate", dayOne); 
     } 
       else 
       { 
        console.log("Not Sunday"); 
        console.log(tempDay); 
       previousWeek = ($.datepicker.iso8601Week(date) - 1); 
       console.log("Picked day previous Week: " + previousWeek); 

       console.log("Current week: " + $.datepicker.iso8601Week(date)); 

       var nextWeek = ($.datepicker.iso8601Week(date) + 1); 
       console.log("Picked day following Week: " + nextWeek); 

       console.log(dateText); 
       dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1); 

       dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2); 
       dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3); 
       dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4); 
       dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5); 
       daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
       daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7); 
       } 



       console.log("2nd: " + dayTwo); 
       console.log("3rd: " + dayThree); 
       console.log("4th: " + dayFour); 
       console.log("5th: " + dayFive); 
       console.log("6th: " + daySix); 
       console.log("7th: " + daySeven); 


       var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat; 
       //console.log($.datepicker.formatDate('M d', monday, inst.settings) + " to " + $.datepicker.formatDate('M d, yy', sunday, inst.settings)); 
       $('#weekRange').text($.datepicker.formatDate('M d', dayOne, inst.settings) + " to " + $.datepicker.formatDate('M d, yy', daySeven, inst.settings)); 
      $('#mondayNum').text($.datepicker.formatDate('d', dayOne)); 
       $('#tuesdayNum').text($.datepicker.formatDate('d', dayTwo)); 
       $('#wednesdayNum').text($.datepicker.formatDate('d', dayThree)); 
       $('#thursdayNum').text($.datepicker.formatDate('d', dayFour)); 
       $('#fridayNum').text($.datepicker.formatDate('d', dayFive)); 
       $('#saturdayNum').text($.datepicker.formatDate('d', daySix)); 
       $('#sundayNum').text($.datepicker.formatDate('d', daySeven)); 
       $("#datePick").datepicker("setDate", dayOne); 
       //alert($.datepicker.formatDate('d', dayOne, inst.settings)); 
      } 
     }); 
     //console.log("1st: " + dayOne); 

     $("#datePick").datepicker("setDate", new Date()); 
     var date = $("#datePick").datepicker('getDate'); 
     //console.log(test); 
     dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1); 
     dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2); 
     dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3); 
     dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4); 
     dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5); 
     daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
     daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7); 
     $('#weekRange').text($.datepicker.formatDate('M d', dayOne) + " to " + $.datepicker.formatDate('M d, yy', daySeven)); 


    //console.log("1st: "+ bob); 

    }); 

jsfiddle https://jsfiddle.net/gauldivic/vexuu26j/

Answer 1

Da es immer an einem Tag aus ist, was wahrscheinlich dadurch verursacht wird, dass Sie den ersten Tag der Woche auf Montag setzen, können Sie dies beheben, indem Sie einen Tag vom ausgewählten Datum subtrahieren.

var date = $(this).datepicker('getDate'); 
date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1); 

In Aktion:

var t1; 
 
$(document).ready(function() { 
 
    $("#datePick").datepicker({ 
 
    showWeek: true, 
 
    showOtherMonths: true, 
 
    selectOtherMonths: true, 
 
    firstDay: 1, 
 
    showOn: "button", 
 
    buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png", 
 
    buttonImageOnly: true, 
 
    onSelect: function(dateText, inst) { 
 
     var dayOne, dayTwo, dayThree, dayFour, dayFive, daySix, daySeven; 
 
     
 
     // Subtract one day to account for different first day of the week 
 
     var date = $(this).datepicker('getDate'); 
 
     date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1); 
 
     
 
     var tempDay = $.datepicker.formatDate('D', date); 
 
     var previousWeek = ($.datepicker.iso8601Week(date) - 1); 
 
     var nextWeek = ($.datepicker.iso8601Week(date) + 1); 
 
     dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1); 
 
     dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2); 
 
     dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3); 
 
     dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4); 
 
     dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5); 
 
     daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
 
     daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7); 
 

 
     var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat; 
 
     $('#weekRange').text($.datepicker.formatDate('M d', dayOne, inst.settings) + " to " + $.datepicker.formatDate('M d, yy', daySeven, inst.settings)); 
 
     $('#mondayNum').text($.datepicker.formatDate('d', dayOne)); 
 
     $('#tuesdayNum').text($.datepicker.formatDate('d', dayTwo)); 
 
     $('#wednesdayNum').text($.datepicker.formatDate('d', dayThree)); 
 
     $('#thursdayNum').text($.datepicker.formatDate('d', dayFour)); 
 
     $('#fridayNum').text($.datepicker.formatDate('d', dayFive)); 
 
     $('#saturdayNum').text($.datepicker.formatDate('d', daySix)); 
 
     $('#sundayNum').text($.datepicker.formatDate('d', daySeven)); 
 
     $("#datePick").datepicker("setDate", dayOne); 
 
    } 
 
    }); 
 

 
    $("#datePick").datepicker("setDate", new Date()); 
 
    var date = $("#datePick").datepicker('getDate'); 
 
    dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1); 
 
    dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2); 
 
    dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3); 
 
    dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4); 
 
    dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5); 
 
    daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
 
    daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7); 
 
    $('#weekRange').text($.datepicker.formatDate('M d', dayOne) + " to " + $.datepicker.formatDate('M d, yy', daySeven)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<input style="display: none" name="date" type="input" id="datePick" /> 
 
<span>Week Of: </span> 
 
<span style="font-weight: bold" id="weekRange"> 
 
\t \t \t 
 
\t \t </span> 
 
<br/>M : <span id="mondayNum"></span> 
 
<br/>TU : <span id="tuesdayNum"></span> 
 
<br/>W : <span id="wednesdayNum"></span> 
 
<br/>TH : <span id="thursdayNum"></span> 
 
<br/>F : <span id="fridayNum"></span> 
 
<br/>SA : <span id="saturdayNum"></span> 
 
<br/>SU : <span id="sundayNum"></span>