在bootstrap中的時間選擇器有兩種:dateTimePicker和dateRangePicker
1、dateTimePicker好像是官方嫡插件:
需要的文件:
1
2
3
4
|
< link
rel = "stylesheet"
href = "css/bootstrap-datetimepicker.min.css" > < script
src = "js/bootstrap-datetimepicker.min.js" ></ script > < script
src = "js/bootstrap-datetimepicker.zh-CN.js" ></ script > < script
src = "js/moment.min.js" ></ script >
|
API直接參考:http://www.bootcss.com/p/bootstrap-datetimepicker/
2、dateRangePicker好像是第三方插件,它最終的是可以實現時間段的選擇。
需要的文件:
1
2
3
|
< link
rel = "stylesheet"
href = "css/daterangepicker-bs3.css" > < script
src = "js/daterangepicker.js" ></ script > < script
src = "js/moment.min.js" ></ script >
|
html代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
< div
class = "container-fluid" > < div
class = "row-fluid"
style = "margin-top:5px" > < div
class = "span4" > < div
class = "control-group" > < label
class = "control-label" > 日期: </ label > < div
class = "controls" > < div
id = "reportrange"
class = "pull-left
dateRange"
style = "width:350px" > < i
class = "glyphicon
glyphicon-calendar fa fa-calendar" ></ i > < span
id = "searchDateRange" ></ span > < b
class = "caret" ></ b > </ div > </ div > </ div > </ div > </ div > </ div > |
js代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<script
type= "text/javascript" > $(document).ready( function
(){ //時間插件 $( '#reportrange
span' ).html(moment().subtract( 'hours' ,
1).format( 'YYYY-MM-DD
HH:mm:ss' )
+ '
- '
+ moment().format( 'YYYY-MM-DD
HH:mm:ss' )); $( '#reportrange' ).daterangepicker( { //
startDate: moment().startOf('day'), //endDate:
moment(), //minDate:
'01/01/2012', //最小時間 maxDate
: moment(), //最大時間
dateLimit
: { days
: 30 },
//起止時間的最大間隔 showDropdowns
: true , showWeekNumbers
: false ,
//是否顯示第幾周 timePicker
: true ,
//是否顯示小時和分鐘 timePickerIncrement
: 60, //時間的增量,單位爲分鐘 timePicker12Hour
: false ,
//是否使用12小時制來顯示時間 ranges
: { //'最近1小時':
[moment().subtract('hours',1), moment()], '今日' :
[moment().startOf( 'day' ),
moment()], '昨日' :
[moment().subtract( 'days' ,
1).startOf( 'day' ),
moment().subtract( 'days' ,
1).endOf( 'day' )], '最近7日' :
[moment().subtract( 'days' ,
6), moment()], '最近30日' :
[moment().subtract( 'days' ,
29), moment()] }, opens
: 'right' ,
//日期選擇框的彈出位置 buttonClasses
: [ 'btn
btn-default'
], applyClass
: 'btn-small
btn-primary blue' , cancelClass
: 'btn-small' , format
: 'YYYY-MM-DD
HH:mm:ss' ,
//控件中from和to
顯示的日期格式 separator
: '
to ' , locale
: { applyLabel
: '確定' , cancelLabel
: '取消' , fromLabel
: '起始時間' , toLabel
: '結束時間' , customRangeLabel
: '自定義' , daysOfWeek
: [ '日' ,
'一' ,
'二' ,
'三' ,
'四' ,
'五' ,
'六'
], monthNames
: [ '一月' ,
'二月' ,
'三月' ,
'四月' ,
'五月' ,
'六月' , '七月' ,
'八月' ,
'九月' ,
'十月' ,
'十一月' ,
'十二月'
], firstDay
: 1 } },
function (start,
end, label) { //格式化日期顯示框 $( '#reportrange
span' ).html(start.format( 'YYYY-MM-DD
HH:mm:ss' )
+ '
- '
+ end.format( 'YYYY-MM-DD
HH:mm:ss' )); }); //設置日期菜單被選項
--開始-- /* var
dateOption ; if("${riqi}"=='day')
{ dateOption
= "今日"; }else
if("${riqi}"=='yday') { dateOption
= "昨日"; }else
if("${riqi}"=='week'){ dateOption
="最近7日"; }else
if("${riqi}"=='month'){ dateOption
="最近30日"; }else
if("${riqi}"=='year'){ dateOption
="最近一年"; }else{ dateOption
= "自定義"; } $(".daterangepicker").find("li").each(function
(){ if($(this).hasClass("active")){ $(this).removeClass("active"); } if(dateOption==$(this).html()){ $(this).addClass("active"); } });*/ //設置日期菜單被選項
--結束-- }) </script> |
但是這裏的月份漢化存在問題,建議需要去moment.min.js文件裏面去修改。
也可以在後期漢化,比較完整的代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
var
table; $( function
() { table
= $( '#example' ).DataTable({ "ajax" :
{ "url" : "/example/resources/server_processing_customCUrl.php" , "data" :
function
( d ) { //添加額外的參數傳給服務器 d.extra_search
= $( '#reportrange
span' ).html(); }}, "processing" :
true , "serverSide" :
true , "language" :
{ "sProcessing" :
"處理中..." , "sLengthMenu" :
"顯示
_MENU_ 項結果" , "sZeroRecords" :
"沒有匹配結果" , "sInfo" :
"顯示第
_START_ 至 _END_ 項結果,共 _TOTAL_ 項" , "sInfoEmpty" :
"顯示第
0 至 0 項結果,共 0 項" , "sInfoFiltered" :
"(由
_MAX_ 項結果過濾)" , "sInfoPostFix" :
"" , "sSearch" :
"搜索:" , "sUrl" :
"" , "sEmptyTable" :
"表中數據爲空" , "sLoadingRecords" :
"載入中..." , "sInfoThousands" :
"," , "oPaginate" :
{ "sFirst" :
"首頁" , "sPrevious" :
"上頁" , "sNext" :
"下頁" , "sLast" :
"末頁" }, "oAria" :
{ "sSortAscending" :
":
以升序排列此列" , "sSortDescending" :
":
以降序排列此列" } }, "dom" : "<'row'<'span9'l<'#mytoolbox'>><'span3'f>r>" + "t" + "<'row'<'span6'i><'span6'p>>"
, initComplete:initComplete }); }); /** *
表格加載渲染完畢後執行的方法 *
@param data */ function
initComplete(data){ var
dataPlugin = '<div
id="reportrange" class="pull-left dateRange" style="width:400px;margin-left: 10px"> ' + '日期:<i
class="glyphicon glyphicon-calendar fa fa-calendar"></i> ' + '<span
id="searchDateRange"></span> ' + '<b
class="caret"></b></div> ' ; $( '#mytoolbox' ).append(dataPlugin); //時間插件 $( '#reportrange
span' ).html(moment().subtract( 'hours' ,
1).format( 'YYYY-MM-DD
HH:mm:ss' )
+ '
- '
+ moment().format( 'YYYY-MM-DD
HH:mm:ss' )); $( '#reportrange' ).daterangepicker( { //
startDate: moment().startOf('day'), //endDate:
moment(), //minDate:
'01/01/2012', //最小時間 maxDate
: moment(), //最大時間 dateLimit
: { days
: 30 },
//起止時間的最大間隔 showDropdowns
: true , showWeekNumbers
: false ,
//是否顯示第幾周 timePicker
: true ,
//是否顯示小時和分鐘 timePickerIncrement
: 60, //時間的增量,單位爲分鐘 timePicker12Hour
: false ,
//是否使用12小時制來顯示時間 ranges
: { //'最近1小時':
[moment().subtract('hours',1), moment()], '今日' :
[moment().startOf( 'day' ),
moment()], '昨日' :
[moment().subtract( 'days' ,
1).startOf( 'day' ),
moment().subtract( 'days' ,
1).endOf( 'day' )], '最近7日' :
[moment().subtract( 'days' ,
6), moment()], '最近30日' :
[moment().subtract( 'days' ,
29), moment()] }, opens
: 'right' ,
//日期選擇框的彈出位置 buttonClasses
: [ 'btn
btn-default'
], applyClass
: 'btn-small
btn-primary blue' , cancelClass
: 'btn-small' , format
: 'YYYY-MM-DD
HH:mm:ss' ,
//控件中from和to
顯示的日期格式 separator
: '
to ' , locale
: { applyLabel
: '確定' , cancelLabel
: '取消' , fromLabel
: '起始時間' , toLabel
: '結束時間' , customRangeLabel
: '自定義' , daysOfWeek
: [ '日' ,
'一' ,
'二' ,
'三' ,
'四' ,
'五' ,
'六'
], monthNames
: [ '一月' ,
'二月' ,
'三月' ,
'四月' ,
'五月' ,
'六月' , '七月' ,
'八月' ,
'九月' ,
'十月' ,
'十一月' ,
'十二月'
], firstDay
: 1 } },
function (start,
end, label) { //格式化日期顯示框 $( '#reportrange
span' ).html(start.format( 'YYYY-MM-DD
HH:mm:ss' )
+ '
- '
+ end.format( 'YYYY-MM-DD
HH:mm:ss' )); }); //設置日期菜單被選項
--開始-- var
dateOption ; if ( "${riqi}" == 'day' )
{ dateOption
= "今日" ; } else
if ( "${riqi}" == 'yday' )
{ dateOption
= "昨日" ; } else
if ( "${riqi}" == 'week' ){ dateOption
= "最近7日" ; } else
if ( "${riqi}" == 'month' ){ dateOption
= "最近30日" ; } else
if ( "${riqi}" == 'year' ){ dateOption
= "最近一年" ; } else { dateOption
= "自定義" ; } $( ".daterangepicker" ).find( "li" ).each( function
(){ if ($( this ).hasClass( "active" )){ $( this ).removeClass( "active" ); } if (dateOption==$( this ).html()){ $( this ).addClass( "active" ); } }); //設置日期菜單被選項
--結束-- //選擇時間後觸發重新加載的方法 $( "#reportrange" ).on( 'apply.daterangepicker' , function (){ //當選擇時間後,出發dt的重新加載數據的方法 table.ajax.reload(); //獲取dt請求參數 var
args = table.ajax.params(); console.log( "額外傳到後臺的參數值extra_search爲:" +args.extra_search); }); function
getParam(url) { var
data = decodeURI(url).split( "?" )[1]; var
param = {}; var
strs = data.split( "&" ); for ( var
i = 0; i<strs.length; i++){ param[strs[i].split( "=" )[0]]
= strs[i].split( "=" )[1]; } return
param; } } |