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

你在寻找这样的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

在这里，我使用Date对象的toLocaleDateString()函数来显示日期。还有其他选项，如toDateString()，toISOString（）。完整的参考可以在这里找到：http://www.w3schools.com/jsref/jsref_obj_date.asp

为给定的日期范围动态生成复选框

1 个答案: