我正在学习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。
谢谢
基于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>
通过使用正确的方法分配给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>