作者:白狼 出处:http://www.manks.top/yii2_datetimepicker.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。原文有图片。
日期组件,时间组件在平时开发中是必不可少的。今天我们就来谈谈在yii2中的超好用的时间组件,也省的大家各种找js插件了。

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

  1. composer require kartik-v/yii2-widget-datetimepicker "*"

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

  1. use kartik\datetime\DateTimePicker;
  2. <?= $form->field($model, 'created_at')->widget(DateTimePicker::classname(), [
  3. 'options' => ['placeholder' => ''],
  4. 'pluginOptions' => [
  5. 'autoclose' => true,
  6. 'todayHighlight' => true,
  7. ]
  8. ]); ?>

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

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

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

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

继续阅读

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

  1. vue组件之时间组件

    效果图 主要有两个注意点,前面时分,通过定时器,1秒钟取一次,只要数据变了立刻让他展示,当然也可以1分钟取一次,我看了下定时器和真正的时间 其实有一定的偏差的,大约要1分多才会改变,所以我用了1秒取一 ...

  2. 第32讲 UI组件之 时间日期控件DatePicker和TimePicker

    第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置,    Time ...

  3. 26Flutter 日期 和时间戳/格式化日期库/flutter异步/ 官方自带日期组件showDatePicker、时间组件showTimePicker以及国际化

    /* 一.Flutter日期和时间戳 日期转换成时间戳 var now=newDateTime.now(); print(now.millisecondsSinceEpoch); //单位毫秒,13位 ...

  4. yii2.0使用bootstrap中日期插件

    Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...

  5. Element-UI饿了么时间组件控件按月份周日期,开始时间结束时间范围限制参数

    在日常开发中,我们会遇到一些情况,在使用Element-UI 限制用户的日期时间范围的选择控制(例如:查询消息开始和结束时间,需要限制不能选择今天之后的时间). 看了网上的一些文档,零零散散.各式各样 ...

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

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  7. BenUtils组件和DbUtils组件

    BenUtils组件和DbUtils组件 [TOC] 1.BenUtils组件 1.1.简介 程序中对javabean的操作很频繁,所有Apache提供了一套开源api,方便javabean的操作!即 ...

  8. javascript学习之时间组件

    写了一个时间组件,哪里需要哪里调(菜鸟级别,大牛路过就Ok了): 先有一个HTML文件: <!doctype> <html> <head> <title> ...

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

    日期(DatePicker).时间(TimePicker)是两个比较易用的控件,他们都是从帧布局FrameLayout派生而出的:他们在FrameLayout的基础上提供了一些方法来获取当前用户所选择 ...

随机推荐

  1. 精品干货丨APP常用导航框架

    文章目的:在整体上把握移动端App的导航框架,理解每种导航所具有的优点.局限性和其所适用的范围. 文章用心:典型APP案例(源码:http://www.jinhusns.com/Products/Do ...

  2. 比对两个同类型的List

    比对两个List中的数据 1 List<Person> ListA= new List<Person>() { "}, "}, "}, " ...

  3. .NET 中获取调用方法名

    在写记录日志功能时,需要记录日志调用方所在的模块名.命名空间名.类名以及方法名,想到使用的是反射(涉及到反射请注意性能),但具体是哪一块儿还不了解,于是搜索,整理如下: 需要添加相应的命名空间: us ...

  4. [修正] Berlin 10.1 支持 iPhone 4 (iOS v7.x)

    原本在 Seattle 版本时,还能支持 iPhone 3GS (iOS v6.x), iPhone 4 (iOS v7.x),到了 Berlin 已不支持了,在用户的抱怨下,只好自己尝试去修正它,经 ...

  5. 去除utf8文件的bom标记

    http://stackoverflow.com/questions/1068650/using-awk-to-remove-the-byte-order-mark http://thegreyblo ...

  6. 一个奇葩常见的问题 nginx 403 forbidden错误

    今天安装dedecms,配置Nginx,然后生成一键生成静态页面,然后就没有然后了,所有栏目页面都显示nginx 403 forbidden. 一般来说nginx 的 403 Forbidden er ...

  7. IOS 集成第三方登录

    我使用的是友盟上集成的第三方登录功能,一共使用了三个应用的登录授权,QQ.微信.新浪微博.由于第三方登录授权成功后,需要跳转到一个新的界面,所以这里需要在项目里设置第三方登录的SSO授权.就是必须安装 ...

  8. 一个bug

    bug原因: maven的project重新更新了一下project name,然后在更新过程中,卡死了,就强制退出.结果,就再也进不去eclipse了.看了eclipse的启动日志,各种报错,找不到 ...

  9. 网上图书商城2--Category模块

    sql CREATE TABLE `t_category` ( `cid` char(32) NOT NULL, `cname` varchar(50) DEFAULT NULL, `pid` cha ...

  10. oracle RAC的VIP和scan

    我们都知道Oracle RAC中每个节点都有一个虚拟IP,简称VIP,与公网IP在同一个网段. 没有VIP时,Oracle客户端是靠"TCP/IP协议栈超时"来判断服务器故障.而T ...