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. 实用!8个 chrome插件玩转GitHub,单个文件下载小意思

    作为程序员对 GitHub 应该都不会陌生,我经常沉迷其中,找一些惊艳的项目或者工具.不过用的时间久了,发现它的用户体验实在是不敢恭维,有时候会让你做很多重复操作,浪费不少时间. 比如我想单独下载一个 ...

  2. 源码都没调试过,怎么能说熟悉 redis 呢?

    一:背景 1. 讲故事 记得在很久之前给初学的朋友们录制 redis 视频课程,当时结合了不少源码进行解读,自以为讲的还算可以,但还是有一个非常核心的点没被分享到,那就是源码级调试, 对,读源码还远远 ...

  3. C. k-Amazing Numbers 解析(思維)

    Codeforce 1417 C. k-Amazing Numbers 解析(思維) 今天我們來看看CF1417C 題目連結 題目 略,請直接看原題. 前言 我實作好慢... @copyright p ...

  4. 八皇后问题-recall算法

    #!/usr/bin/env python3# -*- coding: utf-8 -*-import numbersimport numpyimport math'''八皇后为题:在国际象棋棋盘上摆 ...

  5. Kubernetes Scheduler浅析

    概述 Kubernetes 调度器(Scheduler)是Kubernetes的核心组件:用户或者控制器创建Pod之后,调度器通过 kubernetes 的 watch 机制来发现集群中新创建且尚未被 ...

  6. ASP.NET Core Authentication系列(一)理解Claim, ClaimsIdentity, ClaimsPrincipal

    前言 首先我们来看一下在ASP.NET时代,Authentication是如何使用的.下面介绍的是System.Web.Security.FormsAuthentication: // 登录 Syst ...

  7. python进程间共享数值、字典、列表变量

    ##python进程间共享数值.字典.列表变量 关注公众号"轻松学编程"了解更多. import multiprocessing def worker(num, mgr_dict, ...

  8. .NetCore中简单使用EasyNetQ

    前言 我们在.Net中使用RabbitMQ,最原始的就是基于RabbitMQ.Client进行编码,在这个过程中我们需要通过代码约定和维护队列,Exchange等.如果是自行编码封装通用型的Rabbi ...

  9. python0why study python

    Python 越来越火爆 Python 在诞生之初,因为其功能不好,运转功率低,不支持多核,根本没有并发性可言,在计算功能不那么好的年代,一直没有火爆起来,甚至很多人根本不知道有这门语言. 随着时代的 ...

  10. HTML5+CSS3城市场景动画

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...