Thymeleaf使用bootstrap及其bootstrap相关插件(二)
接上文http://www.cnblogs.com/conswin/p/7929772.html
接下来bootstrap-datepicker的简单使用。
1、引入添加js 和 css
2、然后是html页面代码,很简单,一个标签即可:
<div class="rowGroup" >
<label class="col-sm-1 control-label" >开始日期</label>
<div class="col-sm-2 ">
<div class="input-group" >
<input type="text" class="form-control form_datetime" id="hd_begdate" name="hd_begdate"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span>
</div>
</div>
</div>
<div class="rowGroup" >
<label class="col-sm-1 control-label" >结束日期</label>
<div class="col-sm-2 ">
<div class="input-group" >
<input type="text" class="form-control form_datetime" id="hd_enddate" name="hd_enddate"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span>
</div>
</div>
</div>
3、在JS文件中初始化,此时还可以设定开始日期不能大于结束日期
$(document).ready(function() { //设定日期选择格式
$('.form_datetime').datetimepicker({
minView: "month", //选择日期后,不会再跳转去选择时分秒
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 1,
autoclose: 1
}) .on("click",function(){
//设定日期选择开始日期需要小于结束日期
$("#hd_begdate").datetimepicker("setEndDate",$("#hd_enddate").val());
$("#hd_enddate").datetimepicker("setStartDate",$("#hd_begdate").val()); });
效果图:
Thymeleaf使用bootstrap及其bootstrap相关插件(二)的更多相关文章
- Thymeleaf使用bootstrap及其bootstrap相关插件(一)
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 在完成信息录入界面 ...
- [bootstrap] bootstrap 简介和相关网址
Bootstrap 来自 Twitter,是目前很受欢迎的前端框架. 基于 HTML.CSS.JAVASCRIPT ,简洁灵活,使 Web 开发更加快捷. Bootstrap提供了优雅的HTML和CS ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- Bootstrap支持的JavaScript插件
1.导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaSc ...
- Bootstrap框架的学习(二)
一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.boot ...
- Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
- 【转】bootstrap 的 affix.js 插件
我觉得 Twitter Bootstrap 提供的 JavaScript 插件可用性非常高,但文档多数简单.按部就班操作了,有效果当然好,没效果的话简直不知道为什么.之前我写过 Scrollspy 用 ...
- 【Bootstrap】优秀小插件收集
Bootstrap中不乏很多优秀的小插件来让界面更加漂亮.比如之前做过笔记的bootstrap-fileinput,select2,datetimepicker等都是属于这一系列的.这些相对而言比较大 ...
- 第二百四十七节,Bootstrap按钮和折叠插件
Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...
随机推荐
- 对象扩展运算符(…)与rest运算符
对象扩展运算符(…) 当编写一个方法时,我们允许它传入的参数是不确定的.这时候可以使用对象扩展运算符来作参数,看一个简单的列子: function xzdemo(...arg){ console.lo ...
- Latex: extra alignment tab has been changed to cr
参考: Error: extra alignment tab has been changed to \cr Latex: extra alignment tab has been changed t ...
- sublime text 中文显示异常
本文链接:sublime text 中文显示异常 http://www.cnblogs.com/daysme/p/7549857.html 前言 sublime text 3143 用了一年时候,最近 ...
- _itemmod_description
物品额外描述 表说明: `entry` 物品entry `description` 额外描述
- RedHat(Linux)下安装Python3步骤
1. 下载解压.$ wget https://www.python.org/ftp/python/3.4.1/Python-3.4.1.tgz$ tar zxvf Python-3.4.1.tgz 2 ...
- Django中ORM简介与单表数据操作
一. ORM简介 概念:.ORM框架是用于实现面向对象编程语言种不同类型系统的数据之间的转换 构建模型的步骤:重点 (1).配置目标数据库信息,在seting.py中设置数据库信息 DATABASE ...
- leecode第三十三题(搜索旋转排序数组)
class Solution { public: int search(vector<int>& nums, int target) { int len=nums.size(); ...
- 《剑指offer》第六十八题(树中两个结点的最低公共祖先)
// 面试题68:树中两个结点的最低公共祖先 // 题目:输入两个树结点,求它们的最低公共祖先. #include <iostream> #include "Tree.h&quo ...
- 《剑指offer》第四十六题(把数字翻译成字符串)
// 面试题46:把数字翻译成字符串 // 题目:给定一个数字,我们按照如下规则把它翻译为字符串:0翻译成"a",1翻 // 译成"b",……,11翻译成&qu ...
- wow 滚动动画
1.demo <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...