(ok) yii2.0 表单中添加日期选择小部件 DatePicker

作者: wxfeng 分类: 未分类 发布时间: 2017-06-01 00:00    阅读 1,188 次

1,下载DatePicker小部件

下载地址:https://github.com/yiisoft/yii2-jui/archive/master.zip

解压至/vendor/yiisoft/yii2,文件夹重命名为:jui

2,引用

在使用日期选择器的视图文件中,引入DatePicker类

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use common\models\Videostatus;
use yii\helpers\ArrayHelper;
use yii\jui\DatePicker;

/* @var $this yii\web\View */
/* @var $model common\models\Video */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="video-form">

   <?php $form = ActiveForm::begin([  
       'id' => 'create-form',  
       'options' => ['class' => 'form-horizontal'],  
       'fieldConfig' => [  
           'template' => "{label}\n<div class=\"col-lg-7\">{input}</div>\n<div class=\"col-lg-3\">{error}</div>",  
           'labelOptions' => ['class' => 'col-lg-1 control-label'],  
       ],  
   ]); ?>  

   <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>


   <?= $form->field($model, 'pubdata')->widget(
       DatePicker::className(), [
       'dateFormat' => 'yyyy-MM-dd',

   ])?>

   <?php ActiveForm::end(); ?>

</div>


3,下载jquery-ui,给日期选择小部件添加样式

(1)下载css以及js文件 http://jqueryui.com/resources/download/jquery-ui-1.12.1.zip

(2)下载主题文件 http://jqueryui.com/resources/download/jquery-ui-themes-1.12.1.zip

(3)分别解压下载的两个压缩包,然后将两个文件夹里面的文件合并,新的文件夹重名为 jquery-ui,并放置到文件夹:/vendor/bower下,yii会自动加载jquery-ui。

注意:解压后的两个文件夹需进行合并,否则日期选择部件会出现无样式或点击之后不会弹出日期选择的窗口。

4,效果图

图片.png

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。