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中日期插件的更多相关文章

  1. bootstrap的日期插件datetimepicker有问题

    bootstrap的日期插件datetimepicker在chrome中会出现掉下来的现象,而且一直没找到原因,下载最新版的插件直接在各个浏览器中都会掉下来, 问题一直解决不了,转而换其他插件 htt ...

  2. Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。

    目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns    / ...

  3. Jquery中日期插件jquery.datepick的使用

    jsp的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...

  4. bootstrap datetimepicker 日期插件超详细使用方法

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  5. Bootstrap 中的插件的学习2(导航)

    实例 在导航栏内 下面的实例演示了在导航栏内的下拉菜单的用法: <!DOCTYPE HTML> <html> <head> <link href=" ...

  6. Bootstrap 中的插件的学习

    一个静态的模态窗口实例,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态 ...

  7. 使用bootstrap的日期插件

    1.  需要用的js包点击下载,在项目中引入该js. <script language="JavaScript" src="${pageContext.reques ...

  8. 常见问题:bootstrap datepicker日期插件汉化

    引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下: $(".form_datet ...

  9. Angular4.0引入laydate.js日期插件方法

    Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...

随机推荐

  1. Java IO相关使用

    date: 2020-06-14 14:42:22 updated: 2020-08-21 17:35:45 Java IO相关使用 1. 文件 创建 File 对象的三种方式 一个路径名:File( ...

  2. laravel 验证码 auth方式登录 中间件判断session是否存在

    首先下载laravel的插件 composer下载  实现验证码       composer require mews/captcha 在config/app.php进行配置 'providers' ...

  3. 稳压二极管、肖特基二极管、静电保护二极管、TVS管

    1.稳压二极管 正向导通电压跟普通二级管一样约为0.7v,反向状态下在临界电压之前截止,在达到临界电压的条件下会处于导通的状态,电压也不再升高,所以用在重要元器件上,起到稳压作用. 稳压二极管主要利用 ...

  4. 【实战】记一次老项目的swagger整合

    1.背景 这两天接到一个整合swagger的任务,本以为很简单,预计两小时内完成,没想到其中有太多的坑,整了两天才完成. 首先项目是一个比较老的项目,之前用的servlet,目前在重构为springm ...

  5. error: Microsoft Visual C++ 14.0 or greater is required. Get it with “Microsoft C++ Build Tools“

    python3 是用 VC++ 14 编译的, python27 是 VC++ 9 编译的, 安装 python3 的包需要编译的也是要 VC++ 14 以上支持的. 可以下载安装这个: 链接:htt ...

  6. (三)URI、URL和URN/GET与POST的区别

    (一)URI.URL.URN HTTP使用统一资源标识符(Uniform Resource Identifiers,URI)来传输数据和建立连接. URL是一种特殊类型的URI,包含了用于查找某个资源 ...

  7. 模板——Fhq_treap

    $Fhq$ $treap$ #include <bits/stdc++.h> using namespace std; const int MAXN=100100; int n,root, ...

  8. angularJS 小记

    刚刚接触angularJS,网上学习了一遍菜鸟教程(http://www.runoob.com/angularjs/angularjs-tutorial.html),做了些基础知识的笔记. Angul ...

  9. vgg学习

    LeNet-5是一个较简单的卷积神经网络.下图显示了其结构:输入的二维图像,先经过两次卷积层到池化层,再经过全连接层,最后使用softmax分类作为输出层. AlexNet中包含了几个比较新的技术点, ...

  10. 洛谷日报 & 原来博客(转载)

    震惊,新的功能:可以按Ctrl + F 进行关键字查询. \(update\) on 10.26:把这两个月的日报也加入进去了,并且修复了几个错误. 本文会把小编用过的博客和比较好的博客放在这里. 可 ...