官方文档:http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm

常规使用:

<div class="input-group date form_datetime" id="sform">
  <input class="form-control data-form-start" type="text" placeholder="开始时间" name="start_time" id="start_time" readonly="true" value="" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<div class="input-group date form_datetime" id="eform">
  <input class="form-control data-form-start" type="text" placeholder="结束时间" name="end_time" id="end_time" readonly="true" value="" />
  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
$(".form_datetime").datetimepicker({
format:'yyyy/mm/dd',
language:'zh-CN',
minView: "month",
todayBtn: 1,
autoclose: 1,
})

开始时间,结束时间的使用:

注意:开始时间必须小于结束时间,结束时间必须大于开始时间

$("#sform").datetimepicker({
format:'yyyy/mm/dd',
language:'zh-CN',
minView: "month",
todayBtn: 1,
autoclose: 1,
}).on('show', function (ev) {//在控件显示时就触发事件
var etime = $("#end_time").val();//获取结束时间
$("#sform").datetimepicker('setEndDate', etime);//给开始控件设置一个结束的日期。
});
$("#eform").datetimepicker({
format:'yyyy/mm/dd',
language:'zh-CN',
minView: "month",
todayBtn: 1,
autoclose: 1,
}).on('show', function (ev) {
var stime = $("#start_time").val();
$("#eform").datetimepicker('setStartDate', stime);//给结束控件设置一个开始日期
});

参考文档:http://blog.csdn.net/gwpjava/article/details/48542121

http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm

bootstrap-datetimepicker时间控件的使用的更多相关文章

  1. bootstrap的时间控件使用(双日历)

    这段时间看了下bootstrap的时间控件,发现使用起来还是很简单的,趁着有时间的时候整理了一下,方便自己以后忘记的时候查阅... 废话不多说先上效果图 接下来是代码实现 第一步当然是导入css.js ...

  2. DateTimePicker时间控件:

    DateTimePicker时间控件: http://xdsoft.net/jqplugins/datetimepicker/ 可以参考文档设置各种属性,格式. 用法: 首先下载datetimepic ...

  3. C#--DataGridView添加DateTimePicker时间控件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. datetimepicker时间控件

    喜欢上datetimepicker源自于对bootstrap的喜欢. 一款简单到爆的时间空间 引入jq 引入bootstrap 引入datetimepicker和bootstrap-datetimep ...

  5. html,datepicker,datetimepicker时间控件使用

    1.My97DatePicker 传送门:点击打开链接 ps:My97DatePicker貌似对chrom不兼容 2.jquery日期选择/日历 http://www.oschina.net/proj ...

  6. bootstrap添加时间控件

    $('#startTime').daterangepicker({ singleDatePicker: true,format:"YYYY-MM-DD HH:mm:ss",time ...

  7. Bootstrap中时间(时间控件)的设计

    运用bootstrap的时间控件,生成时间选择器. 1.截图:有以下这些样式 10年视图        年视图         月视图         日视图         小时视图 2.视图设计: ...

  8. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  9. bootstrap 时间控件

    近期使用了bootstrap的UI感觉确实非常美丽,非常值得学习和使用. 以下先简单了解下bootstrap的时间控件. 这个时间控件使用起来还是很的简单.仅仅须要引入主要的css和js就能够了 须要 ...

  10. bootstrap datetimepicker时间日期控件

    github地址:https://github.com/smalot/bootstrap-datetimepicker Both Date and Time picker widget based o ...

随机推荐

  1. POJ - 3660 Cow Contest(传递闭包)

    题意: n个点,m条边. 若A 到 B的边存在,则证明 A 的排名一定在 B 前. 最后求所有点中,排名可以确定的点的个数. n <= 100, m <= 4500 刚开始还在想是不是拓扑 ...

  2. re--读书笔记【转】

    原文链接 * 正则表达式入门 1.正则表达式的两种基本用途:搜索和替换. 2.正则表达式是一些用来匹配和处理文本的字符串. 小结:正则表达式是文本处理方面功能最强大的工具之一,正则表达式语言用来构造正 ...

  3. BZOJ 3590: [Snoi2013]Quare

    首先有一个性质,一个双联通图一定可以拆成一个小的双联通子图和一条链 一个点可以视为权值为0的双联通图或者一个点的链 状压DP,枚举子集 O(3^n*n^2) #include<cstdio> ...

  4. UVa 10723 LCS变形 Cyborg Genes

    题解转自: UVA 10723 Cyborg Genes - Staginner - 博客园 首先这个题目肯定是按最长公共子序列的形式进行dp的,因为只有保证消去的一部分是最长公共子序列才能保证最后生 ...

  5. Java程序的结构和执行

    目录 Java程序的结构 Java程序的执行 source code -- compiler -- class file -- JVM compiler JVM Java语法 数据类型 数据的存储 堆 ...

  6. WCF服务编程——数据契约快速入门

    WCF序列化流程 序列化 默认用户自定义类型(类和结构)并不支持序列化,因为.NET无法判断对象状态是否需要反射到流. 用户自定义类的实例支持序列化 需要添加[Serialazable].若要允许可序 ...

  7. IDE介绍以及Eclipse的简单使用

    一.IDE介绍 ①   什么是IDE? 1.  IDE全称是”Integrated Development Environment”,中文称为“集成开发环境”; 2.是用于提供程序开发环境的应用程序, ...

  8. FTP的搭建过程,以及遇到的坑

    在之前的博客中,我有说到,我最喜欢用Yum在线安装的方式安装软件,简单省事儿.现在看来,也不尽然,关键是,无法快速找到我要的文件,整个whereis 也很累.所以,现在觉得,还是乖乖的整个压缩包,自行 ...

  9. Chromo开发常用插件和***工具

    地址:https://www.google.com/chrome/webstore/ ***工具:链接:http://pan.baidu.com/s/1pLakW7T 密码:2gpw Axure RP ...

  10. hosts文件位置

    windows C:\WINDOWS\system32\drivers\etc mac /etc/hosts 修改hosts文件会遇到无法保存的问题,解法方法参考下文 http://mtoou.inf ...