查询日期时间选择器在另一个函数调用中不获取日期

Question

请您解释一下这里的错误是什么，以及为什么在加载图函数调用中第二次警报中没有定义？

我在面对日期选择器时遇到了问题.我在这里也使用了引导

这是纽约的代码。

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" type="text/css" href="Styles/jchartfx.css" />
<link href="Styles/datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jchartfx.system.js"></script>
<script type="text/javascript" src="Scripts/jchartfx.coreBasic.js"></script>
<script src="Scripts/jchartfx.animation.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="Scripts/bootstrap-datepicker.js" type="text/javascript"></script>

​

          End Date:                                     Start Date:                                 

<script type="text/javascript" lang="javascript">

    var chart1;
    var startDate;
    var endDate;        

        $('#dp2').datepicker().on('changeDate', function (ev) {
            $('.span2').change();
        });

        $('.span2').change(function () {
            startDate = $(this).val();
            alert(startDate);                

        });

        $('#dp1').datepicker().on('changeDate', function (ev) {
            $('.span1').change();

        });

        $('.span1').change(function () {
            endDate = $(this).val();
            alert(endDate);
            loadChart();

        });

        function loadChart(startDate, endDate) {

            chart1 = new cfx.Chart();
            chart1.getAnimations().getLoad().setEnabled(true);
            chart1.setGallery(cfx.Gallery.Pie);

            alert(startDate);
            alert(endDate);

            //startDate = '11/20/2013';
            //endDate = '11/26/2013';

            $.ajax({
                type: "POST",
                url: ("Default2.aspx/GetData"),
                data: "{startDate:'" + startDate + "',endDate:'" + endDate + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {

                    var data = $.parseJSON(result.d);

                    chart1.setDataSource(data);
                    var divHolder = document.getElementById('ChartDiv');
                    chart1.create(divHolder);

                },
                error: function (xhr, txt, err) {
                    alert("error connecting to data: " + txt);
                }
            });
        }

</script>

​

Answer 1

您需要修改代码，如下所示。

var chart1;      

    $('#dp2').datepicker().on('changeDate', function (ev) {
        loadChart();
    });

    $('#dp1').datepicker().on('changeDate', function (ev) {
       loadChart();
    });
    function loadChart() {

        chart1 = new cfx.Chart();
        chart1.getAnimations().getLoad().setEnabled(true);
        chart1.setGallery(cfx.Gallery.Pie);

        var startDate = $("#dp2 input").val();
        var endDate = $("#dp1 input").val();

        alert(startDate);
        alert(endDate);

        //startDate = '11/20/2013';
        //endDate = '11/26/2013';

        $.ajax({
            type: "POST",
            url: ("Default2.aspx/GetData"),
            data: "{startDate:'" + startDate + "',endDate:'" + endDate + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {

                var data = $.parseJSON(result.d);

                chart1.setDataSource(data);
                var divHolder = document.getElementById('ChartDiv');
                chart1.create(divHolder);

            },
            error: function (xhr, txt, err) {
                alert("error connecting to data: " + txt);
            }
        });
    }