官方文档: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. ACM/ICPC 2018亚洲区预选赛北京赛站网络赛 A.Saving Tang Monk II(优先队列广搜)

    #include<bits/stdc++.h> using namespace std; ; ; char G[maxN][maxN]; ]; int n, m, sx, sy, ex, ...

  2. HDU 4990 Reading comprehension 矩阵快速幂

    题意: 给出一个序列, \(f_n=\left\{\begin{matrix} 2f_{n-1}+1, n \, mod \, 2=1\\ 2f_{n-1}, n \, mod \, 2=0 \end ...

  3. HDU 5614 Baby Ming and Matrix tree 树链剖分

    题意: 给出一棵树,每个顶点上有个\(2 \times 2\)的矩阵,矩阵有两种操作: 顺时针旋转90°,花费是2 将一种矩阵替换为另一种矩阵,花费是10 树上有一种操作,将一条路经上的所有矩阵都变为 ...

  4. XP系统连接win10家庭版共享的打印机方法

    1.高级共享设置.按照win7正常设置."家庭网络"公用网络”“工作网络”之类的注意根据当前配置设置! 2.由于控制面板无法开启Guest账户.需要用任务管理器,运行cmd(管理员 ...

  5. 《小团团团队》第九次团队作业:Beta冲刺与验收准备

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验十三 团队作业9:Beta冲刺与团队项目验收 团队名称 小团团团队 作业学习目标 (1)掌握软件黑盒测试技术:(2)学 ...

  6. Java + golang 爬取B站up主粉丝数

    自从学习了爬虫,就想在B站爬取点什么数据,最近看到一些个up主涨粉很快,于是对up主的粉丝数量产生了好奇,所以就有了标题~ 首先,我天真的以为通过up主个人空间的地址就能爬到 https://spac ...

  7. 什么是Maven?

    Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 发文时,绝大多数开发人员都把 Ant 当作 Java 编程项目的标准构建工具.遗憾的是, ...

  8. 令人惊叹的sublime text 3 插件

    1.Chinese​Localization------语言汉化.(新手必备) 2.SublimeTmpl------打开生成模板.(新手必备) 3.SublimeCodeIntel------代码自 ...

  9. jmeter进行dubbo接口测试

    最近工作中接到一个需求,需要对一个MQ消息队列进行性能测试,测试其消费能力,开发提供了一个dubbo服务来供我调用发送消息. 这篇博客,介绍下如何利用jmeter来测试dubbo接口,并进行性能测试. ...

  10. Leetcode 448.找到所有数组中消失的数字

    找到所有数组中消失的数字 给定一个范围在  1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现 ...