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. Spring框架中获取连接池常用的四种方式

    1:DBCP数据源 DBCP类包位于 /lib/jakarta-commons/commons-dbcp.jar,DBCP是一个依赖Jakarta commons-pool对象池机制的数据库连接池,所 ...

  2. FFmpeg滤镜使用

    滤镜(filter)详细介绍参考官方文档. 常用的滤镜功能,像图像加水印/字幕.去logo.图形旋转缩放等,但滤镜不仅仅包括视频部分,还包括音频处理的,像变声变调.声场控制(重低音/留声机/摇滚等效果 ...

  3. jquery里面的一些方法使用

    prop("属性名");  //获取属性名 prop("属性名","属性值");  //设置属性名 change(fucntion(){  ...

  4. 同时使用mybatis和mybatis-plus时,pageHelper失效问题解决

    一.问题由来 最近刚拿到一个别人的项目,该项目中使用mybatis和mybatis-plus来操作数据库,我们需要在此基础上添加新功能. 做功能开发时一切都很顺利,我也很快完成了自己负责的模块,然后和 ...

  5. 「MCOI-03」村国题解

    第二篇题解! 可能是退役之前的最后一篇题解了 (好像总共都只写了两篇) 不说了,讲题: 题面 题意: 有T个数据 有一颗树(保证所有的的节点都是相连的),有n个节点,每个节点都有相应的权值与序号,现在 ...

  6. Miniconda 安装 & Pip module 安装 & Shell 脚本调用 Miniconda 虚拟环境手册(实战项目应用)

    (实战项目应用) 1. 下载Miniconda 两个安装方式: 方式1:wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Min ...

  7. django支持多语言

    Django支持多语言切换 下面介绍下如何使网站或APP国际化,让其支持多种语言 . 官网 效果 1.创建locale文件夹 先在项目根目录下创建一个名为locale的文件夹,这个文件夹是用来存放dj ...

  8. 你说一下对Java中的volatile的理解吧

    前言 volatile相关的知识其实自己一直都是有掌握的,能大概讲出一些知识,例如:它可以保证可见性:禁止指令重排.这两个特性张口就来,但要再往深了问,具体是如何实现这两个特性的,以及在什么场景下使用 ...

  9. Spring5.0源码学习系列之浅谈BeanFactory创建

    Spring5.0源码学习系列之浅谈BeanFactory创建过程 系列文章目录 提示:Spring源码学习专栏链接 @ 目录 系列文章目录 博客前言介绍 一.获取BeanFactory主流程 二.r ...

  10. 限制页面只能由微信内置浏览器打开,在其他浏览器打开跳转到Oauth2页面

    在需要限制的页面加上  appid必填,可以获取也可以自己随意 <script> var ua = navigator.userAgent.toLowerCase(); var isWei ...