BootStrap的Datepicker控件使用心得分享
2013年Bootstrap火了，2014年Bootstrap将继续受到更多人的喜欢，它不仅拥有一套完整漂亮的UI，而且爱好者们为其开发扩展了很多有用的插件和主题！让其拥有无限可能！
公司喜欢使用各种开源免费的框架，bootstrap就非常好用，而且框架布局很漂亮，用起来也很简单。今天遇到要使用它的datepicker这个控件。
问题是：两个时间点，分为开始时间和结束时间，结束时间必须在开始时间之后。于是一顿研究，从上午研究到3点才解决问题。
总结了一下问题所在。主要原因是项目里用的jquery，也用了jqueryui,碰巧它里面也有一个datepicker，名字一模一样。一直折腾啊，在查jquery的datepicker用法，在网上找了各种说是好使的，就是对datepicker绑定onSelect方法。恰巧的是，很多网友都说onSelect不起作用....
突然灵光一现，发现lib文件夹下一堆bootstrap的东西，更重要的是还有一个文件夹上写着bootstrap_datepicker巴拉巴拉的，才醒悟，我们用的不是jquery下的datepicker。⊙﹏⊙b汗
直接贴代码：
js代码
$('#starttime').datepicker({
format:'yyyy.mm.dd',
weekStart:1,
autoclose:true,
todayBtn:'linked',
language:'zh-CN'
}).on('changeDate',function(ev){
varstartTime=ev.date.valueOf();
if(start<teach){
alert("“评估开始时间”不能早于“授课时间”！");
$("#starttime").focus();
}
});
$('#endtime').datepicker({
format:'yyyy.mm.dd',
weekStart:1,
autoclose:true,
todayBtn:'linked',
language:'zh-CN'
}).on('changeDate',function(ev){
varendTime=ev.date.valueOf();
end=endTime;
if(end<start){
alert("“评估结束时间”不能早于“评估开始时间”！");
}else{
}
});
jsp代码：
<divid="starttime_main"class="control-group"> <labelclass="control-label"for="starttime">开始时间：</label> <divclass="dateform_datetimecontrols"data-date="2013.05.10"id="starttimeDiv"> <inputtype="text"class="span9"value=""id="starttime"readonly> <spanclass="add-on"> <iclass="icon-calendar"></i> </span> </div> </div> <divid="endtime_main"class="control-group"> <labelclass="control-label"for="endtime">结束时间：</label> <divclass="controlsdateform_datetime" data-date="2013.05.10"id="endtimeDiv"> <inputtype="text"class="span9"value=""id="endtime" readonly><spanclass="add-on"><i class="icon-calendar"></i></span> </div> </div>
以上所述是小编给大家介绍的BootStrap的Datepicker控件使用心得分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！