javascript - 从开始日期和结束日期创建 Javascript 或 Jquery 日期数组

我正在尝试创建一个页内 div，它将采用开始日期、结束日期和一些其他输入字段，并让它在该时间范围内每 90 天生成预先格式化的文本。我尝试过使用 moment.js 来使日期操作更容易一些。这一切都需要包含在一页内。

    <html>
    <head>
    <title>  </title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    </head>
    <body>
    <label for="startDate">Start Date: </label>
    <input type="Date" value="" id="startDate" />
    <br/>
    <br/>
    <label for="endDate">End Date: </label>
    <input type="Date" value="" id="endDate" />
    <br/>
    <br/>
    <label for="radio">Radio Value: </label>
    <input type="radio" value="1" id="radio" />
    <br/>
    <label for="radio">Radio Value: </label>
    <input type="radio" value="2" id="radio" />
    <br/>
    <br/>
    <label for="region1">Type State or Country: </label>
    <input type="text" list="regionList1" id="region1"  />
    <datalist id="regionList1">
    <option value="AS">All States</option>
    <option value="AK">All Countries</option>
    </datalist>
    <br/>
    <br/>
    <label for="region2">Type State or Country: </label>
    <input type="text" list="regionList2" id="region2"  />
    <datalist id="regionList2">
    <option value="AS">All States</option>
    <option value="AK">All Countries</option>
    </datalist>
    <br/>
    <br/>
    <label for="region3">Type State or Country: </label>
    <input type="text" list="regionList3" id="region3"  />
    <datalist id="regionList3">
    <option value="AS">All States</option>
    <option value="AK">All Countries</option>
    </datalist>
    <br/>
    <br/>
    <label for="region4">Type State or Country: </label>
    <input type="text" list="regionList4" id="region4"  />
    <datalist id="regionList4">
    <option value="AS">All States</option>
    <option value="AK">All Countries</option>
    </datalist>
    <br/>
    <br/>
    <label for="region5">Type State or Country: </label>
    <input type="text" list="regionList5" id="region5"  />
    <datalist id="regionList5">
    <option value="AS">All States</option>
    <option value="AK">All Countries</option>
    </datalist>
    <br/>
    <br/>
    <label for="phone">Phone: </label>
    <input type="phone" id="phone" placeholder="999-999-9999" />
    <br/>
    <br/>
    <button type="submit" id="test" onClick="">SUBMIT</button> 
    <button type="reset" onClick="window.location.reload()">RESET</button>
    <br/>
    <br/>
    <div id="result"> 
    <!-- 
    This is where the program will generate a <div> tag, it should have:
    <div>
    Start Date <br/>
    (Start Date + 90 Days) <br/>
    Some Standard Text for Every Div Entry
    Radio Value <br/>
    Region1 - 5
    Phone Value <br/>
    Region1 Value <br/>
    Region2 Value <br/>
    Region3 Value <br/>
    Region4 Value <br/>
    Region5 Value <br/>
    </div>
    And This Div Should Be Repeated for Each 90 Day Date Range, Including Start and End Dates
    -->
    </div>
    </body>
    </html>

现在，我已经尝试了几次，并有一些部分解决方案，但由于我对此进行了搜索和搜索，但找不到足够的解决方案，我想询问社区他们将如何为我的内容编写代码我要求。由于某种原因，我很难理解这个问题。我让它有一个开始日期并显示额外的 90 天 block ，但是当我到达结束日期时，它不会将其添加到最后一个 div block 。我编写了一堆文件，试图处理这个逻辑，所以仅仅复制和粘贴代码没有任何意义。我实在是太笨了，找不到答案。

我对纯 javascript 或 jquery 解决方案持开放态度。我真的很感谢任何可以让这个为我工作的指示。

编辑

感谢所有为此提供帮助的人。我在 Rocky 的帮助下从下面想出了一个解决方案。

<html>
<head>
<title>  
</title>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js">
</script>
<style>
  #result {
    display:inline-block;
    border:1px solid black;
    margin:1px;
    padding:3px;
  }
</style>
</head>
<body>
<label for="startDate">Start Date: </label>
<input type="Date" value="" id="startDate" />
<br/>
<br/>
<label for="endDate">End Date: </label>
<input type="Date" value="" id="endDate" />
<br/>
<br/>
<label for="radio">Radio Value: </label>
<input type="radio" value="i" id="radio" name="radio" />
<br/>
<label for="radio">Radio Value: </label>
<input type="radio" value="d" id="radio" name="radio" />
<br/>
<br/>
<label for="region1">Type State or Country: </label>
<input type="text" list="regionList1" id="region1"  />
<datalist id="regionList1">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region2">Type State or Country: </label>
<input type="text" list="regionList2" id="region2"  />
<datalist id="regionList2">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region3">Type State or Country: </label>
<input type="text" list="regionList3" id="region3"  />
<datalist id="regionList3">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region4">Type State or Country: </label>
<input type="text" list="regionList4" id="region4"  />
<datalist id="regionList4">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region5">Type State or Country: </label>
<input type="text" list="regionList5" id="region5"  />
<datalist id="regionList5">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="phone">Phone: </label>
<input type="phone" id="phone" placeholder="999-999-9999" />
<br/>
<br/>
<button type="submit" id="test" onClick="">SUBMIT</button> 
<button type="reset" onClick="window.location.reload()">RESET</button>
<br/>
<br/>
<div id="result"> 
</div>
<script>
$(function() {
$('#test').click(function() {
var region1 = $('#region1').val();
var region2 = $('#region2').val();
var region3 = $('#region3').val();
var region4 = $('#region4').val();
var region5 = $('#region5').val();

var radio = $('input[name=radio]:checked').val();

var phone = $('#phone').val();

const startDate = moment($('#startDate').val());
const endDate = moment($('#endDate').val());

const dateRanges = buildDateRanges(startDate, endDate);

//build result html
var result = '';
dateRanges.forEach(function(dateRange) {
  var html = '';
  html += '<div id="result">';
  html +=   'start: ' + dateRange.start.format('Y-M-D') + '<br/>';
  html +=   'end: ' + dateRange.end.format('Y-M-D') + '<br/>';
  html +=   'radio: ' + radio + '<br/>';
  html +=   'regions: ' + region1 + ", " +  region2 + ", " + region3 + ", " 
  + region4 + ", " + region5 +'<br/>';
  html +=   'phone: ' + phone + '<br/>';
  html +=   'region1: ' + region1 + '<br/>';
  html +=   'region2: ' + region2 + '<br/>';
  html +=   'region3: ' + region3 + '<br/>';
  html +=   'region4: ' + region4 + '<br/>';
  html +=   'region5: ' + region5 + '<br/>';
  html += '</div>';
  result += html;
});

$('#result').html(result);
});

function buildDateRanges(startDate, endDate) {
const dateRanges = [];

var curDate = moment(startDate);
while (curDate.isSameOrBefore(endDate)) {
  const range = {
    start: moment(curDate),
    end: moment(curDate).add(90, 'days')
  };
  if (range.end.isAfter(endDate)) range.end = endDate;

  dateRanges.push(range);

  curDate = moment(range.end).add(1, 'd');
}

return dateRanges;
}
});
</script>
</body>
</html>

最佳答案

这是我编写的代码，用于执行您所描述内容的简化版本。希望对您有所帮助。

$(function() {
  $('#test').click(function() {
    const startDate = moment($('#startDate').val());
    const endDate = moment($('#endDate').val());

    const dateRanges = buildDateRanges(startDate, endDate);

    //build result html
    var result = '';
    dateRanges.forEach(function(dateRange) {
      var html = '';
      html += '<div>';
      html +=   'start: ' + dateRange.start.format('Y-M-D') + '<br/>';
      html +=   'end: ' + dateRange.end.format('Y-M-D') + '<br/>';
      html += '</div>';
      result += html;
    });

    $('#result').html(result);
  });

  function buildDateRanges(startDate, endDate) {
    const dateRanges = [];

    var curDate = moment(startDate);
    while (curDate.isSameOrBefore(endDate)) {
      const range = {
        start: moment(curDate),
        end: moment(curDate).add(3, 'M')
      };
      if (range.end.isAfter(endDate)) range.end = endDate;

      dateRanges.push(range);

      curDate = moment(range.end).add(1, 'd');
    }

    return dateRanges;
  }
});

关于javascript - 从开始日期和结束日期创建 Javascript 或 Jquery 日期数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49141744/

javascript - 从开始日期和结束日期创建 Javascript 或 Jquery 日期数组

上一篇：javascript - 在同一个php文件中访问 session 变量

下一篇：javascript - 如何在不更改按钮定义或以前编写的函数的情况下在按钮单击时分配前置和后置函数