官方文档: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. 某比赛小记1- 挑选第N大数字

    题目:给1000个数字(有重复),从小到大排列后,挑选第N个数字. 数字文件如下:numbers.rar ,挑选第727个数字. java版本: //数组初始化 String str = " ...

  2. Linux的档案权限与目录配置练习题

    1.请说明/bin与/usr/bin目录所防止的执行文件有何不同之处:/bin主要放置在开机时,以及进入单人维护模式后还能够被使用的指令,至于/usr/bin则是大部分软件提供的指令放置处 2.请说明 ...

  3. 大数据学习——spark-steaming学习

    官网http://spark.apache.org/docs/latest/streaming-programming-guide.html 1.1.  用Spark Streaming实现实时Wor ...

  4. day03_11 if语句实现猜年龄01

    老男孩猜年龄游戏 age_of_princal = 56 guess_age = int( input(">>:") ) #以下为伪代码 ''' if guess_ag ...

  5. Mark Down 简单标记语言

    MarkDown介绍=============== ## 1.标题分级介绍 #一级标题###三级标题######六级标题 一级标题============== 二级标题---------------- ...

  6. [错误处理]UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 0: ordinal not in range(128)

    Stackoverflow 回答: 将byte类型转化:byte_string.decode('utf-8') Jinja2 is using Unicode internally which mea ...

  7. Android Webview 与JS交互

    Android中 WebView控件支持JS与本地代码的交互. // 是否允许在webview中执行javascript webSettings.setJavaScriptEnabled(true); ...

  8. 如何在c#代码中执行带GO语句的SQL文件

      需要在C#代码中执行一个SQL文件的内容.遇到了两个问题: 1. 因为SQL文件中有"GO"语句,执行时报错"Incorrect syntax near 'GO'.& ...

  9. hihoCoder #1656 前后缀查询

    题目大意 给定 $n$($n\le 50000$) 个由小写英文字母构成的字符串,每个串的长度不超过 10,每个串有一个权值 $v$ ($1\le v\le 100000$). 回答 $m$($m\l ...

  10. hdu 4671 异面直线的距离

    题目大意:空间中有许多无限长的棒子(圆柱体),求棒子间最小距离. #include <iostream> #include <cstdio> #include <cstr ...