我在加载jquery datetime picker时遇到问题。我使用了bootstrap以及nv.d3图表。请帮助我。
这里当我点击输入然后日历没有显示以及它在javascript中的更改功能由于某些问题而无效。请帮我显示该日历。
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="Styles/datepicker.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="Scripts/bootstrap-datepicker.js" type="text/javascript"></script>
<link href="nv.d3.css" rel="stylesheet" type="text/css" />
<script src="d3.v3.js" type="text/javascript"></script>
<script src="nv.d3.js" type="text/javascript"></script>
<script src="mychart.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div class="input-append date" id="dp1" style="width: 200px; height: 100px; float:right;
margin-top: 60px; margin-left: 200px; display: inline-block">
End Date:
<input class="span1" size="16" type="text" id="end" runat="server" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<div class="input-append date" id="dp2" style="width: 200px; height: 100px; float: right;
margin-top: 60px; margin-left: 100px; display: inline-block">
Start Date:
<input class="span2" size="16" type="text" id="start" runat="server" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<div id='chart'style="width: 400px; height: 200px; padding-top:100px; display:inline-lock">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style='height: 400px'>
</svg>
</div>
</asp:Content>
My javascript code
window.onload = nv.addGraph;
var chart = nv.models.pieChart();
var startDate;
var endDate;
$('#dp2').datepicker().on('changeDate', function (ev) {
$("#chart svg").html('');
nv.addGraph();
});
$('#dp1').datepicker().on('changeDate', function (ev) {
$("#chart svg").html('');
nv.addGraph();
});
nv.addGraph(function () {
var startDate = $("#dp2 input").val();
var endDate = $("#dp1 input").val();
$.ajax({
type: "POST",
url: ("Default.aspx/GetData"),
data: "{startDate:'" + startDate + "',endDate:'" + endDate + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
var data = $.parseJSON(result.d);
// console.log(data);
chart.x(function (d) { return d.label });
chart.y(function (d) { return d.value });
chart.showLabels(false);
d3.select("#chart svg")
.datum(data)
.transition().duration(1200)
.call(chart);
return chart;
},
error: function (xhr, txt, err) {
alert("error connecting to data: " + txt);
}
});
});