bootstrap-datetimepicker 日期控件的开始日期
今天做日期控件,需求要求设置一个时间范围限制,选择从今天开始的日期才可以选择,今天以前都不可以选择

主要体现在bootstrap-datetimepicker控件下面的2个日期参数
weekStart: 1,
startDate:new Date(日期),
引用的基础库有
<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.fr.js" charset="UTF-8"></script>
HTML代码
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">time start</label>
<div class="input-group date form_date_start col-md-3">
<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-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" />
</div>
JS代码
var newDate = new Date();
var t = newDate.toJSON();
$('.form_date_start').datetimepicker({
format: 'yyyy-mm-dd',
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
weekStart: 1,
startDate:new Date(t),
});
附:精确到分的时间、年月日、时间、年月、月日、从今天开始、到今天结束

HTML
<div class="container">
<form action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-5" >
<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-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" 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" >
<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_input3" class="col-md-2 control-label">Time Picking</label>
<div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
<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-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">month Picking</label>
<div class="input-group date form_month col-md-5">
<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-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">month date Picking</label>
<div class="input-group date form_month_date col-md-5">
<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-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">year Picking</label>
<div class="input-group date form_year col-md-5">
<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-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">time start</label>
<div class="input-group date form_date_start col-md-3">
<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-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" />
</div>
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">time end</label>
<div class="input-group date form_date_end col-md-3">
<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-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" />
</div>
</fieldset>
</form>
</div>
JS
$('.form_datetime').datetimepicker({
//精确到分的时间
format: 'yyyy-mm-dd - HH:ii p',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
minuteStep : 1
});
$('.form_date').datetimepicker({
//年月日
format: 'yyyy-mm-dd',
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
$('.form_time').datetimepicker({
//时间
format:"hh:ii",
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0,
minuteStep : 1
});
$('.form_month').datetimepicker({
//年月
format: 'yyyy-mm',
weekStart: 1,
autoclose: true,
startView: 3,
minView: 3,
forceParse: false,
language: 'zh-CN'
});
$('.form_month_date').datetimepicker({
//月日
format:"mm-dd",
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
$('.form_year').datetimepicker({
format: 'yyyy-mm',
weekStart: 1,
autoclose: true,
startView: 4,
minView: 4,
forceParse: false,
language: 'zh-CN'
});
var newDate = new Date();
var t = newDate.toJSON();
$('.form_date_start').datetimepicker({
//从今天开始
format: 'yyyy-mm-dd',
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
weekStart: 1,
startDate:new Date(t),
});
$('.form_date_end').datetimepicker({
//到今天结束
format: 'yyyy-mm-dd',
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
weekEnd: 1,
endDate:new Date(t),
});
bootstrap-datetimepicker 日期控件的开始日期的更多相关文章
- bootstrap日期控件(双日期、清空等问题解决)
bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架.在项目开发中,我们使用它的日期控件确实遇到了一些问题: 1.日期控件后面两个图标点击触发失效 2.双日期关联问题 3.双日期 ...
- easyui 日期控件,选择日期小于等于当前日期,开始日期小于等于结束日期
转载出处:http://blog.csdn.net/u013755149/article/details/76613028 $(function(){ $('#start_date').datebox ...
- 日期控件 My97DatePicker WdatePicker 日期格式
WdatePicker()只显示日期 WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})显示日期和时间 WdatePicker({dateFmt:'yyyy-MM ...
- Sharepoint2013:日期控件报错
1 问题 1> 在sharepoint中的,日期控件(DateTimeControl),日期过滤控件(Date Filter)和SPListViewFilter等包含日期组件的控件,在特定情况下 ...
- JGUI源码:实现日期控件显示(17)
本文实现一个日期控件显示,日期控件看起来很复杂,其实原理很简单,大部分情况下我们直接使用别人做得好的日期控件就行,但有时候特殊需求,比如显示提醒之类的,恐怕第三方控件就不好实现了, 为了使程序逻辑看起 ...
- My97DatePicker日期控件的使用
本文演示如何在MyEclipse项目中使用My97DatePicker日期控件 1.下载My97DatePicker日期控件, My97DatePicker日期控件下载地址 2.在MyEclipse项 ...
- ASP.NET AjaxControlToolkit-Framework4.0 配置实用(简单介绍CalendarExtender日期控件)
1:下载:AjaxControlToolkit Ajax Control Toolkit .NET 4 Ajax Control Toolkit .NET 4.5 Ajax Control Toolk ...
- 手机日期控件mobiscroll
query Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件可以让用户很方 ...
- Bootstrap中datetimepicker日期控件1899年问题解决
Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一个很尴尬的问题.我们项目一直采用的是angular+bootstrap,日期控件用的是boot ...
随机推荐
- knockoutJS学习笔记02:jsRender模板引擎
上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍另外一个模板引擎:jsRe ...
- NPOI操作EXCEL(一)——npoi基础
去年项目有一个子模块需要解析上百张不一样的excel表格入库,当时用的NPOI,做了很久...也尝试想把代码分享到oschina,结果没坚持两篇就放弃了. 赶巧的是,昨天运营那边提出要录入一些基础数据 ...
- Java JVM proxy setting
-Dhttp.proxyPort=8080(your port) -Dhttp.proxyHost=192.168.19.200(your IP) -Dhttp.nonProxyHosts=local ...
- 入门Webpack,看这篇就够了
来源于:http://www.jianshu.com/p/42e11515c10f 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有 ...
- [转]EL表达式和JSTL表达式实例
/* **Title:EL表达式和JSTL表达式实例 **Author:Insun **Blog:http://yxmhero1989.blog.163.com/ */ 为了方便写JSP,我们引入了E ...
- 公司VPN信息
公司VPN证书信息(请妥善留档本邮件) 管理 管理员 <admin@pansoft.com> 2016/12/12 11:00 收件人: huhuan@pansoft.com × ...
- 时间戳 时区 java mysql
当一个时间 比如2016年5月6日,生成时间戳.这个运算是与时区有关的.首先得确认这个时间是哪个时区的,然后转换成utc时区的时间.再减去1970,得到的秒数,就是时间戳. 时间戳是个一定的值,他与时 ...
- <<< MyEclipse软件中的快捷键
-------------------------------------MyEclipse 快捷键1(CTRL)-------------------------------------Ctrl+1 ...
- Linux快速体验
目录结构: /:根目录,根目录下一般只存放子目录,不存放文件./bin: 存放可执行的二进制文件,如常用的命令ls. tar.mv. cat等./boot: 存放linux系统启动时需要的一些文件./ ...
- elasticsearch agg
OK curl -XGET http://21.3.5.121:9200/ipv4geo/service/_count -d '{"query":{"match" ...