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 ...
随机推荐
- h5 语义话标签的意义
使用语义话标签的意义 语义类标签对开发者更为友好,使用语义类标签增强了可读性,即便是在没有 CSS 的时 候,开发者也能够清晰地看出网页的结构,也更为便于团队的开发和维护. 除了对人类友好之外,语义类 ...
- postMessage 跨域
基于 postMessage 和 localStorage 的跨域本地存储方案 安·记 2014-09-07 2099 阅读 跨域 存储 localStorage HTML5 的 postMessag ...
- linux系统软件启动sh脚本
在系统维护中,编写脚本会帮助运维提高效率,现记录一个通用的软件启动脚本.脚本内容如下: #!/bin/bash # 软件启动程序包名称 APP_NAME=datadog-4.2.0.jar # 软件名 ...
- win10 hyper-v的开启和关闭
一.开启: 1. 控制面板->程序->启用或关闭Windows功能,Windows功能中勾选hyper-v功能 2. powershell中使用管理员权限运行下面的命令 bcdedit / ...
- Java学习的第二十七天
1.内存操作流 缓冲流 用BufferedReader读取数据 使用BufferedWriter写数据 使用BufferInputStream和BufferOutputStream读写图片 2.有很多 ...
- import tensorflow 出现非法指令(核心已转储)
使用 conda install -c conda-forge tensorflow 或者 conda install -c conda-forge tensorflow-gpu 试下.
- 关于Android Studio中使用jni进行opencv配置开发环境的要素秘诀
使用jni进行opencv开发可以快速地将PC端的opencv代码移植到手机上,但是如何在android studio下进行配置,网上几乎找不到教程,大多都是eclipse下使用mk文件的方法,找不到 ...
- 记一次因python相互导入包的报错
先丢报错信息:AttributeError:module 'utils.configHttp' has no attribute 'ConfigHttp' 开始以为是导入包的常规问题,上网搜了一下解决 ...
- 为什么要谨慎使用Arrays.asList、ArrayList的subList?
1. 使用Arrays.asList的注意事项 1.1 可能会踩的坑 先来看下Arrays.asList的使用: List<Integer> statusList = Arrays.asL ...
- UDP局域网通信的Java实现及Android平台尝试
局域网通信已经很少被他人所提及了,我曾经还尝试过通过蓝牙构建通信网络,这次有机会尝试UDP局域网通信,在这里把一些基本过程和在Android平台上的问题记录一下. 1. UDP基础知识 1.1 什么是 ...