[英]GET a non-input field such as the boostrap datepicker in a form
我正在嘗試通過使用GET提交的表單從boostrap daterangepicker發送數據: http ://www.daterangepicker.com/。
這是HTMl的樣子:
<form class="form-inline" id="searchForm" role="form" action="https://script.google.com/a/macros/firstcallres.com/s/AKfycbydvjgkr3nTfA-ZLHe_m1kqavoJCjQhl5bm7Tqelo4/dev" method="get">
<div class="form-group col-xs-3" style="margin-left: 10px;">
<label for="nameInput">Name:</label>
<input type="text" class="form-control" id="nameInput" list="colleagueNames" placeholder="Colleague Name" style=" padding: 1px;" name="user">
</div>
<div class="form-group col-xs-3" style="margin-left:10px;">
<label for="reportTypeInput">Report Type:</label>
<input type="text" class="form-control" id="reportTypeInput" placeholder="Report Type" name="reportType">
</div>
<div class="form-group col-xs-4" style="margin-left:10px">
<label for="dateSelector">Date Range:</label>
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; height: 28px;">
<i type="text" id="dateSelector" class="glyphicon glyphicon-calendar fa fa-calendar" name="dateRange"></i>
<span></span> <b class="caret"></b>
</div>
</div>
<div class="form-group" style="margin-top:25px; margin-left:10px;">
<button type="submit" class="btn btn-primary" style="text-align:center;">Search</button>
</div>
</form>
用於初始化的Javascript:
UpdateDatePickerView(moment().subtract(29, 'days'), moment());
$('#reportrange').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')]
}
}, UpdateDatePickerView);
function UpdateDatePickerView(start, end)
{
$('#reportrange span').html(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
}
它不是input
,提交表單時不會發送。 我將如何獲取與表單一起提交的日期選擇器數據?
您需要向<form>
添加一個隱藏的<input>
元素,並用daterangepicker中的值填充它。 請參閱此演示作為指南:
<form method="get">
<input type="hidden" name="reportrange" id="hd-reportrange"> <!-- check the "reportrange GET value on the server" -->
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; height: 28px;">
<i id="dateSelector" class="glyphicon glyphicon-calendar fa fa-calendar" name="dateRange"></i>
<span></span> <b class="caret"></b>
</div>
</form>
<script>
$( '#reportrange' ).daterangepicker(
{},
function( start, end, label ) {
$('#hd-reportrange').val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD')); //format this values as you which so the server get the info in a straightforward way.
}
);
</script>
祝好運!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.