官方文档: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. (转)减少oracle sql回表次数 提高SQL查询性能

    要写出高效的SQL,那么必须必须得清楚SQL执行路径,介绍如何提高SQL性能的文章很多,这里不再赘述,本人来谈谈如何从 减少SQL回表次数 来提高查询性能,因为回表将导致扫描更多的数据块. 我们大家都 ...

  2. 【原创】关于高版本poi autoSizeColumn方法异常的情况

    之前使用的3.9版本,autoSizeColumn方法一切正常,现在切换到了3.15版本这个方法就出先了问题,问题如下,无法自动追踪所有的列. Exception in thread "ma ...

  3. linux学习-使用者身份切换

    在 Linux 系统当中还要作身份的变换?这是为啥?可能有底下几个原因啦! 使用一般账号:系统平日操作的好习惯 用较低权限启动系统服务 软件本身的限制 由于上述考虑,所以我们都是使用一般账号登入系统的 ...

  4. <node>……express的中间件……//

    Express是一个基于Node.js平台的web应用开发框架,在Node.js基础之上扩展了web应用开发所需要的基础功能,从而使得我们开发Web应用更加方便.更加快捷. 中间件是什么? 中间件函数 ...

  5. FastText 介绍

    FastText 介绍 在面试百度的NLP工程师时,被问及常用的词向量表示学习方法有哪些,我说知道word2vec,然后大佬又问我知道FastText么... 这就很尴尬了,不会! 不同于word2v ...

  6. Wannafly挑战赛6

    完全平方数 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 131072K,其他语言262144K64bit IO Format: %lld 题目描述 多次查询[l,r]范围内的完全平方 ...

  7. [转]netstat -tnl 列出监听中的连接,查看端口是否开启

    任何网络服务的后台进程都会打开一个端口,用于监听接入的请求. 这些正在监听的套接字也和连接的套接字一样,也能被 netstat 列出来. 参数 tnl, 现在我们可以看到处于监听状态的 TCP 端口和 ...

  8. iOS学习笔记38-MJExtension使用

    一.MJExtension第三方框架 我们在iOS开发过程中,我们常常需要将字典数据(也就是JSON数据)与Model模型之间的转化,例如网络请求返回的微博数据.等等,如果我们自己全部手动去创建模型并 ...

  9. NOJ——1665夜神的思考(YY+组合问题+分类讨论)

    [1665] 夜神的思考 时间限制: 1000 ms 内存限制: 65535 K 问题描述 最近夜神对二进制很感兴趣,于是他每次看到一串只包含1和0的字符串的时候就会想,这串字符串有多少子串是含有k个 ...

  10. 升级springboot 2.x 踩过的坑——跨域导致session问题

    目前IT界主流前后端分离,但是在分离过程中一定会存在跨域的问题. 什么是跨域? 是指浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域. 做过web后台的童鞋都知道,跨 ...