我有javascript表单来显示两个日期,我想知道如何使用此表单来过滤两个日期之间的记录。 我不知道如何向控制器发送请求以过滤记录! 我包括来自文件的脚本,请需要帮助来制作控制器并使用ajax响应显示记录
请查看如何显示日期的屏幕截图
<div class='input-group pull-right' id='m_daterangepicker_6'>
<input type='text' class="form-control m-input" readonly placeholder="Select date range"/>
<span class="input-group-addon">
<i class="fa fa-calendar fa-fw" aria-hidden="true"></i>
</span>
</div>
此处显示日期的代码
<td class="col-sm-2">{{date('m/d/Y', strtotime($check->postingdate))}}</td>
**here javascript**
// ==班级定义
var BootstrapDaterangepicker = function () {
//== Private functions
var demos = function () {
// minimum setup
$('#m_daterangepicker_1, #m_daterangepicker_1_modal').daterangepicker({
buttonClasses: 'm-btn btn',
applyClass: 'btn-primary',
cancelClass: 'btn-secondary'
});
// input group and left alignment setup
$('#m_daterangepicker_2').daterangepicker({
buttonClasses: 'm-btn btn',
applyClass: 'btn-primary',
cancelClass: 'btn-secondary'
}, function(start, end, label) {
$('#m_daterangepicker_2 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
});
$('#m_daterangepicker_2_modal').daterangepicker({
buttonClasses: 'm-btn btn',
applyClass: 'btn-primary',
cancelClass: 'btn-secondary'
}, function(start, end, label) {
$('#m_daterangepicker_2 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
});
// left alignment setup
$('#m_daterangepicker_3').daterangepicker({
buttonClasses: 'm-btn btn',
applyClass: 'btn-primary',
cancelClass: 'btn-secondary'
}, function(start, end, label) {
$('#m_daterangepicker_3 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
});
$('#m_daterangepicker_3_modal').daterangepicker({
buttonClasses: 'm-btn btn',
applyClass: 'btn-primary',
cancelClass: 'btn-secondary'
}, function(start, end, label) {
$('#m_daterangepicker_3 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
});
// date & time
$('#m_daterangepicker_4').daterangepicker({
buttonClasses: 'm-btn btn',
applyClass: 'btn-primary',
cancelClass: 'btn-secondary',
timePicker: true,
timePickerIncrement: 30,
locale: {
format: 'MM/DD/YYYY h:mm A'
}
}, function(start, end, label) {
$('#m_daterangepicker_4 .form-control').val(
start.format('MM/DD/YYYY h:mm A') + ' / ' + end.format('MM/DD/YYYY h:mm A'));
});
// date picker
$('#m_daterangepicker_5').daterangepicker({
buttonClasses: 'm-btn btn',
applyClass: 'btn-primary',
cancelClass: 'btn-secondary',
singleDatePicker: true,
showDropdowns: true,
locale: {
format: 'MM/DD/YYYY'
}
}, function(start, end, label) {
$('#m_daterangepicker_5 .form-control').val(
start.format('MM/DD/YYYY') + ' / ' + end.format('MM/DD/YYYY'));
});
// predefined ranges
var start = moment().subtract(29, 'days');
var end = moment();
$('#m_daterangepicker_6').daterangepicker({
buttonClasses: 'm-btn btn',
applyClass: 'btn-primary',
cancelClass: 'btn-secondary',
startDate: start,
endDate: end,
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')]
}
}, function(start, end, label) {
$('#m_daterangepicker_6 .form-control').val(
start.format('MM/DD/YYYY') + ' / ' + end.format('MM/DD/YYYY'));
});
}
var validationDemos = function() {
// input group and left alignment setup
$('#m_daterangepicker_1_validate').daterangepicker({
buttonClasses: 'm-btn btn',
applyClass: 'btn-primary',
cancelClass: 'btn-secondary'
}, function(start, end, label) {
$('#m_daterangepicker_1_validate .form-control').val(
start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
});
// input group and left alignment setup
$('#m_daterangepicker_2_validate').daterangepicker({
buttonClasses: 'm-btn btn',
applyClass: 'btn-primary',
cancelClass: 'btn-secondary'
}, function(start, end, label) {
$('#m_daterangepicker_3_validate .form-control').val(
start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
});
// input group and left alignment setup
$('#m_daterangepicker_3_validate').daterangepicker({
buttonClasses: 'm-btn btn',
applyClass: 'btn-primary',
cancelClass: 'btn-secondary'
}, function(start, end, label) {
$('#m_daterangepicker_3_validate .form-control').val(
start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
});
}
return {
// public functions
init: function() {
demos();
validationDemos();
}
};
}();
jQuery(document).ready(function() {
BootstrapDaterangepicker.init();
});
答案 0 :(得分:0)
路线文件(web.php):
Route::match(['get','post'],'test','TestController')->name('search');
<强> HTML 强>
<form action="{{ route('search') }}" method="POST">
{{ csrf_field() }}
.. input field to fetch dates
</form>
Controller(TestController)用in store方法编写以下代码
public function search(Request $request)
{
$input1 = $request->input('name_of_input_1');
$input2 = $request->input('name_of_input_2');
$result = ModelName::whereBetween('created_at',[$startDate,$endDate])->get();
dd($result); // this will print out the results
}