bootstrap時(shí)間選擇器實(shí)現(xiàn)源碼分享
在bootstrap框架中的時(shí)間選擇器有兩種： dateTimePicke r和 dateRangePicker，今天就和大家一起來扒一扒其具體用法和實(shí)現(xiàn)源碼。
1、dateTimePicker好像是官方嫡插件：
需要的文件：
1 <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
2 <script src="js/bootstrap-datetimepicker.min.js"></script>
3 <script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
4 <script src="js/moment.min.js"></script>
API直接參考：http://www.bootcss.com/p/bootstrap-datetimepicker/
2、dateRangePicker好像是第三方插件，它最終的是可以實(shí)現(xiàn)時(shí)間段的選擇：
效果
需要的文件：
1 <link rel="stylesheet" href="css/daterangepicker-bs3.css">
2 <script src="js/daterangepicker.js"></script>
3 <script src="js/moment.min.js"></script>
html代碼：
1 <div>
2 <div style="margin-top:5px">
3 <div>
4 <div>
5 <label>
6 日期：
7 </label>
8 <div>
9 <div id="reportrange" class="pull-left dateRange" style="width:350px">
10 <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
11 <span id="searchDateRange"></span>
12 <b></b>
13 </div>
14 </div>
15 </div>
16 </div>
17 </div>
18 </div>
js代碼：
1 <script type="text/javascript">
2 $(document).ready(function (){
3 //時(shí)間插件
4 $('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));
5 $('#reportrange').daterangepicker(
6 {
7 // startDate: moment().startOf('day'),
8 //endDate: moment(),
9 //minDate: '01/01/2012', //最小時(shí)間
10 maxDate : moment(), //最大時(shí)間
11 dateLimit : {
12 days : 30
13 }, //起止時(shí)間的最大間隔
14 showDropdowns : true,
15 showWeekNumbers : false, //是否顯示第幾周
16 timePicker : true, //是否顯示小時(shí)和分鐘
17 timePickerIncrement : 60, //時(shí)間的增量，單位為分鐘
18 timePicker12Hour : false, //是否使用12小時(shí)制來顯示時(shí)間
19 ranges : {
20 //'最近1小時(shí)': [moment().subtract('hours',1), moment()],
21 '今日': [moment().startOf('day'), moment()],
22 '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
23 '最近7日': [moment().subtract('days', 6), moment()],
24 '最近30日': [moment().subtract('days', 29), moment()]
25 },
26 opens : 'right', //日期選擇框的彈出位置
27 buttonClasses : [ 'btn btn-default' ],
28 applyClass : 'btn-small btn-primary blue',
29 cancelClass : 'btn-small',
30 format : 'YYYY-MM-DD HH:mm:ss', //控件中from和to 顯示的日期格式
31 separator : ' to ',
32 locale : {
33 applyLabel : '確定',
34 cancelLabel : '取消',
35 fromLabel : '起始時(shí)間',
36 toLabel : '結(jié)束時(shí)間',
37 customRangeLabel : '自定義',
38 daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
39 monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
40 '七月', '八月', '九月', '十月', '十一月', '十二月' ],
41 firstDay : 1
42 }
43 }, function(start, end, label) {//格式化日期顯示框
44 $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
45 });
46 //設(shè)置日期菜單被選項(xiàng) --開始--
47 /*
48 var dateOption ;
49 if("${riqi}"=='day') {
50 dateOption = "今日";
51 }else if("${riqi}"=='yday') {
52 dateOption = "昨日";
53 }else if("${riqi}"=='week'){
54 dateOption ="最近7日";
55 }else if("${riqi}"=='month'){
56 dateOption ="最近30日";
57 }else if("${riqi}"=='year'){
58 dateOption ="最近一年";
59 }else{
60 dateOption = "自定義";
61 }
62 $(".daterangepicker").find("li").each(function (){
63 if($(this).hasClass("active")){
64 $(this).removeClass("active");
65 }
66 if(dateOption==$(this).html()){
67 $(this).addClass("active");
68 }
69 });*/
70 //設(shè)置日期菜單被選項(xiàng) --結(jié)束--
71 })
72 </script>
但是這里的月份漢化存在問題，建議需要去 moment.min.js 文件里面去修改
也可以在后期漢化，比較完整的代碼：
1 var table;
2 $(function () {
3 table = $('#example').DataTable({
4 "ajax": {
5 "url":"/example/resources/server_processing_customCUrl.php",
6 "data": function ( d ) {
7 //添加額外的參數(shù)傳給服務(wù)器
8 d.extra_search = $('#reportrange span').html();
9 }},
10 "processing": true,
11 "serverSide": true,
12 "language": {
13 "sProcessing": "處理中...",
14 "sLengthMenu": "顯示 _MENU_ 項(xiàng)結(jié)果",
15 "sZeroRecords": "沒有匹配結(jié)果",
16 "sInfo": "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)",
17 "sInfoEmpty": "顯示第 0 至 0 項(xiàng)結(jié)果，共 0 項(xiàng)",
18 "sInfoFiltered": "(由 _MAX_ 項(xiàng)結(jié)果過濾)",
19 "sInfoPostFix": "",
20 "sSearch": "搜索:",
21 "sUrl": "",
22 "sEmptyTable": "表中數(shù)據(jù)為空",
23 "sLoadingRecords": "載入中...",
24 "sInfoThousands": ",",
25 "oPaginate": {
26 "sFirst": "首頁",
27 "sPrevious": "上頁",
28 "sNext": "下頁",
29 "sLast": "末頁"
30 },
31 "oAria": {
32 "sSortAscending": ": 以升序排列此列",
33 "sSortDescending": ": 以降序排列此列"
34 }
35 },
36 "dom":
37 "<'row'<'span9'l<'#mytoolbox'>><'span3'f>r>"+
38 "t"+
39 "<'row'<'span6'i><'span6'p>>" ,
40 initComplete:initComplete
41 });
42
43 });
44
45 /**
46 * 表格加載渲染完畢后執(zhí)行的方法
47 * @param data
48 */
49 function initComplete(data){
50
51 var dataPlugin =
52 '<div id="reportrange" class="pull-left dateRange" style="width:400px;margin-left: 10px"> '+
53 '日期：<i class="glyphicon glyphicon-calendar fa fa-calendar"></i> '+
54 '<span id="searchDateRange"></span> '+
55 '<b></b></div> ';
56 $('#mytoolbox').append(dataPlugin);
57 //時(shí)間插件
58 $('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));
59
60 $('#reportrange').daterangepicker(
61 {
62 // startDate: moment().startOf('day'),
63 //endDate: moment(),
64 //minDate: '01/01/2012', //最小時(shí)間
65 maxDate : moment(), //最大時(shí)間
66 dateLimit : {
67 days : 30
68 }, //起止時(shí)間的最大間隔
69 showDropdowns : true,
70 showWeekNumbers : false, //是否顯示第幾周
71 timePicker : true, //是否顯示小時(shí)和分鐘
72 timePickerIncrement : 60, //時(shí)間的增量，單位為分鐘
73 timePicker12Hour : false, //是否使用12小時(shí)制來顯示時(shí)間
74 ranges : {
75 //'最近1小時(shí)': [moment().subtract('hours',1), moment()],
76 '今日': [moment().startOf('day'), moment()],
77 '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
78 '最近7日': [moment().subtract('days', 6), moment()],
79 '最近30日': [moment().subtract('days', 29), moment()]
80 },
81 opens : 'right', //日期選擇框的彈出位置
82 buttonClasses : [ 'btn btn-default' ],
83 applyClass : 'btn-small btn-primary blue',
84 cancelClass : 'btn-small',
85 format : 'YYYY-MM-DD HH:mm:ss', //控件中from和to 顯示的日期格式
86 separator : ' to ',
87 locale : {
88 applyLabel : '確定',
89 cancelLabel : '取消',
90 fromLabel : '起始時(shí)間',
91 toLabel : '結(jié)束時(shí)間',
92 customRangeLabel : '自定義',
93 daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
94 monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
95 '七月', '八月', '九月', '十月', '十一月', '十二月' ],
96 firstDay : 1
97 }
98 }, function(start, end, label) {//格式化日期顯示框
99
100 $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
101 });
102
103 //設(shè)置日期菜單被選項(xiàng) --開始--
104 var dateOption ;
105 if("${riqi}"=='day') {
106 dateOption = "今日";
107 }else if("${riqi}"=='yday') {
108 dateOption = "昨日";
109 }else if("${riqi}"=='week'){
110 dateOption ="最近7日";
111 }else if("${riqi}"=='month'){
112 dateOption ="最近30日";
113 }else if("${riqi}"=='year'){
114 dateOption ="最近一年";
115 }else{
116 dateOption = "自定義";
117 }
118 $(".daterangepicker").find("li").each(function (){
119 if($(this).hasClass("active")){
120 $(this).removeClass("active");
121 }
122 if(dateOption==$(this).html()){
123 $(this).addClass("active");
124 }
125 });
126 //設(shè)置日期菜單被選項(xiàng) --結(jié)束--
127
128
129 //選擇時(shí)間后觸發(fā)重新加載的方法
130 $("#reportrange").on('apply.daterangepicker',function(){
131 //當(dāng)選擇時(shí)間后，出發(fā)dt的重新加載數(shù)據(jù)的方法
132 table.ajax.reload();
133 //獲取dt請求參數(shù)
134 var args = table.ajax.params();
135 console.log("額外傳到后臺的參數(shù)值extra_search為："+args.extra_search);
136 });
137
138 function getParam(url) {
139 var data = decodeURI(url).split("?")[1];
140 var param = {};
141 var strs = data.split("&");
142
143 for(var i = 0; i<strs.length; i++){
144 param[strs[i].split("=")[0]] = strs[i].split("=")[1];
145 }
146 return param;
147 }
148 }
文章來源：博客園
熱門帖子
- iDev 全平臺開發(fā)者大會門票免費(fèi)送！限量10張！
- 蘋果Mac Pro垃圾桶 最低配的ME253CH
- 本人想買個(gè)蘋果電腦搞開發(fā)，哪位大俠指點(diǎn)下
- 求助：failable initializer 'init(name:)' cannot override a non-failable initializer
- 為慶祝Swift發(fā)布1個(gè)月，雨燕社區(qū)正式上線。
- 在UITextFeild里輸入數(shù)據(jù)，這個(gè)數(shù)據(jù)怎么做加減乘除？
- Swift 高仿喜馬拉雅FM
- 要成為自由職業(yè)者？先要學(xué)會蘋果的Swift哦
- 用swift實(shí)現(xiàn)的調(diào)用系統(tǒng)相機(jī)，相冊的DEMO
- 關(guān)于嵌入式引用\()