使用bootstrap-datetimepicker來做出日期時間選擇器
<!DOCTYPE html>
<htmllang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="./Chart.bundle.min.js"></script>
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>
<body>
<br/>
<div class="container">
<div>
<form action="" class="form-inline" role="form">
<div class="col-sm-12 col-md-2">
<select name='appleIDOption' id='appleIDOption' class="form-control" >
<!-- <option value="volvo">Volvo</option> -->
</select>
</div>
<div class="form-group col-sm-12 col-md-9">
<label for="dtp_input1" class="col-md-2 control-label">开始时间</label>
<div id="startTime" class="input-group date form_datetime col-md-4" data-date="" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" data-date-format="yyyy-mm-ddThh:ii:ss" value="" />
<label for="dtp_input2" class="col-md-2 control-label">结束时间</label>
<div id="endTime" class="input-group date form_datetime col-md-4" data-date="" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input2">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input2" data-date-format="yyyy-mm-ddThh:ii:ss" value="" /><br/>
</div>
</form>
<div class="col-sm-12 col-md-1">
<button class="btn btn-default" id="query">查询</button>
</div>
</div>
</div>
<div id="charts" class="container" style="max-width:1600px;max-height:400px;"></div>
</body>
<script type="text/javascript">
$('.form_datetime').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0
});
//沒有找到bootstrap-datetimepicker中轉出時間戳的格式，只好自己轉
//datastring後面不加+08:00的話Chrome會用+00:00，導致時間戳有誤
$('#startTime').datetimepicker().on('hide', function(ev){
$('#dtp_input1').val(Date.parse($('#dtp_input1').val().replace(' ',"T") + "+08:00"));
});
$('#endTime').datetimepicker().on('hide', function(ev){
$('#dtp_input2').val(Date.parse($('#dtp_input2').val().replace(' ',"T") + "+08:00"));
});
$("#query").click(function(){
$( "#charts" ).empty();
var appleIDSelected = $('#appleIDOption').val();
// 只取十位就好了
var startTime = $('#dtp_input1').val().substr(0,10);
var endTime = $('#dtp_input2').val().substr(0,10);
var postData = { appleID: appleIDSelected,startTime: startTime,endTime: endTime };
var jsonData = $.ajax({
url: 'keywordData.php',
method: 'POST',
data: postData,
}).done(function (results) {
// prepareChart(results);
});
});
</script>
</html>