1、先要修改掉视图文件,原视图文件在
vendor/dcat/laravel-admin/resources/views/widgets/metrics/card.blade.php
;
新建了一个本地视图
resources/views/widgets/metrics/card.blade.php
;增加了
.datepicker
的内容
<div {!! $attributes !!}>
<div class="card-header d-flex justify-content-between align-items-start pb-0">
@if($icon)
<div class="avatar bg-rgba-{{ $style }} p-50 m-0">
<div class="avatar-content">
<i class="{{ $icon }} text-{{ $style }} font-medium-5"></i>
@endif
@if($title)
<h4 class="card-title mb-1">{!! $title !!}</h4>
@endif
<div class="metric-header">{!! $header !!}</div>
@if (! empty($subTitle))
<span class="btn btn-sm bg-light shadow-0 p-0">
{{ $subTitle }}
</span>
@endif
@if(! empty($dropdown))
<div class="dropdown chart-dropdown">
<button class="btn btn-sm btn-light shadow-0 dropdown-toggle p-0 waves-effect" data-toggle="dropdown">
{{ current($dropdown) }}
</button>
<div class="dropdown-menu dropdown-menu-right">
@foreach($dropdown as $key => $value)
<li class="dropdown-item"><a href="javascript:void(0)" class="select-option" data-option="{{ $key }}">{{ $value }}</a></li>
@endforeach
@endif
@if(! empty($datepicker))
<div class="col-md-7 datepicker">
<div class="row">
<div class="col-lg-5 pl-0">
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text bg-white"><i class="feather icon-calendar"></i></span>
</span>
<input autocomplete="off" type="text" name="started" value="{{ $datepicker['start'] }}" class="form-control field_started" required="1" id="asdsss">
<div class="col-lg-5 pl-0">
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text bg-white"><i class="feather icon-calendar"></i></span>
</span>
<input autocomplete="off" type="text" name="ended" value="{{ $datepicker['end'] }}" class="form-control field_ended" required="1" id="_35455a066a22a942">
<div class="col-lg-2 pl-0 pr-0">
<button class="btn btn-primary btn-outline-info" data-started="{{ $datepicker['start'] }}" data-ended="{{ $datepicker['end'] }}">
<span class="d-none d-sm-inline">查询</span>
</button>
@endif
<div class="metric-content">{!! $content !!}</div>
2、修改统计卡片默认调用的视图,如图,统计卡片类里增加
protected $view = "widgets.metrics.card";
protected function file()
admin_css('/vendor/dcat-admin/dcat/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css');
admin_js('/vendor/dcat-admin/dcat/plugins/moment/moment-with-locales.min.js');
admin_js('/vendor/dcat-admin/dcat/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js');
* 绑定时间选择器点击事件
protected function script()
admin_script( <<<JS
Dcat.init('#{$this->id} .datepicker .field_started', function (self, id) { var options = {"format":"YYYY-MM-DD","locale":"zh_CN"};
var last = $('#{$this->id} .datepicker .field_ended');
self.datetimepicker(options);
last.datetimepicker($.extend(options, {useCurrent: false}));
self.on("dp.change", function (e) {
last.data("DateTimePicker").minDate(e.date);
$("#{$this->id} .datepicker .btn-primary").data('started', $(this).val())
last.on("dp.change", function (e) {
self.data("DateTimePicker").maxDate(e.date);
$("#{$this->id} .datepicker .btn-primary").data('ended', $(this).val())
4、引用trait
'datepicker' => [
'start' => date('Y-m-d', strtotime('-7 days')),
'end' => date('Y-m-d', time()),
#日期选择结束
array:4 [
"_key" => "App\Admin\Metrics\Home\Completion"