将日期范围传递给单独的输入答案

【问题标题】：Pass Date Range to seperate inputs将日期范围传递给单独的输入
【发布时间】：2020-04-02 20:05:11
【问题描述】：

我正在学习 JS，并且有一个关于使用日期范围选择器的问题。我想使用这种类型的选择，但是如何将开始和结束时间传递给 startDate 和 endDate 输入框？

HIDDEN: <input type="text" class="form-control" name="startDate" id="inlineFormInputGroup" placeholder="Start Date">
HIDDEN: <input type="text" class="form-control" name="endDate" id="inlineFormInputGroup" placeholder="End Date">

SHOWN on PAGE: <input type="text" class="form-control" name="date" id="demo" >

$('#demo').daterangepicker({
    ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    "startDate": "03/27/2020",
    "endDate": "04/02/2020"
}, 
    );
});

我在这里搜索，但所有内容都指向 python 脚本。这是 HTML 页面中的 JS。

谢谢

【问题讨论】：

我不确定你想要达到什么目的。
目前 JS 将 03/20/2020 - 03/31/2020 这样的日期放在一个输入中。我希望它拆分日期并将它们放入相应的输入中。
对不起。我不能跟着你。你想在选择器上使用一个日期选择器吗？
是的。我不知道如何使它更清楚。
我喜欢在输入字段 startdate 中显示的开始日期和在 enddate 输入中显示的结束日期。

标签： javascript html daterangepicker

【解决方案1】：

基于daterangepicker 的第一个例子，看起来你可以这样做：


<input type="text" name="daterange" value="" />
<input type="text" name="startdate" value="" />
<input type="text" name="enddate" value="" />

<script>
$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    $input[name="startdate"].value = start.format('MM-DD-YYYY')
    $input[name="enddate"].value = end.format('MM-DD-YYYY')
  });
});
</script>

【讨论】：

我试过这个，但它似乎不起作用。抱歉，回复晚了。 jsfiddle.net/erkc64ot

【解决方案2】：

我能够通过使用正确的方法在 JS 中分配输入来使其工作。


  $('input.date_range').daterangepicker({
    autoApply:true,
    ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
   },



   });

  $('form').submit(function (ev, picker) {
      [startDate, endDate] = $('.date_range').val().split(' - ');
      $(this).find('input[name="datemin"]').val(startDate);
      $(this).find('input[name="datemax"]').val(endDate);
  });

表格

  <form>

  <div class="form-row align-items-center">
    <div class="col-auto">
      <input type="hidden" name="datemin">
      <input type="hidden" name="datemax">
      <label class="sr-only" for="inlineFormInput">Select Date Range</label>
      <input type="text" class="form-control mb-2 date_range" id="inlineFormInput" size="30">
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
  </form>

https://jsfiddle.net/erkc64ot/5/

【讨论】：