yii2超好用的日期组件和时间组件

前端技术 2023/09/06 PHP

日期组件，时间组件在平时开发中是必不可少的。今天我们就来谈谈在yii2中的超好用的时间组件，也省的大家各种找js插件了。

分享之前我们先预览下效果，看看到底怎么个好用法。
当然啦，好用不好用在于自我的感觉，光看上面的图片是感受不到的。再告诉你个好消息，这两款插件已经跟yii2整合了，使用起来也是灰常的简单哦。
关于日期组件跟时间组件，前者是date(\'Y-m-d\')类型，后者是date(\'Y-m-d H:i:s\')类型，自然不用多说。
我们先来看看时间组件扩展
既然是扩展组建，第一步当然是安装。
composer require kartik-v/yii2-widget-datetimepicker \"*\"

安装好之后，如果你的表单使用ActiveForm生成的，可以参考下面的代码

use kartik\\datetime\\DateTimePicker; 
<?= $form->field($model, \'created_at\')->widget(DateTimePicker::classname(), [ 
 \'options\' => [\'placeholder\' => \'\'], 
 \'pluginOptions\' => [ 
  \'autoclose\' => true, 
  \'todayHighlight\' => true, 
 ] 
]); ?>

有些不喜欢用ActiveForm生成表单的同学就需要参考下面的用法了

use kartik\\datetime\\DateTimePicker; 
echo \'<label>时间</label>\'; 
echo DateTimePicker::widget([ 
 \'name\' => \'Article[created_at]\', 
 \'options\' => [\'placeholder\' => \'\'], 
 //注意，该方法更新的时候你需要指定value值 
 \'value\' => \'2016-05-03 22:10:10\', 
 \'pluginOptions\' => [  \'autoclose\' => true, 
  \'format\' => \'yyyy-mm-dd HH:ii:ss\', 
  \'todayHighlight\' => true 
 ] 
]);

至于哪个方便，不言而喻。

整个安装过程确实很简单，我们接下来以同样的方式进行安装日期组件。

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

安装好了后我们开始使用日期组件

use kartik\\date\\DatePicker; 
<?php echo DatePicker::widget([ 
 \'name\' => \'Article[created_at]\', 
 \'options\' => [\'placeholder\' => \'...\'], 
 //value值更新的时候需要加上 
 \'value\' => \'2016-05-03\', 
 \'pluginOptions\' => [ 
  \'autoclose\' => true, 
  \'format\' => \'yyyy-mm-dd\', 
  \'todayHighlight\' => true, 
 ] 
]); ?>

看了上面的代码，想必有同学已经猜到针对ActiveForm生成的日期组件的用法了。没错，就那么用，si不si很简单。

<?= $form->field($model, \'created_at\')->widget(DatePicker::classname(), [ 
 \'options\' => [\'placeholder\' => \'\'], 
 \'pluginOptions\' => [ 
  \'autoclose\' => true, 
  \'todayHighlight\' => true, 
  \'format\' => \'yyyy-mm-dd\', 
 ] 
]); ?>

当然，上面的时间格式都是可以调整的，但是，日期组件，既然是日期，肯定也就只支持ymd三种类型的参数，不然跟时间组件又有啥差别。

有些小伙伴说为啥自己的是英文的，用起来很不方便呀，我想反问一句，你的项目是不是没配置语言是中文？还没配置的同学只需要在你的配置文件里面加上 \'language\'=>\'zh-CN\', 即可。

最后，我们看看最终的效果图。

本文地址：https://www.stayed.cn/item/15985

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案