作者:白狼 出处: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
]
]);

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

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

继续阅读

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. 【处理手记】U盘读不出+卷标丢失+像读卡器+大小0+无媒体

    Update:201307180945 今天这鸟问题又找上我了,照之前的方法做后没解决,我又做了些尝试,整个流程如下: 1.插上U盘,发现问题 2.以devmgr_show_nonpresent_de ...

  2. Oracle命名规范

    1.编写目的 使用统一的命名和编码规范,使数据库命名及编码风格标准化,以便于阅读.理解和继承. 2.适用范围 本规范适用于公司范围内所有以ORACLE作为后台数据库的应用系统和项目开发工作. 3.对象 ...

  3. 介绍开源的.net通信框架NetworkComms框架 源码分析(八)SharpZipLibGzipCompressor

    原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  许可是 ...

  4. 使用CallerMemberName简化InotifyPropertyChanged的实现

    在WPF中,当我们要使用MVVM的方式绑定一个普通对象的属性时,界面上往往需要获取到属性变更的通知,     class NotifyObject : INotifyPropertyChanged   ...

  5. all requires API level 3 (current min is 1)问题的解决

    几次出现了all requires API level 3 (current min is 1)的错误,后来发现解决的方法是右键单击项目文件夹,选择Android Tools->Clear Li ...

  6. 历史疑团之EJB

    在学习Sping框架的过程中,看到过很多次关于EJB的批判.使用了SpringMVC但是并没有真性情般体会到它的优点,所以有必要对传统的Java Bean和EJB来做一些了解,无奈百度搜了很多知识,还 ...

  7. Scalaz(42)- Free :FreeAp-Applicative Style Programming Language

    我们在前面花了几期时间讨论Free Monad,那是因为FP既是Monadic programming,Free Monad是FP模式编程的主要方式.对我们来说,Free Monad代表着fp从学术探 ...

  8. Guava学习笔记:简化异常处理的Throwables类

    有时候, 当我们我们捕获异常, 并且像把这个异常传递到下一个try/catch块中.Guava提供了一个异常处理工具类, 可以简单地捕获和重新抛出多个异常.例如: import java.io.IOE ...

  9. String类型中ToString hashCode equals compareTo等方法的经典实现

    private final char value[]; private int hash; // Default to 0 public String(String original) { this. ...

  10. paramiko 遭遇socket.error: Socket is closed 错误的解决办法

    似乎是connection自己断了解决的办法是在创建conn的时候添加下面这句 conn.keep_this = conn_session 完整代码 def create_a_conn(ip_addr ...