mirror/snipe-it
3
0
Fork 0
mirror of https://github.com/snipe/snipe-it.git synced 2026-08-18 03:06:23 +00:00
Code Issues Projects Releases Wiki Activity

Use new daterange component

Browse Source
This commit is contained in:
snipe
2026-07-17 18:17:33 +01:00
parent e281416cf6
commit be47b9d409
4 changed files with 172 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
resources/views/blade/input/date-range.blade.php Normal file
View File

@ -0,0 +1,44 @@
@props([
'name_start',
'name_end',
'value_start' => '',
'value_end' => '',
'placeholder' => trans('general.select_date'),
// 'today' caps both pickers at today, or pass a moment-parseable string.
// Null (default) leaves both pickers uncapped.
'max_date' => null,
'format' => 'YYYY-MM-DD',
'id' => null,
])
{{-- Two eonasdan datetimepickers linked so picking a start date sets the
end picker's minDate, and picking an end date sets the start picker's
maxDate. Replaces the bootstrap-datepicker .input-daterange pattern.
Linking is handled in snipeit.js by pairing .js-date-range-start with
the .js-date-range-end sibling under the same .js-date-range parent. --}}
<div {{ $attributes->merge(['class' => 'row js-date-range']) }} @if ($id) id="{{ $id }}" @endif>
<div class="col-xs-6" style="padding-right: 5px;">
<div
class="input-group date js-date-range-start"
data-provide="datetimepicker"
data-format="{{ $format }}"
data-default-now="false"
@if ($max_date) data-max-date="{{ $max_date }}" @endif
>
<input type="text" name="{{ $name_start }}" value="{{ $value_start }}" placeholder="{{ $placeholder }}" aria-label="{{ $name_start }}" class="form-control">
<span class="input-group-addon"><x-icon type="calendar" /></span>
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div
class="input-group date js-date-range-end"
data-provide="datetimepicker"
data-format="{{ $format }}"
data-default-now="false"
@if ($max_date) data-max-date="{{ $max_date }}" @endif
>
<input type="text" name="{{ $name_end }}" value="{{ $value_end }}" placeholder="{{ $placeholder }}" aria-label="{{ $name_end }}" class="form-control">
<span class="input-group-addon"><x-icon type="calendar" /></span>
</div>
</div>
</div>

194
resources/views/reports/custom/asset.blade.php
View File

@ -434,12 +434,15 @@
<!-- Purchase Date -->
<div class="form-group purchase-range{{ ($errors->has('purchase_start') || $errors->has('purchase_end')) ? ' has-error' : '' }}">
<label for="purchase_start" class="col-md-3 control-label">{{ trans('general.purchase_date') }}</label>
<div class="input-daterange input-group col-md-7" id="purchase-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="purchase_start" aria-label="purchase_start" value="{{ $template->textValue('purchase_start', old('purchase_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="purchase_end" aria-label="purchase_end" value="{{ $template->textValue('purchase_end', old('purchase_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="purchase-range-datepicker"
name_start="purchase_start"
name_end="purchase_end"
:value_start="$template->textValue('purchase_start', old('purchase_start'))"
:value_end="$template->textValue('purchase_end', old('purchase_end'))"
max_date="today"
/>
@if ($errors->has('purchase_start') || $errors->has('purchase_end'))
<div class="col-md-9 col-lg-offset-3">
@ -471,11 +474,15 @@
<!-- Created Date -->
<div class="form-group created-range{{ ($errors->has('created_start') || $errors->has('created_end')) ? ' has-error' : '' }}">
<label for="created_start" class="col-md-3 control-label">{{ trans('general.created_at') }} </label>
<div class="input-daterange input-group col-md-7" id="created-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="created_start" aria-label="created_start" value="{{ $template->textValue('created_start', old('created_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="created_end" aria-label="created_end" value="{{ $template->textValue('created_end', old('created_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="created-range-datepicker"
name_start="created_start"
name_end="created_end"
:value_start="$template->textValue('created_start', old('created_start'))"
:value_end="$template->textValue('created_end', old('created_end'))"
max_date="today"
/>
@if ($errors->has('created_start') || $errors->has('created_end'))
<div class="col-md-9 col-lg-offset-3">
@ -488,11 +495,15 @@
<!-- Checkout Date -->
<div class="form-group checkout-range{{ ($errors->has('checkout_date_start') || $errors->has('checkout_date_end')) ? ' has-error' : '' }}">
<label for="checkout_date" class="col-md-3 control-label">{{ trans('general.checkout') }} </label>
<div class="input-daterange input-group col-md-7" id="checkout-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="checkout_date_start" aria-label="checkout_date_start" value="{{ $template->textValue('checkout_date_start', old('checkout_date_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="checkout_date_end" aria-label="checkout_date_end" value="{{ $template->textValue('checkout_date_end', old('checkout_date_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="checkout-range-datepicker"
name_start="checkout_date_start"
name_end="checkout_date_end"
:value_start="$template->textValue('checkout_date_start', old('checkout_date_start'))"
:value_end="$template->textValue('checkout_date_end', old('checkout_date_end'))"
max_date="today"
/>
@if ($errors->has('checkout_date_start') || $errors->has('checkout_date_end'))
<div class="col-md-9 col-lg-offset-3">
@ -506,11 +517,15 @@
<!-- Last Checkin Date -->
<div class="form-group checkin-range{{ ($errors->has('checkin_date_start') || $errors->has('checkin_date_end')) ? ' has-error' : '' }}">
<label for="checkin_date" class="col-md-3 control-label">{{ trans('admin/hardware/table.last_checkin_date') }}</label>
<div class="input-daterange input-group col-md-7" id="checkin-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="checkin_date_start" aria-label="checkin_date_start" value="{{ $template->textValue('checkin_date_start', old('checkin_date_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="checkin_date_end" aria-label="checkin_date_end" value="{{ $template->textValue('checkin_date_end', old('checkin_date_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="checkin-range-datepicker"
name_start="checkin_date_start"
name_end="checkin_date_end"
:value_start="$template->textValue('checkin_date_start', old('checkin_date_start'))"
:value_end="$template->textValue('checkin_date_end', old('checkin_date_end'))"
max_date="today"
/>
@if ($errors->has('checkin_date_start') || $errors->has('checkin_date_end'))
<div class="col-md-9 col-lg-offset-3">
@ -523,11 +538,14 @@
<!-- Expected Checkin Date -->
<div class="form-group expected_checkin-range{{ ($errors->has('expected_checkin_start') || $errors->has('expected_checkin_end')) ? ' has-error' : '' }}">
<label for="expected_checkin_start" class="col-md-3 control-label">{{ trans('admin/hardware/form.expected_checkin') }}</label>
<div class="input-daterange input-group col-md-7" id="expected_checkin-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="expected_checkin_start" aria-label="expected_checkin_start" value="{{ $template->textValue('expected_checkin_start', old('expected_checkin_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="expected_checkin_end" aria-label="expected_checkin_end" value="{{ $template->textValue('expected_checkin_end', old('expected_checkin_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="expected_checkin-range-datepicker"
name_start="expected_checkin_start"
name_end="expected_checkin_end"
:value_start="$template->textValue('expected_checkin_start', old('expected_checkin_start'))"
:value_end="$template->textValue('expected_checkin_end', old('expected_checkin_end'))"
/>
@if ($errors->has('expected_checkin_start') || $errors->has('expected_checkin_end'))
<div class="col-md-9 col-lg-offset-3">
@ -541,11 +559,14 @@
<!-- EoL Date -->
<div class="form-group asset_eol_date-range {{ ($errors->has('asset_eol_date_start') || $errors->has('asset_eol_date_end')) ? ' has-error' : '' }}">
<label for="asset_eol_date" class="col-md-3 control-label">{{ trans('admin/hardware/form.eol_date') }}</label>
<div class="input-daterange input-group col-md-7" id="asset_eol_date-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="asset_eol_date_start" aria-label="asset_eol_date_start" value="{{ $template->textValue('asset_eol_date_start', old('asset_eol_date_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="asset_eol_date_end" aria-label="asset_eol_date_end" value="{{ $template->textValue('asset_eol_date_end', old('asset_eol_date_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="asset_eol_date-range-datepicker"
name_start="asset_eol_date_start"
name_end="asset_eol_date_end"
:value_start="$template->textValue('asset_eol_date_start', old('asset_eol_date_start'))"
:value_end="$template->textValue('asset_eol_date_end', old('asset_eol_date_end'))"
/>
@if ($errors->has('asset_eol_date_start') || $errors->has('asset_eol_date_end'))
<div class="col-md-9 col-lg-offset-3">
@ -558,11 +579,15 @@
<!-- Last Audit Date -->
<div class="form-group last_audit-range{{ ($errors->has('last_audit_start') || $errors->has('last_audit_end')) ? ' has-error' : '' }}">
<label for="last_audit_start" class="col-md-3 control-label">{{ trans('general.last_audit') }}</label>
<div class="input-daterange input-group col-md-7" id="last_audit-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="last_audit_start" aria-label="last_audit_start" value="{{ $template->textValue('last_audit_start', old('last_audit_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="last_audit_end" aria-label="last_audit_end" value="{{ $template->textValue('last_audit_end', old('last_audit_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="last_audit-range-datepicker"
name_start="last_audit_start"
name_end="last_audit_end"
:value_start="$template->textValue('last_audit_start', old('last_audit_start'))"
:value_end="$template->textValue('last_audit_end', old('last_audit_end'))"
max_date="today"
/>
@if ($errors->has('last_audit_start') || $errors->has('last_audit_end'))
<div class="col-md-9 col-lg-offset-3">
@ -575,11 +600,14 @@
<!-- Next Audit Date -->
<div class="form-group next_audit-range{{ ($errors->has('next_audit_start') || $errors->has('next_audit_end')) ? ' has-error' : '' }}">
<label for="next_audit_start" class="col-md-3 control-label">{{ trans('general.next_audit_date') }}</label>
<div class="input-daterange input-group col-md-7" id="next_audit-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="next_audit_start" aria-label="next_audit_start" value="{{ $template->textValue('next_audit_start', old('next_audit_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="next_audit_end" aria-label="next_audit_end" value="{{ $template->textValue('next_audit_end', old('next_audit_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="next_audit-range-datepicker"
name_start="next_audit_start"
name_end="next_audit_end"
:value_start="$template->textValue('next_audit_start', old('next_audit_start'))"
:value_end="$template->textValue('next_audit_end', old('next_audit_end'))"
/>
@if ($errors->has('next_audit_start') || $errors->has('next_audit_end'))
<div class="col-md-9 col-lg-offset-3">
@ -592,11 +620,15 @@
<!-- Last updated Date -->
<div class="form-group last_updated-range{{ ($errors->has('last_updated_start') || $errors->has('last_updated_end')) ? ' has-error' : '' }}">
<label for="last_updated_start" class="col-md-3 control-label">{{ trans('general.updated_at') }}</label>
<div class="input-daterange input-group col-md-7" id="last_updated-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="last_updated_start" aria-label="last_updated_start" value="{{ $template->textValue('last_updated_start', old('last_updated_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="last_updated_end" aria-label="last_updated_end" value="{{ $template->textValue('last_updated_end', old('last_updated_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="last_updated-range-datepicker"
name_start="last_updated_start"
name_end="last_updated_end"
:value_start="$template->textValue('last_updated_start', old('last_updated_start'))"
:value_end="$template->textValue('last_updated_end', old('last_updated_end'))"
max_date="today"
/>
@if ($errors->has('last_updated_start') || $errors->has('last_updated_end'))
<div class="col-md-9 col-lg-offset-3">
@ -814,76 +846,6 @@
@section('moar_scripts')
<script>
$('.purchase-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
endDate: '0d',
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('.created-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
endDate: '0d',
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('.checkout-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
endDate: '0d',
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('.checkin-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
endDate: '0d',
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('.expected_checkin-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('.asset_eol_date-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('.last_audit-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
endDate:'0d',
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('.next_audit-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('.last_updated-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
endDate:'0d',
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$("#checkAll").change(function () {
$("#included_fields_wrapper input:checkbox").prop('checked', $(this).prop("checked"));
});

89
resources/views/reports/custom/component.blade.php
View File

@ -281,12 +281,15 @@
<!-- Purchase Date -->
<div class="form-group purchase-range{{ ($errors->has('purchase_start') || $errors->has('purchase_end')) ? ' has-error' : '' }}">
<label for="purchase_start" class="col-md-3 control-label">{{ trans('general.purchase_date') }}</label>
<div class="input-daterange input-group col-md-7" id="purchase-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="purchase_start" aria-label="purchase_start" value="{{ $template->textValue('purchase_start', old('purchase_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="purchase_end" aria-label="purchase_end" value="{{ $template->textValue('purchase_end', old('purchase_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="purchase-range-datepicker"
name_start="purchase_start"
name_end="purchase_end"
:value_start="$template->textValue('purchase_start', old('purchase_start'))"
:value_end="$template->textValue('purchase_end', old('purchase_end'))"
max_date="today"
/>
@if ($errors->has('purchase_start') || $errors->has('purchase_end'))
<div class="col-md-9 col-lg-offset-3">
@ -350,11 +353,15 @@
<!-- Checkout Date -->
<div class="form-group checkout-range{{ ($errors->has('checkout_date_start') || $errors->has('checkout_date_end')) ? ' has-error' : '' }}">
<label for="checkout_date" class="col-md-3 control-label">{{ trans('general.checkout') }} </label>
<div class="input-daterange input-group col-md-7" id="checkout-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="checkout_date_start" aria-label="checkout_date_start" value="{{ $template->textValue('checkout_date_start', old('checkout_date_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="checkout_date_end" aria-label="checkout_date_end" value="{{ $template->textValue('checkout_date_end', old('checkout_date_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="checkout-range-datepicker"
name_start="checkout_date_start"
name_end="checkout_date_end"
:value_start="$template->textValue('checkout_date_start', old('checkout_date_start'))"
:value_end="$template->textValue('checkout_date_end', old('checkout_date_end'))"
max_date="today"
/>
@if ($errors->has('checkout_date_start') || $errors->has('checkout_date_end'))
<div class="col-md-9 col-lg-offset-3">
@ -367,11 +374,15 @@
<!-- Created Date -->
<div class="form-group created-range{{ ($errors->has('created_start') || $errors->has('created_end')) ? ' has-error' : '' }}">
<label for="created_start" class="col-md-3 control-label">{{ trans('general.created_at') }} </label>
<div class="input-daterange input-group col-md-7" id="created-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="created_start" aria-label="created_start" value="{{ $template->textValue('created_start', old('created_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="created_end" aria-label="created_end" value="{{ $template->textValue('created_end', old('created_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="created-range-datepicker"
name_start="created_start"
name_end="created_end"
:value_start="$template->textValue('created_start', old('created_start'))"
:value_end="$template->textValue('created_end', old('created_end'))"
max_date="today"
/>
@if ($errors->has('created_start') || $errors->has('created_end'))
<div class="col-md-9 col-lg-offset-3">
@ -384,11 +395,15 @@
<!-- Last updated Date -->
<div class="form-group last_updated-range{{ ($errors->has('last_updated_start') || $errors->has('last_updated_end')) ? ' has-error' : '' }}">
<label for="last_updated_start" class="col-md-3 control-label">{{ trans('general.updated_at') }}</label>
<div class="input-daterange input-group col-md-7" id="last_updated-range-datepicker">
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="last_updated_start" aria-label="last_updated_start" value="{{ $template->textValue('last_updated_start', old('last_updated_start')) }}">
<span class="input-group-addon"> - </span>
<input type="text" placeholder="{{ trans('general.select_date') }}" class="form-control" name="last_updated_end" aria-label="last_updated_end" value="{{ $template->textValue('last_updated_end', old('last_updated_end')) }}">
</div>
<x-input.date-range
class="col-md-7"
id="last_updated-range-datepicker"
name_start="last_updated_start"
name_end="last_updated_end"
:value_start="$template->textValue('last_updated_start', old('last_updated_start'))"
:value_end="$template->textValue('last_updated_end', old('last_updated_end'))"
max_date="today"
/>
@if ($errors->has('last_updated_start') || $errors->has('last_updated_end'))
<div class="col-md-9 col-lg-offset-3">
@ -542,38 +557,6 @@
$("#included_fields_wrapper input:checkbox").prop('checked', $(this).prop("checked"));
});
$('.purchase-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
endDate: '0d',
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('.checkout-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
endDate: '0d',
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('.created-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
endDate:'0d',
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('.last_updated-range .input-daterange').datepicker({
clearBtn: true,
todayHighlight: true,
endDate:'0d',
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$("#savetemplateform").submit(function(e) {
e.preventDefault(e);

29
resources/views/reports/index.blade.php
View File

@ -85,10 +85,12 @@
<option value="365">{{ trans('general.last_n_days', ['days' => 365]) }}</option>
<option value="custom">{{ trans('general.custom_range') }}…</option>
</select>
<div id="customRangePicker" class="input-daterange input-group" style="display:none; width:auto;">
<input type="text" id="chartStartDate" class="form-control input-sm" placeholder="{{ trans('general.select_date') }}" style="width:110px;" autocomplete="off">
<span class="input-group-addon">–</span>
<input type="text" id="chartEndDate" class="form-control input-sm" placeholder="{{ trans('general.select_date') }}" style="width:110px;" autocomplete="off">
<div id="customRangePicker" style="display:none;">
<x-input.date-range
name_start="chartStartDate"
name_end="chartEndDate"
max_date="today"
/>
</div>
</form>
@ -655,17 +657,14 @@ $('#chartTimeRange').on('change', function() {
}
});
$('#customRangePicker').datepicker({
clearBtn: true,
todayHighlight: true,
endDate: '0d',
format: 'yyyy-mm-dd',
keepEmptyValues: true,
});
$('#customRangePicker').on('changeDate', function() {
var start = $('#chartStartDate').val();
var end = $('#chartEndDate').val();
// dp.change is eonasdan datetimepicker's equivalent of bootstrap-datepicker's
// changeDate event. Init is handled automatically by data-provide on the
// component; we only need the read-both-values-and-reload handler here.
// The inputs use name attributes to satisfy the component prop; JS still
// reads by id since chartStartDate / chartEndDate are the id values too.
$('#customRangePicker').on('dp.change', 'input', function() {
var start = $('[name="chartStartDate"]').val();
var end = $('[name="chartEndDate"]').val();
if (start && end && start <= end) {
loadCharts({ start_date: start, end_date: end });
}