NH_Gooi/nhgooi.nl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Feature: Added new News date filter to the news page

Browse Source
This commit is contained in:
Jorit Tijsen
2025-06-30 16:40:44 +02:00
parent 34f5cfca73
commit 7f1688ee89
6 changed files with 91 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
resources/views/news.blade.php
View File

@@ -8,6 +8,60 @@
news
@endsection
@push('scripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
.input-group-text svg {
width: 24px;
height:24px;
fill: #0f259d
}
.datepicker {
border: 1px solid lightgray;
border-radius: 4px;
padding: 5px;
}
.daterangepicker .drp-buttons .btn {
border: none;
padding: 10px 39px 10px 39px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.daterangepicker.show-calendar .drp-buttons {
display: flex;
}
.daterangepicker .drp-selected {
display: none;
}
</style>
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left',
autoUpdateInput: false,
locale: {
cancelLabel: 'Annuleer',
applyLabel: 'Filteren'
}
}, function(start, end, label) {
$('input[name="daterange"]').val(start.format('DD-MM-YYYY') + ' - ' + end.format('DD-MM-YYYY'));
var $moreNews = $('.content_container #meer-nieuws');
var options = $('#meer-nieuws').data('loadmorenews');
options.dateStart = start.format('YYYY-MM-DD');
options.dateEnd = end.format('YYYY-MM-DD');
options.nextPage = 1;
console.log(options);
$('.content_container #items-more-news li').remove();
$moreNews.loadMoreNews(options);
$moreNews.click();
});
});
</script>
@endpush
@section('content')
<div class="clearfix">
{{-- body --}}
@@ -21,8 +75,16 @@
<div class="col-12 col-md content_container">
<div class="row">
<div class="col-md-12 col-12">
<h4 class="box_header"><span>Meer nieuws</span></h4>
<div class="box">
<div class="d-flex">
<h4 class="box_header flex-grow-1"><span>Meer nieuws</span></h4>
<h4 class="box_header ms-auto">
<div class="d-flex">
<div class="input-group-text me-sm-2" id="basic-addon1">{!!file_get_contents(__DIR__ . '/../../../public/images/icons/calendar.svg')!!}</div>
<input class="datepicker" type="text" name="daterange" placeholder="Selecteer datum" value=""/>
</div>
</h4>
</div>
<div class="box" style="width: CALC(100% - 55px);">
@include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $news])
</div>
</div>