yii2.0使用bootstrap中日期插件
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法。
使用composer安装 日期插件
php composer.phar require "2amigos/yii2-date-picker-widget" "*"
或 composer require 2amigos/yii2-date-picker-widget:~1.0
在视图文件中使用下面的代码 :
use dosamigos\datepicker\DatePicker;
<span>开始时间:</span>
//方法一:使用widget方式1
1 <?=DatePicker::widget([
2 'name' => 'jui-start-time',
3 'template' => '{addon}{input}',
4 'clientOptions' => [
5 'autoclose' => true,
6 'format' => 'yyyy-mm-dd'
7 ]
8 ]);?>
//方法二:使用widget方式2
1 <?= DatePicker::widget([
2 'model' => $model,
3 'attribute' => 'date',
4 'template' => '{addon}{input}',
5 'clientOptions' => [
6 'autoclose' => true,
7 'format' => 'yyyy-mm-dd'
8 ]
9 ]);?>
//方法三:ActiveForm方式
1 <?= $form->field($model, 'date')->widget(
2 DatePicker::className(), [
3 // inline too, not bad
4 'inline' => true,
5 // modify template for custom rendering
6 'template' => '<div class="well well-sm" style="background-color: #fff; width:250px">{input}</div>',
7 'clientOptions' => [
8 'autoclose' => true,
9 'format' => 'yyyy-mm-dd'
10 ]
11 ]);?>
显示:

参考:http://www.qianbo.com.cn/Study/Program/60054.html
二、使用yii2自带的插件
1 <?=\yii\jui\DatePicker::widget([
2 'name' => 'Staff[birthday]',
3 'value' => $model->birthday,
4 'dateFormat' => 'yyyy-MM-dd',
5 'options' => ['placeholder'=>'出生日期', 'class'=>'form-control']
6 ]) ?>

yii2.0使用bootstrap中日期插件的更多相关文章
- bootstrap的日期插件datetimepicker有问题
bootstrap的日期插件datetimepicker在chrome中会出现掉下来的现象,而且一直没找到原因,下载最新版的插件直接在各个浏览器中都会掉下来, 问题一直解决不了,转而换其他插件 htt ...
- Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。
目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns / ...
- Jquery中日期插件jquery.datepick的使用
jsp的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...
- bootstrap datetimepicker 日期插件超详细使用方法
日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...
- Bootstrap 中的插件的学习2(导航)
实例 在导航栏内 下面的实例演示了在导航栏内的下拉菜单的用法: <!DOCTYPE HTML> <html> <head> <link href=" ...
- Bootstrap 中的插件的学习
一个静态的模态窗口实例,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态 ...
- 使用bootstrap的日期插件
1. 需要用的js包点击下载,在项目中引入该js. <script language="JavaScript" src="${pageContext.reques ...
- 常见问题:bootstrap datepicker日期插件汉化
引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下: $(".form_datet ...
- Angular4.0引入laydate.js日期插件方法
Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...
随机推荐
- 【转载】HPL与HPCG测试(一)
来源:HPL与HPCG测试 (一) 一.HPL与HPCG 简介 1.HPL HPL 即 High Performance Linpack,它是针对现代并行计算集群的测试工具.用户不修改测试程序,通过调 ...
- LuoguP3602 Koishi Loves Segments
题面 n个区间和数轴上的m个关键点 (0<=n,m<=4*1e5,数轴范围 \(-1^7\) ~ \(1^7\))每个关键点有被区间区间覆盖的次数上限,求最多能放多少个区间到数轴上 传送门 ...
- Luogu P2173 [ZJOI2012]网络
题意 写的比较清楚,我就不解释了. \(\texttt{Data Range:}n\leq 10^4,m\leq 10^5,c\leq 10,k\leq 10^5\) 题解 注意到 \(c\) 的范围 ...
- STM32入门系列-使用C语言封装寄存器
前面文章介绍了存储器映射.寄存器和寄存器映射,这些都是为了介绍使用 C语言封装寄存器做铺垫.这里我们通过一个实例来对 C 语言封装寄存器进行介绍. 具体实例:控制 GPIOC 端口的第 0 管脚输出一 ...
- 一次 KVM 虚拟机磁盘占满的排查过程
一次 KVM 虚拟机磁盘占满的排查过程 KVM 虚拟机系统为 CentOS,文件系统为 XFS. 现象如下: 使用 df -h 命令发现磁盘剩余空间为30k(总大小为30G),使用 df -i 发现 ...
- 03.axios登录前端
1.创建一个Login.vue页面 1.1 写页面 views/Login.vue 在 views/components 下创建 Login.vue 页面 <template> ...
- NoSQL非关系型数据库
NoSQL 关注公众号"轻松学编程"了解更多. 一.概念 NoSQL(Not Only SQL)非关系型数据库(功能换效率). 优点 开发维护成本低 访问灵活 访问速度快(缓存+快 ...
- WC2019 自闭记
不咕了 Day 1 2019/1/24 辣么快就到冬令营了,还沉迷于被柿子吊打的状态的菜鸡一时半会还反应不过来.我们学校这次分头去的冬令营,差点上不了车.这次做的动车居然直达广州,强啊. 然鹅还是到太 ...
- 你说一下对Java中的volatile的理解吧
前言 volatile相关的知识其实自己一直都是有掌握的,能大概讲出一些知识,例如:它可以保证可见性:禁止指令重排.这两个特性张口就来,但要再往深了问,具体是如何实现这两个特性的,以及在什么场景下使用 ...
- CF1137A/1138C Skyscrapers
排序+数据结构 将每一行(每一列)都排个序,并将原位置的在这一行(列)中的排行记录在一个数组里 注意,要将楼高度相同的元素看作一个元素 如 1 1 4 5 6 8 8,则排行是 1 1 2 ...