开始开发date range picker小物件

common/models/Category.php

@@ -19,6 +19,14 @@ use yii\behaviors\TimestampBehavior;
  */
 class Category extends \yii\db\ActiveRecord {
 
+    const ICON_TYPE_BOOSTARAP = 1;
+    const ICON_TYPE_AWESOME = 2;
+
+    public static $iconType = [
+        self::ICON_TYPE_BOOSTARAP => "boostrap",
+        self::ICON_TYPE_AWESOME => "awesome"
+    ];
+
     /**
      * {@inheritdoc}
      */
@@ -26,20 +34,18 @@ class Category extends \yii\db\ActiveRecord {
         return 'category';
     }
 
-
-
     /**
      * {@inheritdoc}
      */
     public function attributeLabels() {
         return [
             'id' => 'ID',
-            'cat_name' => 'Cat Name',
+            'cat_name' => '类名',
             'icon' => 'Icon',
-            'icon_type' => 'Icon Type',
-            'description' => 'Description',
+            'icon_type' => '图标类型',
+            'description' => '描述',
             'sort_order' => 'Sort Order',
-            'created_at' => 'Created At',
+            'created_at' => '添加日期',
             'updated_at' => 'Updated At',
         ];
     }

common/models/CategorySearch.php

@@ -16,7 +16,7 @@ class CategorySearch extends Category {
      */
     public function rules() {
         return [
-            [['id', 'icon_type', 'sort_order', 'created_at', 'updated_at'], 'integer'],
+            [['cat_name','id', 'icon_type', 'sort_order', 'created_at', 'updated_at'], 'integer'],
             [['cat_name', 'icon', 'description'], 'safe'],
         ];
     }

kcadmin/assets/AppAsset.php

@@ -15,6 +15,7 @@ class AppAsset extends AssetBundle
         'css/site.css',
     ];
     public $js = [
+        'js/common.js'
     ];
     public $depends = [
         'yii\web\YiiAsset',

kcadmin/views/category/_search.php

@@ -8,34 +8,47 @@ use yii\widgets\ActiveForm;
 /* @var $form yii\widgets\ActiveForm */
 ?>
 
-<div class="category-search">
 
-    <?php $form = ActiveForm::begin([
+<?php
+$form = ActiveForm::begin([
             'action' => ['index'],
             'method' => 'get',
-    ]); ?>
-
-    <?= $form->field($model, 'id') ?>
-
-    <?= $form->field($model, 'cat_name') ?>
-
-    <?= $form->field($model, 'icon') ?>
-
-    <?= $form->field($model, 'icon_type') ?>
-
-    <?= $form->field($model, 'description') ?>
-
-    <?php // echo $form->field($model, 'sort_order') ?>
-
-    <?php // echo $form->field($model, 'created_at') ?>
+            'validateOnType' => true,
+        ]);
+?>
 
-    <?php // echo $form->field($model, 'updated_at') ?>
+<div class="col-sm-11">
+    <div class="dataTables_filter">
+        <?=
+        $form->field($model, 'id', [
+            "template" => "{input}{error}",
+            "inputOptions" => [
+                "placeholder" => "检索的id",
+                "class" => "form-control",
+            ],
+            "errorOptions" => [
+                "class" => "error-tips"
+            ]
+        ])
+        ?>
 
-    <div class="form-group">
-        <?= Html::submitButton('Search', ['class' => 'btn btn-primary']) ?>
-        <?= Html::resetButton('Reset', ['class' => 'btn btn-outline-secondary']) ?>
+        <?=
+        $form->field($model, 'cat_name', [
+            "template" => "{input}{error}",
+            "inputOptions" => [
+                "placeholder" => "检索类名",
+                "class" => "form-control",
+            ],
+            "errorOptions" => [
+                "class" => "error-tips"
+            ]
+        ])
+        ?>
+    </div>
+</div>
+<div class="col-sm-1" style="padding: 0;">
+    <?= Html::submitButton('<i class="fa fa-filter"></i>', ['class' => 'btn btn-default']) ?>
+    <?= Html::resetButton('<i class="fa fa-eraser"></i>', ['class' => 'btn btn-default']) ?>
 </div>
-
 <?php ActiveForm::end(); ?>
 
-</div>

kcadmin/views/category/index.php

@@ -12,31 +12,47 @@ use blobt\grid\GridView;
 $this->title = 'Categories';
 $this->params['breadcrumbs'][] = $this->title;
 ?>
-
 <div class="row">
     <div class="col-xs-12">
         <?php
         echo GridView::widget([
+            'filter' => $this->render("_search", ['model' => $searchModel]),
             'dataProvider' => $dataProvider,
             'columns' => [
                 [
                     'attribute' => 'id',
-                    'label' => 'Id',
-                    "width" => "30px",
+                    'width' => '5%',
                     'align' => 'center'
                 ],
+                [
+                    'attribute' => 'created_at',
+                    'width' => '7%',
+                    'format' => 'date'
+                ],
                 [
                     'attribute' => 'cat_name',
-                    'label' => '类名'
+                    'width' => '13%',
+                ],
+                [
+                    'attribute' => 'icon',
+                    'width' => '5%',
+                ],
+                [
+                    'attribute' => 'icon_type',
+                    'width' => '7%',
+                    'showConstText' => true
+                ],
+                [
+                    'attribute' => 'description',
+                    'format' => 'ntext',
+                    'width' => '50%',
                 ],
-                'icon',
-                'icon_type',
-                'description:ntext',
                 [
                     'class' => 'yii\grid\ActionColumn',
                 ],
             ],
         ]);
+        
         ?>
     </div>
 </div>

kcadmin/views/site/test.php

@@ -2,9 +2,67 @@
 
 use yii\widgets\ActiveForm;
 use yii\helpers\Html;
+use blobt\web\DaterangeBootstrap;
 
 $this->title = '测试';
 $this->params['subtitle'] = '这是一个小小的测试';
 $this->params['breadcrumbs'][] = $this->title;
+
+$js = <<<EOT
+    $('#daterange-btn').daterangepicker(
+      {
+        locale: { 
+            'cancelLabel': '清除',
+            'applyLabel': "确定",
+            "customRangeLabel": "自定义",
+             "daysOfWeek": [
+                    "日",
+                    "一",
+                    "二",
+                    "三",
+                    "四",
+                    "五",
+                    "六"
+            ],
+            "monthNames": [
+                    "一月",
+                    "二月",
+                    "三月",
+                    "四月",
+                    "五月",
+                    "六月",
+                    "七月",
+                    "八月",
+                    "九月",
+                    "十月",
+                    "十一月",
+                    "十二月"
+            ],
+        },
+        ranges   : {
+          '今天'       : [moment(), moment()],
+          '昨天'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+          '最近7天' : [moment().subtract(6, 'days'), moment()],
+          '最近30天': [moment().subtract(29, 'days'), moment()],
+          '本月'  : [moment().startOf('month'), moment().endOf('month')],
+          '上月'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+        },
+        startDate: moment().subtract(29, 'days'),
+        endDate  : moment()
+      },
+      function (start, end) {
+        $('#daterange-btn span').html(start.format('YYYY-M-D') + ' - ' + end.format('YYYY-M-D'))
+      }
+    )
+EOT;
+
+DaterangeBootstrap::register($this);
+$this->registerJs($js);
 ?>
-<h1><?= $name ?></h1>
+
+<button type="button" class="btn btn-default pull-right" id="daterange-btn">
+    <span>
+        <i class="fa fa-calendar"></i>日期范围
+    </span>
+    <i class="fa fa-caret-down"></i>
+</button>

kcadmin/web/js/common.js

@@ -0,0 +1,3 @@
+$(function(){
+    $("[data-toggle='tooltip']").tooltip();
+});