English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
bootstrap에서 시간 선택기는 dateTimePicker와 dateRangePicker 두 가지가 있습니다.
1dateTimePicker는 공식 플러그인입니다：
필요한 파일：
<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/
2dateRangePicker는 제3자 플러그인으로, 시간대 선택을 구현할 수 있습니다.
필요한 파일：
<link rel="stylesheet" href="css/daterangepicker-bs3.css"> <script src="js/daterangepicker.js"></script> <script src="js/moment.min.js"></script>
html 코드：
<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 코드：
<script type="text/javascript">
$(document).ready(function (){
//시간 플러그인
$('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + -MM-DD HH:mm:ss'));
$('#reportrange').daterangepicker(
{
// startDate: moment().startOf('day'),
//endDate: moment(),
//minDate: '01/01/2012', //최소 시간
maxDate : moment(), //최대 시간
days : 30
}, //시작과 끝 날짜의 최대 간격
showDropdowns : true,
showWeekNumbers : false, //주 번호를 표시
timePicker : true, //
timePickerIncrement : 60, //시간의 증가량, 단위는 분
timePicker12Hour : false, //사용1224시간제로 시간을 표시
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 : [ '1월', '2월', '3월', '4월', '5월', '6월',
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 = "오늘";
}
dateOption = "어제";
}
dateOption ="최근"7일";
}
dateOption ="최근"30일";
}else if("${riqi}"=='year'){
dateOption ="최근 1년";
}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 파일을 수정하는 것이 좋습니다.
도중에 번역할 수도 있으며, 더 완전한 코드는 다음과 같습니다：
var table;
$(function () {
table = $('#example').DataTable({
"ajax": {}}
"url":"/example/resources/server_processing_customCUrl.php",
"data": function ( d ) {
//서버에 전달할 추가 파라미터 추가
d.extra_search = $('#reportrange span').html();
"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') + ' - ' + -MM-DD HH:mm:ss'));
$('#reportrange').daterangepicker(
{
// startDate: moment().startOf('day'),
//endDate: moment(),
//minDate: '01/01/2012', //최소 시간
maxDate : moment(), //최대 시간
days : 30
}, //시작과 끝 날짜의 최대 간격
showDropdowns : true,
showWeekNumbers : false, //주 번호를 표시
timePicker : true, //
timePickerIncrement : 60, //시간의 증가량, 단위는 분
timePicker12Hour : false, //사용1224시간제로 시간을 표시
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 : [ '1월', '2월', '3월', '4월', '5월', '6월',
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 = "오늘";
}
dateOption = "어제";
}
dateOption ="최근"7일";
}
dateOption ="최근"30일";
}else if("${riqi}"=='year'){
dateOption ="최근 1년";
}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;
}
}
행복한 소리:
daterangepicker의 자료를 인터넷에서 검색할 때, 꽤 공식적인 웹사이트를 찾을 수 있습니다: http://www.daterangepicker.com/api가 전면적이지만, 실제 작업 습관은 편리하지 않기 때문에, 저는 daterangepicker를 더 추천합니다;-bs3
여러분이 더 깊이 배우고 싶다면, 여기를 클릭하여 배우세요. 또한, Bootstrap 학습 교본과 Bootstrap 실전 교본 두 가지 흥미로운 주제를 추가합니다:
이 글의 모든 내용이 끝이며, 여러분의 학습에 도움이 되길 바랍니다. 또한, 나의呐喊 교본에 많은 지원을 부탁드립니다.