Php 在我的ajax调用中使用amsul pickdate

我正在尝试使用amsul日期选择器（称为pickdate）将日期传递给我的ajax调用

我有两个输入字段（从和到）：

首先，我不知道如何从pickadte获取值，并将它们传递到下面的show_ersults函数中

还有我对莫里斯图表的ajax调用：

function show_result(){ 
$.ajax({
    url: 'ajax.php',
    dataType: 'JSON',
    type: 'POST',
    data: {get_values: true},
    success: function(response) {
        Morris.Line({
            element: 'morris-line-chart',
            data: response,
            xkey: 'Timestamp',
            ykeys: ['Value'],
            labels: ['Income Today'],
            barColors: ['#2F2FFF'],
            smooth: false,
            resize: true
        });
    }
});}

（我的url显示类似url:

'ajax.php？from='+from…

）

我的问题是，如何将datepicker的日期传递给我的ajax调用

我的php（我想我已经准备好了）如下所示：

<?php
error_reporting(0);
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/database/db_connect.php";
include_once($path);

if (isset($_POST['from']) AND isset($_POST['to'])) {

    $from = $_POST['from']; 
    $from = $_POST['to'];
    $var = array();

    $query = "SELECT Date as Timestamp, ROUND(Value,0) as Value 
    FROM KPI WHERE idName=6 AND Date >= '$from' AND Date <= '$to'" 
    or die("Error in the consult.." . mysqli_error($link)); 

    $result = $link->query($query); 
    while($obj = mysqli_fetch_object($result)) {
        $var[] = $obj;
    }
    echo json_encode($var);
}

---

发送数据修改数据参数中的ajax调用：

function show_result(){ 
    $.ajax({
        url: 'ajax.php',
        dataType: 'JSON',
        type: 'POST',
        data: {'from': $('#from').val(), 'to': $('#to').val()},
        success: function(response) {
             Morris.Line({
                 element: 'morris-line-chart',
                 data: response,
                 xkey: 'Timestamp',
                 ykeys: ['Value'],
                 labels: ['Income Today'],
                 barColors: ['#2F2FFF'],
                 smooth: false,
                 resize: true
         });
    }
});}

并在服务器中更改此选项：

 $from = $_POST['from']; 
 $to   = $_POST['to'];

我按照你的要求做了同样的事情，但是我使用了引导日期选择器。我没有使用PHP。
首先，当您在Amsul datepicker中选择一天时，需要查找事件，然后将其传递给ajax调用。我将向您展示一个使用morris和bootstrap datepicker的小示例。这对我来说非常合适

HTML


选择一天

JavaScript

   function hourString(hour) {
     if (hour === 0) {
         return "12:00 am";
     }
     if (hour < 12) {
         return hour + ":00 am";
     }
     if (hour === 12) {
         return "12:00 pm";
     }
     return (hour - 12) + ":00 pm";
 }

  var ordersPackChart =
     Morris.Bar({
         element: 'morris-bar-chart',
         data: [],
         xkey: 'y',
         ykeys: ['a'],
         ymax: 1000,
         labels: ['Pack per hour'],
         hideHover: true,
         resize: true,
         barColors: ['#ed5565'],
         parseTime: false
     });

 function packResult(historydate, result) {
     result = JSON.parse(result);

     var data = [];
     for (var hour = 6; hour < 24; hour++) {

         var numberPack = 0;
         for (var i = 0; i < result.Result.length; i++) {
             if (result.Result[i].PACK_HOUR == hour) {
                 numberPack = result.Result[i].NUM_ORDER_PACK;
                 break;
             }
         }

         data.push({ y: hourString(hour), a: numberPack });
     }

     ordersPackChart.setData(data);
 }


 $(document).ready(function () {        
     $("#fromdate").datepicker({
         autoclose: true
     }).change(dateChanged)
       .on('changeDate', dateChanged);
      });

 function dateChanged(ev) {
     $(this).datepicker('hide');

     var day = $('#fromdate').val();

     $.ajax({
         type: "GET",
         url: '@Url.Action("GetQueryResult")',
         context: document.body,
         data: {
             querySetName: 'dashboard-packorder-statistics',
             queryName: 'OrderPack',
             historydate: day
         },
         success: function (result) {
             packResult(ordersPackChart.HISTORY_DATE, result);
         },
         error: function (xhr) {
             var message = "ErrorStatus: " + xhr.status + "  ReadyState: " + xhr.readyState;
         }
     });
 }

功能小时字符串（小时）{
如果（小时==0）{
返回“上午12:00”；
}
如果（小时<12）{
返回时间+“：00 am”；
}
如果（小时===12）{
返回“下午12:00”；
}
返回时间（小时-12）+“：00 pm”；
}
var订单包装图=
莫里斯酒吧({
元素：“莫里斯条形图”，
数据：[]，
xkey:'y'，
ykeys:[a']，
ymax:1000，
标签：[“每小时包装”]，
是的，
调整大小：对，
条形码颜色：['#ed5565']，
解析时间：false
});
函数packResult（历史日期、结果）{
result=JSON.parse（result）；
var数据=[]；
用于（变量小时=6；小时<24；小时++）{
var numberPack=0；
对于（变量i=0；i
还有，什么时候是范围选择器，我想使用HighCharts。对于那些范围选择器，它们工作得非常好
 $from = $_POST['from']; 
 $to   = $_POST['to'];

<div class="ibox-content">
     <div class="inner toast-bottom-full-width">
           <label>Select a day</label>
           <label for="fromdate" class='field prepend-icon'>
           <i class="glyphicon glyphicon-calendar"></i>
                <input type='text' id='fromdate' name="datepicker-from" style="width:90%" class="gui-input" data-date-format="yyyy-mm-dd" placeholder="" />
           </label>
      </div>

        <div class="hr-line-dashed"></div>
        <div id="morris-bar-chart"></div></div>

   function hourString(hour) {
     if (hour === 0) {
         return "12:00 am";
     }
     if (hour < 12) {
         return hour + ":00 am";
     }
     if (hour === 12) {
         return "12:00 pm";
     }
     return (hour - 12) + ":00 pm";
 }

  var ordersPackChart =
     Morris.Bar({
         element: 'morris-bar-chart',
         data: [],
         xkey: 'y',
         ykeys: ['a'],
         ymax: 1000,
         labels: ['Pack per hour'],
         hideHover: true,
         resize: true,
         barColors: ['#ed5565'],
         parseTime: false
     });

 function packResult(historydate, result) {
     result = JSON.parse(result);

     var data = [];
     for (var hour = 6; hour < 24; hour++) {

         var numberPack = 0;
         for (var i = 0; i < result.Result.length; i++) {
             if (result.Result[i].PACK_HOUR == hour) {
                 numberPack = result.Result[i].NUM_ORDER_PACK;
                 break;
             }
         }

         data.push({ y: hourString(hour), a: numberPack });
     }

     ordersPackChart.setData(data);
 }


 $(document).ready(function () {        
     $("#fromdate").datepicker({
         autoclose: true
     }).change(dateChanged)
       .on('changeDate', dateChanged);
      });

 function dateChanged(ev) {
     $(this).datepicker('hide');

     var day = $('#fromdate').val();

     $.ajax({
         type: "GET",
         url: '@Url.Action("GetQueryResult")',
         context: document.body,
         data: {
             querySetName: 'dashboard-packorder-statistics',
             queryName: 'OrderPack',
             historydate: day
         },
         success: function (result) {
             packResult(ordersPackChart.HISTORY_DATE, result);
         },
         error: function (xhr) {
             var message = "ErrorStatus: " + xhr.status + "  ReadyState: " + xhr.readyState;
         }
     });
 }