Generate checkboxes dynamically for the given date range

Question

I'm developing simple meal ordering application.I need to generate checkboxes for the date count of given date range(FromDate -ToDate).Three checkboxes for each day.(Breakfast, Lunch, dinner).

Currently, I'm printing all dates of the date range by using

$('#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> '));
});

I have no idea how to change this code to generate checkboxes as 3 for each date. Someone help me.

Thank you

Answer 1

Are you looking for something like this:

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

Here I have used Date object's toLocaleDateString() function to just show the date. There are other options too like toDateString(), toISOString(). Complete refrence can be found here: http://www.w3schools.com/jsref/jsref_obj_date.asp