1

Bootstrap 3 datetimepicker を使用しようとしています。しかし、グリフィコン カレンダーが開きません。このフィドルを参照してください: http://jsfiddle.net/vqsss5fx/

$(function () {

    var data = [
        { rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' },
        { rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' },
        
    ];
    var obj = { 
      
        title: "ParamQuery Grid with JSON Data",      
        scrollModel:{autoFit:true, theme:true}
    };
    obj.colModel = [
        { title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
        { title: "Company", width: 200, dataType: "string", dataIndx: "company" },
		{ title: "DatePicker", width: 200, dataType: "string", dataIndx: "date",editable:false, 
		 render : function(){
		  var date = '<div class="form-group" style="width:150px;margin-left:50px;text-align:center"><div class="input-group date" id="datetimepicker123"><input type="text" value="04/05/2012 00:00" class="form-control"><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>';
		                                                                                                                                                                      
		  return date;
		 }
		 },
        { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" },
      
    ];
	
	 $('body').on('mouseover','.input-group',function() {		
	 
		$("#datetimepicker123").datetimepicker();
	 });
	
    obj.dataModel = { data: data };
	
    $("#grid_json").pqGrid(obj);
	
});
 	 
<div id="grid_json" style="margin:100px;"></div>

4

1 に答える 1

2

3 つの問題があります。

  • 同じ ID (#datetimepicker123) を持つ複数の HTML 要素があります: 避けてください!
  • 代わりに、すべての日付入力にタイムピッカーを追加するために$("#datetimepicker123").datetimepicker();使用する必要があります。$(".input-group.date").datetimepicker();

  • タイムピッカーが表示されますが、HTML セルによって切り詰められています (入力フィールドの下に矢印が表示されます)。一部の CSS カスタマイズが必要になる場合があります。

    .pq-grid-cell{
    overflow:visible;
}

結果: http://jsfiddle.net/vqsss5fx/3/

于 2015-03-30T11:27:16.407 に答える