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

作者:白狼 出处:http://www.manks.top/yii2_datetimepicker.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。原文有图片。
日期组件,时间组件在平时开发中是必不可少的。今天我们就来谈谈在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‘, 即可。

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

时间: 05-03

yii2超好用的日期组件和时间组件的相关文章

Android界面编程——日期时间组件(五)

Android界面编程--日期时间组件 2.6日期时间组件 2.6.1 TextClock 以文本的方式显示系统日期和时间,可以自定义显示格式,是 Android4.2(对应API Level 17)提供的新特性. TextClock有两种格式设置方式: 1. 在24小时模式: 属性:android:format24Hour 方法:set Format24Hour(CharSequence) 2. 在12小时模式: 属性:android: format12Hour 方法:set Format12

CKG10-高性能高可用Yii2.0电商平台 仿京东商城 高级组件 MySQL LVS

随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了.对于学习有困难不知道如何提升自己可以加扣:1225462853进行交流得到帮助,获取学习资料. 下载地址:http://pan.baidu.com/s/1jI05TPW 如果你已经完成了Yii2.0入门,并能用它搭建一些完整的项目,那你就该向更高级的Yii2.0开发迈进,真正学会如何在实际工作中运用Yii2.0

My97DatePicker使用 、layDate 日期与时间组件

一.My97DatePicker 官方:http://www.my97.net/ <head> <meta charset="UTF-8"> <title>Bootstrap介绍</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/My97DatePicker/Wdate

JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐

前言:之前分享过很多bootstrap常用组件,包括表格.表单验证.文件上传.复选下拉框.弹出框等.这段时间,博主又收藏了一些好用的组件(有些在项目中已经用起来了),经过两天的时间,已经整理出了一部分,本着“好东西要与人分享”的原则,今天还是来点福利,将博主收藏的东西分享出来,供需要的园友参考.组件大部分都是些开源组件,也有部分是博主自己在网上找到然后改写出来的效果,可能不尽如人意,有兴趣的且看看吧. 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜索“dat

谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

Android 自学之日期DatePicker、时间TimePicker选择器

日期(DatePicker).时间(TimePicker)是两个比较易用的控件,他们都是从帧布局FrameLayout派生而出的:他们在FrameLayout的基础上提供了一些方法来获取当前用户所选择的日期和时间:如果程序需要获取日期和时间,则可以通过为DatePicker添加OnDateChangedListener进行监听,为TimePicker添加OnTimeChangeListenter进行监听来实现. 以一个让用户选择日期和时间的例子来展示下他们的功能和用法. layout/main.

Web框架之Django_08 重要组件(form组件、cookie和session组件)

摘要: form组件 cookie组件 session组件 一.form组件 form介绍我们之前在html页面中利用form表单向后端提交数据时候,都需要对用户的输入进行校验,比如校验用户是否输入正确(长度.格式...),如果用户输入的内容有误则需要在相应的位置显示对应的错误信息来提醒用户,提高前端的交互效率.Django form组件就是实现上述功能的一个功能组件.from组件主要功能有:# 生成页面可用的html标签# 对用户条件的数据进行校验# 保留上次输入内容 先来看看自己手写注册功能

DjangoRestFramework学习二之序列化组件、视图组件

目录 DjangoRestFramework学习二之序列化组件.视图组件 一 序列化组件 二 视图组件(Mixin混合类) DjangoRestFramework学习二之序列化组件.视图组件 本节目录 一 序列化组件 首先按照restful规范咱们创建一些api接口,按照下面这些形式写吧: Courses --- GET ---> 查看数据----->返回所有数据列表[{},{},] Courses--- POST --->添加数据 -----> 返回添加的数据{ } course

认证组件、权限组件、频率组件

认证组件.权限组件.频率组件 一.Django权限六张表 1.1.content_type表 """ Course: name.type.days.price.vip_type 基础 免费课 7 0 中级 学位课 180 69 究极 会员课 360 至尊会员 Course: name.type.days.content_type_id 基础 免费课 7 null 中级 学位课 180 1 究极 会员课 360 2 app01_course_1 id.price app01_c