jQuery datePicker星期選擇

我有一個jQueryUI datepicker，我試圖讓代碼選擇特定的一週，挑選一天，它適用於每天除了星期天。當我選擇一個星期日時，顯示下一週，但它應顯示當前星期。例如，如果我選擇5月9日的範圍是 2016年5月9日至5月15日，但是當我選擇第15天時我得到2016年5月16日至2016年5月22日，當我認爲它應該顯示與如果我選擇了9號jQuery datePicker星期選擇

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/

來源

2016-07-15 Andrew Bailey

我更新的問題。 –

由於它總是關閉一天，這可能是由於您將星期幾的第一天設置爲星期一導致的，您可以通過從所選日期減去一天來解決此問題。

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

在行動：

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>

來源

2016-07-15 19:17:48

感謝男士的幫助。 –

jQuery datePicker星期選擇

回答

相關問題