Использование amsul pickdate в моем AJAX звонки

Question

Я пытаюсь использовать amsul DatePicker (так называемый pickdate) передать даты моего АЯКСА вызову ...

У меня есть два поля ввода, (от и до):

<input id="from"> <input id="to"> 

Моего Js код:

var $input = $('#from').pickadate({ 
    formatSubmit : 'yyyy-mm-dd', 
    format : 'fro!m: dd-mm-yyyy', 
    hiddenName : true 
}); 
var $input = $('#to').pickadate({ 
    formatSubmit : 'yyyy-mm-dd', 
    format : 'fro!m: dd-mm-yyyy', 
    hiddenName : true 
}); 

Елка, я не знаю, как принимать значение от pickadte, и передать их в функцию show_ersults ниже ...

И мой Аякса вызов Моррису схеме:

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 моему АЯКС вызов ..

Мой 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); 
} 

Ваша помощь будет apreciated. С наилучшими пожеланиями, Daniel

Answer 1

Для передачи данных изменяет АЯКС вызов в парах данных:

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']; 

Answer 2

Я сделал то же самое, как вы запрашиваете , но вместо этого я использовал Bootprap datepicker. И я не использовал PHP. Прежде всего вам нужно искать событие, когда вы выбираете день в дампиксере Amsul, а затем передаете его на вызов ajax. Я покажу вам небольшой пример, используя morris и bootstrap datepicker. Это отлично работает для меня.

HTML

<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> 

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; 
     } 
    }); 
}