在給定日期範圍內動態生成複選框

Question

我正在開發簡單的訂餐應用程序。我需要爲給定日期範圍（FromDate - ToDate）的日期計數生成複選框。每天有三個複選框（早餐，午餐，晚餐）。

目前，我打印日期範圍內的所有日期使用

$('#getBetween').on('click', function() { 
    var start = $("#fromDate").datepicker("getDate"), 
    end = $("#toDate").datepicker("getDate"), 
    currentDate = new Date(start), 
    between = []; 

    while (currentDate <= end) { 
     between.push(new Date(currentDate));     
     currentDate.setDate(currentDate.getDate() + 1); 
    } 

    $('#results').html(between.join('<br> ')); 
}); 

我不知道如何改變這種代碼來生成複選框爲3每個日期。誰來幫幫我。

謝謝

Answer 1

您正在尋找這樣的事情：

$(document).ready(function(){ 
 
    
 
    var currentDate = new Date(); 
 
    
 
    var endDate = new Date(); 
 
    var numberOfDaysToAdd = 3; 
 
    endDate.setDate(endDate.getDate() + numberOfDaysToAdd); 
 
    
 
    var between = []; 
 
    
 
    while (currentDate <= endDate) { 
 
     between.push(new Date(currentDate));     
 
     currentDate.setDate(currentDate.getDate() + 1); 
 
    } 
 
    
 
    $.each(between, function(index, value) { 
 
    var thisDate = new Date(value); 
 
    
 
    var time = thisDate.getDate(); 
 
    $("#results").append("<div>Date: "+thisDate.toLocaleDateString()+"<div id='"+time+"' class='checkboxContainer'></div></div>"); 
 
    
 
    for(i=0;i<3;i++) 
 
    { 
 
    var name = ""; 
 
    if(i == 0) 
 
     name= "Breakfast"; 
 
    else if(i == 1) 
 
     name= "Lunch"; 
 
    else 
 
     name= "Dinner"; 
 
    
 
    var id = time+"_"+name; 
 
    
 
    $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo("#"+time); 
 
    $('<label />', { 'for': 'cb'+id, text: name }).appendTo("#"+time); 
 
    
 
    } 
 
}); 
 
    
 

 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="results">

在這裏，我已經使用Date對象的toLocaleDateString()功能，只是顯示的日期。還有其他選項，如toDateString()，toISOString（）。完整的參考可以在這裏找到：http://www.w3schools.com/jsref/jsref_obj_date.asp