English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
bootstrapには時間選択ツールが2種類あります：dateTimePickerとdateRangePicker
1、dateTimePickerは公式プラグインです：
必要なファイル：
<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はサードパーティプラグインであり、最終的には期間の選択ができます。
必要なファイル：
<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" スタイリング="幅:350px"> <i class="glyphicon glyphicon-カレンダー fa fa-/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, //使用するかどうか12時間表示を24時間形式で行う
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 = "今日";
}
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 件を表示，合計 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" スタイリング="幅:400px;マージン- 10px"> '+
日付：<i class="glyphicon glyphicon-カレンダー fa fa-/i> '+
/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, //使用するかどうか12時間表示を24時間形式で行う
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 = "今日";
}
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("ɷ
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実践トレーニング
これで本文のすべての内容が終わります。皆様の学習に役立つことを願っています。また、ナイアラトレーニングのサポートを多くいただければ幸いです。