BootStrap的Datepicker控制項使用心得分享_javascript技巧

2013年Bootstrap火了，2014年Bootstrap將繼續受到更多人的喜歡，它不僅擁有一套完整漂亮的UI，而且愛好者們為其開發擴充了很多有用的外掛程式和主題！讓其擁有無限可能！

公司喜歡使用各種開源免費的架構，bootstrap就非常好用，而且架構布局很漂亮，用起來也很簡單。今天遇到要使用它的datepicker這個控制項。

問題是：兩個時間點，分為開始時間和結束時間，結束時間必須在開始時間之後。於是一頓研究，從上午研究到3點才解決問題。

總結了一下問題所在。主要原因是項目裡用的jquery，也用了jquery ui,碰巧它裡面也有一個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){var startTime = 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){var endTime = ev.date.valueOf();end = endTime;if(end<start){alert("“評估結束時間 ”不能早於“評估開始時間 ” ！");}else{}});

jsp代碼：

<div id="starttime_main" class="control-group"><label class="control-label" for="starttime">開始時間：</label><div class="date form_datetime controls" data-date="2013.05.10" id="starttimeDiv"><input type="text" class="span9" value="" id="starttime" readonly> <span class="add-on"><i class="icon-calendar"></i> </span></div></div><div id="endtime_main" class="control-group"><label class="control-label" for="endtime">結束時間：</label><div class=" controls date form_datetime"data-date="2013.05.10" id="endtimeDiv"><input type="text" class="span9" value="" id="endtime"readonly> <span class="add-on"><iclass="icon-calendar"></i> </span></div></div> 

以上所述是小編給大家介紹的BootStrap的Datepicker控制項使用心得分享，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！