如果日期選擇器已經有了值運行ONSELECT反正

Question

目前，我可以選擇一個日期，它充滿我的輸入字段與日期爲7天，一週的輸入字段另一系列的相應天數（僅3下面的例子在天）。雖然我確信有一種更有效的方式來寫入數組，但我仍然沒有任何想法。

但是，如果我從數據庫中獲取的開始日期在頁面加載，而不是選擇日期選擇器，它顯然不會觸發onSelect事件和字段不填充。我怎樣才能在兩種情況下填充字段？

我在想，當任一日期選擇器輸入具有有效的值或運行ONSELECT的功能，但這個小項目，我在我頭上我之前從未接觸過真的很感動的JS。

$(function() { 
$("#StartDate").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    onSelect: function(dateStr, inst) { 
     var weekday=new Array(7); 
     weekday[0]="Monday"; 
     weekday[1]="Tuesday"; 
     weekday[2]="Wednesday"; 
     weekday[3]="Thursday"; 
     weekday[4]="Friday"; 
     weekday[5]="Saturday"; 
     weekday[6]="Sunday"; 
     var Date1 = $.datepicker.parseDate('dd/mm/yy', dateStr); 
     Date1.setDate(Date1.getDate('dd/mm/yy')); 
     $('#Date1').val(Date1.toLocaleDateString()); 
     $('#Day1').val(weekday[Date1.getUTCDay()]); 
     var Date2 = $.datepicker.parseDate('dd/mm/yy', dateStr); 
     Date2.setDate(Date2.getDate('dd/mm/yy') + 1); 
     $('#Date2').val(Date2.toLocaleDateString()); 
     $('#Day2').val(weekday[Date2.getUTCDay()]); 
     var Date3 = $.datepicker.parseDate('dd/mm/yy', dateStr); 
     Date3.setDate(Date3.getDate('dd/mm/yy') + 2); 
     $('#Date3').val(Date3.toLocaleDateString()); 
     $('#Day3').val(weekday[Date3.getUTCDay()]); 
     } 
    }); 
}); 

Answer 1

這樣的循環怎麼樣？

$(function() { 
$("#StartDate").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    onSelect: function(dateStr, inst) { 
     var weekday=new Array(7); 
     weekday[0]="Monday"; 
     weekday[1]="Tuesday"; 
     weekday[2]="Wednesday"; 
     weekday[3]="Thursday"; 
     weekday[4]="Friday"; 
     weekday[5]="Saturday"; 
     weekday[6]="Sunday"; 

     for(i=0;i<weekday.length;i++){ 
     var Date = $.datepicker.parseDate('dd/mm/yy', dateStr); 
     Date.setDate(Date.getDate('dd/mm/yy') + i);    // "i" is the array index 
     $('#Date').val(Date.toLocaleDateString()); 
     $('#Day').val(weekday[Date.getUTCDay()]); 
     } 
    }); 
}); 

---

編輯 ---我誤解了這個問題。

因此，這裏是另一種嘗試，因爲我仍然不確定得到它......但是越來越近。

如果#startDate已填充的onload，你想，如果它是使用日期選擇器選擇運行上面的腳本，對不對？

因此，假如這樣的事情，在PHP端，填補了StartDate領域：
<input type="text" id="startDate" value="<?php echo $date; ?>"></input>

我會得到這個功能了日期選擇器init的，以便能夠從其他地方運行。
我已經完成了CodePen的測試。

// This is the function you had on select 
var DayFill = function(dateStr, inst) { 

    var weekday=new Array(7); 
    weekday[0]="Monday"; 
    weekday[1]="Tuesday"; 
    weekday[2]="Wednesday"; 
    weekday[3]="Thursday"; 
    weekday[4]="Friday"; 
    weekday[5]="Saturday"; 
    weekday[6]="Sunday"; 

    for(i=0;i<weekday.length;i++){ 
    var Date = $.datepicker.parseDate('dd/mm/yy', dateStr); 
    Date.setDate(Date.getDate('dd/mm/yy') + i);    // "i" is the array index 
    $('#Date'+i).val(Date.toLocaleDateString()); 

    // Fix day number to fit the array index 
    var daynum = Date.getUTCDay()-1; 
    if(daynum==-1){ 
     daynum=6; 
    } 

    $('#Day'+i).val(weekday[daynum]); 
    } 
} 

// This is your datepicker init 
$("#StartDate").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    onSelect: DayFill   // Call the FillDay function, now out of this init. 
}); 

// Onload, run the DayFill function using the input value 
$(document).ready(function(){ 
    DayFill($("#StartDate").val()); 
});