JavaScript — как фильтровать записи между двумя датами

У меня есть форма 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();
});

1

Решение

Файл маршрута (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>

Контроллер (TestController) с методом в магазине напишите следующий код

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
}
0

Другие решения

Других решений пока нет …