bootstrap datetimerange

天用的了bootstrap日期插件感受搜索的資料不是不少在此寫下一些使用的心得： 
插件開源地址：daterangepicker日期控件， 
插件使用只要按照開源中的文檔信息來就好先包括如下引用：

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="moment.js"></script> <script type="text/javascript" src="daterangepicker.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap.css" /> <link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

包含對jquery，bootstrap框架的引用，以及日期處理用的moment.js,最後加載上這個插件的js和css文件 
而後和大部分jq插件同樣，該插件也是對$.fn的擴展因此進行如下的操做來使用這個控件

<script type="text/javascript"> $(document).ready(function() { $('input[name="daterange"]').daterangepicker(); }); </script>

用jq獲取到你要插入的那個元素而後運行daterangepicker函數就能使用它默認的樣式和屬性了， 
不過光有這個確定是不行的，daterangepicker函數能夠接受一個參數對象和一個回調函數，以下：

$('input[name="daterange"]').daterangepicker( { format: 'YYYY-MM-DD', startDate: '2013-01-01', endDate: '2013-12-31' }, function(start, end, label) { alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD')); } );

如下是插件中locale默認屬性

{ 
applyLabel: ‘Apply’, 
cancelLabel: ‘Cancel’, 
fromLabel: ‘From’, 
toLabel: ‘To’, 
weekLabel: ‘W’, 
customRangeLabel: ‘Custom Range’, 
daysOfWeek: moment.weekdaysMin(), 
monthNames: moment.monthsShort(), 
firstDay: moment.localeData()._week.dow };

咱們只有更改這些參數就可以使這個插件變成中文的插件

$('input[name=datetime]').daterangepicker({ format: 'YYYY-MM-DD', startDate: '2013-01-01', endDate: new Date(), maxDate:new Date(), locale:{ applyLabel: '確認', cancelLabel: '取消', fromLabel: '從', toLabel: '到', weekLabel: 'W', customRangeLabel: 'Custom Range', daysOfWeek:["日","一","二","三","四","五","六"], monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"], } }, function (start, end, label) { alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD')); });

效果以下： 

這樣就有了一箇中文的日期插件了，固然還有其餘的參數可使用包括添加本身的class用來敷寫bootstrap的樣式來實現本身想要的樣式，也可使用單選時間框函數來實現，具體的你們能夠仔細查看官方的文檔來構建本身須要的時間選取控件