Yii2 DatePicker小部件的使用

**DatePicker **小部件是一个封装了Bootstrap DatePicker插件到Yii2中的一个插件。
可以方便的由用户选择日期，以用于快速输入日期数据。该插件是基于Yii2 BootStrap3制作的。
如果浏览器不支持Jquery。该组件仍然支持以下四种类型：

• Simple Input Markup //常用的简单input输入框类型
• Component Markup - Addon Prepended //在input前加入 选择日期&清空栏目 按钮
• Component Markup - Addon Appended //在input后加入 选择日期&清空栏目 按钮
• Inline / Embedded Markup //嵌入式日期选择框
• Date Range Markup (from and to dates) //日期范围,从A日期~B日期。

项目地址: https://github.com/kartik-v/yii2-widget-datepicker
文档中未尽事宜查看插件手册：http://demos.krajee.com/widget-details/datepicker

1. 安装

通过composer进行安装.

1

composer require kartik-v/yii2-widget-datepicker "@dev"

2. 部分参数解释

• languge：组件显示语言， 缺省设置为：Yii::$app->language 。
  eg:en , zh-CN
  

• size: 组件大小 参数范围：[lg, md, sm, xs]

• name: 输入框input的name属性 如果DatePicker是TYPE_RANGE类型必须设置name2

• attribute：设置model的属性。如果DatePicker是TYPE_RANGE类型必须设置attribute2

• value：设置input的value属性。如果DatePicker是TYPE_RANGE类型可以设置value2

• options: 设置input的其它配置，比如placeholder等。。如果DatePicker是TYPE_RANGE类型可以设置options2.

• separator: 分隔符。一般用于TYPE_RANGE类型的输入框。将在两个input中间显示一个分隔符。默认为“to”。

• pluginEvents：插件事件数组。插件可以绑定以下几个事件
  [
  show,
  hide,
  clearDate,
  changeDate,
  changeMonth,
  changeYear,
  changeDecade,
  changeCentury
  ]
  绑定事件到自定义函数可以进行如下配置：

  1 2 3 4 5 6 7 8

  pluginEvents = [ "show" => "function(e) { # `e` here contains the extra attributes }", "hide" => "function(e) { # `e` here contains the extra attributes }", "clearDate" => "function(e) { # `e` here contains the extra attributes }", "changeDate" => "function(e) { # `e` here contains the extra attributes }", "changeYear" => "function(e) { # `e` here contains the extra attributes }", "changeMonth" => "function(e) { # `e` here contains the extra attributes }", ];

• readonly:设置input是否只读

• pluginOptions：插件配置数组，常用配置如下：

完整的配置文档请查看：http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

• type: 组件类型，缺省设置为 TYPE_COMPONENT_PREPEND 或2.
  参数范围：[
  TYPE_INPUT, //普通input输入框
  TYPE_COMPONENT_PREPEND,
  TYPE_COMPONENT_APPEND,
  TYPE_INLINE,
  TYPE_RANGE,
  TYPE_BUTTON
  ] 以上分别对应 1 ~ 6，使用常量需要DatePicker::常量名称,
  例如：DatePicker::TYPE_COMPONENT_PREPEND,

注意：官方文档中TYPE_INLINE和TYPE_RANGE的常量值不正确，两个常量顺序写错了。
正确的TYPE_INLINE = 4,TYPE_RANGE = 5.

类型名称	是否支持手动输入	功能介绍	其它
TYPE_INPUT	支持	普通输入框,点击输入框，弹出日期选择	–
TYPE_COMPONENT_PREPEND	支持	在输入框前加入两个按钮，分别是弹出日期选择和清空输入。	–
TYPE_COMPONENT_APPEND	支持	在输入框后加入两个按钮，分别是弹出日期选择和清空输入。	–
TYPE_RANGE	支持	日期范围专用，需要配置第二个输入框。两个输入框A和B，如果A日期大于B日期会自动将B日期同步为A日期。	必须配置name2或attribute2 参数，否则会报错。使用该选项需要先安装RANGE扩展。安装方法：composer require kartik-v/yii2-field-range “*”
TYPE_INLINE	不支持	将总是显示一个嵌入式的日期选择框。输入框将被加上只读属性。	如果要允许输入日期，可以通过inlineOptions设置
TYPE_BUTTON	不支持	仅显示一个按钮，点击弹出日期选择框，值将被赋值到一个隐藏的输入框内。	可以通过buttonOptions进行配置。
3. 快速使用
使用的时候记的在头部引用组件。

1
2

<?php
use kartik\date\DatePicker;

• 不使用model的形式
  不使用ActiveForm和后台传来的model也可以直接在页面里输出该组件，代码如下

  1 2 3 4 5 6 7 8 9

  echo DatePicker::widget([ 'name' => 'check_issue_date', 'value' => date('Y-m-d', strtotime('+2 days')), 'options' => ['placeholder' => '请选择日期 ...'], 'pluginOptions' => [ 'format' => 'yyyy-mm-dd', 'todayHighlight' => true ] ]);

  显示效果如图：
  

• 使用model+ActiveForm的形式
  在controller里面将model传递给视图。

  1 2 3 4 5 6

  <?php $model = new ServiceHistory(); return $this->render('create', [ 'model' => $model, ]); ?>

  在视图中，先创建ActiveForm，再输出DatePicker代码片段如下：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  <?php $form = ActiveForm::begin([]); ?> <?php echo DatePicker::widget([ 'model' => $model,//绑定后台传递的model 'attribute' => 'service_start',//model里的字段 'attribute2' => 'service_end',//model里的字段 'options' => ['placeholder' => '服务开始时间'],//设置input1的提示 'options2' => ['placeholder' => '服务结束时间'],//设置input2的提示 'type' => DatePicker::TYPE_RANGE,//设置插件类型为日期区间类型。 'form' => $form,//绑定form为activeForm。 'separator' => '<i class="glyphicon glyphicon-resize-horizontal"></i>',//设置分隔符 'pluginOptions' => [//设置插件配置 'format' => 'yyyy-mm-dd',//设置日期格式 'autoclose' => true,//设置日期选择框自动关闭 'todayHighlight' => true,//设置今日日期高亮 'todayBtn' => true,//设置在日期选择框下方显示今日按钮。 ], ]); ?>

  以上代码效果如图：