bootstrap datetimepicker 时间段选择限制
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head> <body>
<div class="container">
<form action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
<div class="input-group date form_date col-md-5" id="start-date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
<div class="input-group date form_date col-md-5" id="end-date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
</fieldset>
</form>
</div> <script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
var startDate = new Date(new Date().getTime() - 7 *24 * 60* 60 * 1000);
var endDate = new Date(); $('#start-date').datetimepicker({
initialDate:startDate,
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
endDate:endDate
}).on('changeDate', function(ev){
startDate = ev.date;
$('#end-date').datetimepicker('setStartDate', startDate); }); $('#end-date').datetimepicker({
initialDate:endDate,
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
startDate:startDate,
endDate:endDate
}).on('changeDate', function(ev){
endDate = ev.date;
$('#start-date').datetimepicker('setEndDate', endDate);
}); </script> </body>
</html>
bootstrap datetimepicker 时间段选择限制的更多相关文章
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...
- 物联网平台设计心得:DateTimePicker实现选择联动
所谓的选择联动,就是指,当我DateTimePicker1选择2月4号的时候,我DateTimePicker2只能选择2月4号和2月5号两天,当然你可以自行规定要选择的日期.这在一些图表查询条件里面是 ...
- bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装
1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...
- bootstrap datetimepicker 在 angular 项目中的运用
datetimepocker 是一个日期时间选择器,bootstrap datetimepicker 是 bootstrap 日期时间表单组件.访问 bootstrap-datetimepicker ...
- bootstrap datetimepicker的参数解释
使用bootstrap datetimepicker(日期时间选择器)的过程中,发现中文参数说明和英文参数说明严重不符,所以结合自己使用的情况和英文参数说明,做了如下翻译. $(".form ...
- Angularjs与bootstrap.datetimepicker结合实现日期选择器
http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...
- bootstrap datetimepicker 格式化yyyymmdd时,无法读取yyyymmdd格式
不知为何,java程序员爱用yyyymmdd格式化日期?导致bootstrap datetimepicker无法解析正确的日期 发现js中yyyymmdd不是正常能够解析的日期 查看datetimep ...
- bootstrap datetimepicker 位置错误
bootstrap datetimepicker 位置错误,大致问题跟其他网友描述的一样,页面自动出滚动条,然后datetimepicker飘到页脚,网上的方法都是修改place方法里面的555行左右 ...
- bootstrap --datetimepicker之时间段选择
文件引入 <script type="text/javascript" src="css/jquery-3.2.1.js"></script& ...
随机推荐
- 单例-b
这个比较老了,是mrc 里面的 此例以模仿Apple官方文档的单例写出来的.但是一直有一个非常不明白的地方,就是alloc与allocWithZone:的重载中,为什么要return [[self c ...
- 转:Github上最受关注的前端大牛,快来膜拜吧!
原文来自于:http://code.csdn.net/news/2820990 本文列出了Github上最受关注的10位前端大牛.看看他们负责的项目和提交的代码,你是不是能从中学到些什么? 1. Pa ...
- House Of Hello恶搞包为什么如此受热捧!
凤凰时尚 在大多数人的心中,奢侈品都是昂贵的,摆在精美的橱窗中,动辄上万的价格,高贵而冷艳,也让很多人望而却步.然而,最近在很多时尚年轻一族中却流传着这样一句话“昂贵不等于奢侈,奢侈是一种生活态 ...
- [置顶] 2014年八大最热门IT技能
根据Computerworld网站组织的年度预测调查,众多IT专业人士在2014年所面临的整体就业形势与今年基本持平——今年有33%的企业有计划增加IT部门的员工数量,而未来一年则有32%的企业有此打 ...
- Gvim各种插件配置(windows环境下)
1.Vundle插件:https://github.com/gmarik/Vundle.vim 用于管理Vim插件,安装此插件需要系统中已安装git,参考链接:Git for Windows安装和基本 ...
- C++ Primer 随笔 Chapter 9 顺序容器
参考:http://www.cnblogs.com/kurtwang/archive/2010/08/19/1802912.html 1..顺序容器:vector(快速随机访问):list(快速插入 ...
- HDU Collect More Jewels 1044
BFS + 状态压缩 险过 这个并不是最好的算法 但是写起来比较简单 , 可以AC,但是耗时比较多 下面是代码 就不多说了 #include <cstdio> #include <c ...
- webserver/CGI
来自:http://blog.sina.com.cn/s/blog_466c6640010000nj.html 1. TUX2. lighttpd,thttpd,shttpd 3. 几种web s ...
- Subsets II ——LeetCode
Given a collection of integers that might contain duplicates, nums, return all possible subsets. Not ...
- HDOJ 1846 Brave Game
Problem Description 十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中 ...