Yii2超好用的日期和时间组件(值得收藏)


Posted in PHP onMay 05, 2016

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

分享之前我们先预览下效果,看看到底怎么个好用法。

Yii2超好用的日期和时间组件(值得收藏)

当然啦,好用不好用在于自我的感觉,光看上面的图片是感受不到的。再告诉你个好消息,这两款插件已经跟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', 即可。

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

Yii2超好用的日期和时间组件(值得收藏)

PHP 相关文章推荐
编译问题
Oct 09 PHP
第五章 php数组操作
Dec 30 PHP
基于curl数据采集之单页面采集函数get_html的使用
Apr 28 PHP
php.ini修改php上传文件大小限制的方法详解
Jun 17 PHP
使用PHP实现蜘蛛访问日志统计
Jul 05 PHP
PHP中大于2038年时间戳的问题处理方案
Mar 03 PHP
php生成图片验证码
Jun 09 PHP
PHP中你应该知道的require()文件包含的正确用法
Jun 12 PHP
使用Huagepage和PGO来提升PHP7的执行性能
Nov 30 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
May 06 PHP
php获得文件夹下所有文件的递归算法的简单实例
Nov 01 PHP
php实现的数组转xml案例分析
Sep 28 PHP
joomla实现注册用户添加新字段的方法
May 05 #PHP
Joomla数据库操作之JFactory::getDBO用法
May 05 #PHP
100多行PHP代码实现socks5代理服务器[2]
May 05 #PHP
PHP随机数 C扩展随机数
May 04 #PHP
PHP正则表达式过滤html标签属性(DEMO)
May 04 #PHP
Joomla使用Apache重写模式的方法
May 04 #PHP
Joomla开启SEF的方法
May 04 #PHP
You might like
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
显示、隐藏密码
2006/07/01 Javascript
jquery中this的使用说明
2010/09/06 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python实现log日志的示例代码
2018/04/28 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
爷爷追悼会答谢词
2014/01/24 职场文书
运动会广播稿150字
2014/02/19 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
护理专业自我评价
2015/03/11 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
期中考试后的感想
2015/08/07 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js