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

Question

我刚刚学习 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。

Answer 1

我能够通过使用正确的方法分配给 JS 中的输入来使其工作。&nbsp; $('input.date_range').daterangepicker({&nbsp; &nbsp; autoApply:true,&nbsp; &nbsp; ranges: {&nbsp; &nbsp; &nbsp; &nbsp;'Today': [moment(), moment()],&nbsp; &nbsp; &nbsp; &nbsp;'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],&nbsp; &nbsp; &nbsp; &nbsp;'Last 7 Days': [moment().subtract(6, 'days'), moment()],&nbsp; &nbsp; &nbsp; &nbsp;'Last 30 Days': [moment().subtract(29, 'days'), moment()],&nbsp; &nbsp; &nbsp; &nbsp;'This Month': [moment().startOf('month'), moment().endOf('month')],&nbsp; &nbsp; &nbsp; &nbsp;'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]&nbsp; &nbsp;},&nbsp; &nbsp;});&nbsp; $('form').submit(function (ev, picker) {&nbsp; &nbsp; &nbsp; [startDate, endDate] = $('.date_range').val().split(' - ');&nbsp; &nbsp; &nbsp; $(this).find('input[name="datemin"]').val(startDate);&nbsp; &nbsp; &nbsp; $(this).find('input[name="datemax"]').val(endDate);&nbsp; });形式&nbsp; <form>&nbsp; <div class="form-row align-items-center">&nbsp; &nbsp; <div class="col-auto">&nbsp; &nbsp; &nbsp; <input type="hidden" name="datemin">&nbsp; &nbsp; &nbsp; <input type="hidden" name="datemax">&nbsp; &nbsp; &nbsp; <label class="sr-only" for="inlineFormInput">Select Date Range</label>&nbsp; &nbsp; &nbsp; <input type="text" class="form-control mb-2 date_range" id="inlineFormInput" size="30">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-auto">&nbsp; &nbsp; &nbsp; <button type="submit" class="btn btn-primary mb-2">Submit</button>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; </form>https://jsfiddle.net/erkc64ot/5/

Answer 2

您似乎可以执行以下操作：<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>