2016-08-09 16 views
0

Hallo, ich bin neu in der Programmierung Studie über daterange und fand dieses http://www.daterangepicker.com/Wie bekomme ich Wert von Datepicker?

ich verfolgen, wie es zu benutzen, aber wie kann ich Daten von einem Datum dieser Code auf meine php bekommen? Ich versuche bekommen zu verwenden, aber seine Arbeit nicht

.php

<?php 
$startDate=$_GET['startDate']; 
$endDate=$_GET['endDate']; 
echo $statDate; 
?> 
<div id="reportrange" class="pull-right" style="background: #fff; cursor:  pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%"> 
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp; 
<span></span> <b class="caret"></b> 

Js

<script type="text/javascript"> 
    $(function() { 

var start = moment().subtract(29, 'days'); 
var end = moment(); 

function cb(start, end) { 
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
} 

$('#reportrange').daterangepicker({ 
    startDate: start, 
    endDate: end, 
    ranges: { 
     'Today': [moment(), moment()], 
     'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
     'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
     'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
     'This Month': [moment().startOf('month'), moment().endOf('month')], 
     'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
    } 
}, cb); 

cb(start, end); 

}); 
</script> 

Danke

+5

seltsam wie es scheinen kann, sind wir nicht die Support-Abteilung für jede dritte Partei Code auf dem Planeten. –

Antwort

0

Sie können das ohne ein Formular nicht tun. Im Grunde, was Sie tun müssen, ist das:

<!DOCTYPE html> 
<html dir="ltr" lang="en-US"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Daterangepicker Test</title> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" /> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript" src="moment.js"></script> 
    <script type="text/javascript" src="daterangepicker.js"></script> 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    <style type="text/css"> 
    body { 
     margin: 60px auto; 
     width: 480px; 
    } 
    #reportrange { 
     background: #fff; 
     cursor: pointer; 
     padding: 5px 10px; 
     border: 1px solid #ccc; 
     width: 100%; 
     margin-bottom: 15px; 
    } 
    </style> 
</head> 
<body> 

    <form method="get"> 
     <input type="hidden" id="start" name="startDate"> 
     <input type="hidden" id="end" name="endDate"> 

     <div id="reportrange" class="pull-right"> 
      <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp; 
      <span></span> <b class="caret"></b> 
     </div> 

     <input type="submit"> 

     <script type="text/javascript"> 
     $(function() { 
      var start = moment().subtract(29, 'days'); 
      var end = moment(); 

      function cb(start, end) { 
       $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
      } 

      $('#reportrange').daterangepicker({ 
       startDate: start, 
       endDate: end, 
       ranges: { 
        'Today': [moment(), moment()], 
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
        'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
        'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
        'This Month': [moment().startOf('month'), moment().endOf('month')], 
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
       } 
      }, cb); 

      $('#reportrange').on('apply.daterangepicker', function(ev, picker) { 
       $('input#start').val(picker.startDate.format('MM/DD/YYYY')); 
       $('input#end').val(picker.endDate.format('MM/DD/YYYY')); 
      }); 

      cb(start, end); 
     }); 
     </script> 
    </form> 
    <?php 
    if (isset($_GET['startDate']) && isset($_GET['endDate'])) { 
     $startDate = new DateTime($_GET['startDate']); 
     $endDate = new DateTime($_GET['endDate']); 
    ?> 
     <h2>Your chosen period is:</h2> 
    <?php 
     echo '<strong>' . $startDate->format('D, M j, Y') . '</strong> - <strong>' . $endDate->format('D, M j, Y') . '</strong>'; 
    } 
    ?> 
</body> 
</html> 
+0

Funktioniert perfekt danke :) – Skieth

0

, wenn Sie Datumsbereich Picker verwenden, Sie erhalten eine Datumsbereich-Zeichenfolge. genau wie "2016-08-09 10: 11: 12-2017-05-06 12:34:12", könnten Sie bemerken, dass es nur eine formatierte Zeichenfolge ist, aber Ihr PHP-Code muss einen separaten Wert erhalten.

Hier ist meine Lösung.

<input type="text" id="drpicker"/> 
<input type="hidden" id="start" name="startDate"/> 
<input type="hidden" id="end" name="endDate" /> 

//after you initialized your picker 
picker.on('apply.daterangepicker', function (ev, picker) { 
    var start = picker.startDate.format(dateFormat); 
    var end = picker.endDate.format(dateFormat); 
    $("#start).val(start); 
    $("#end").val(end); 
}); 

so, sollten Sie die Callback-Ereignis apply.daterangepicker hören, es aufgerufen wird, nachdem Sie getan haben Sie selection.And Sie Ihr Ende startdate bekommen endDate.Then Sie es in den Eingang [versteckt] Element festlegen. Ihr serverseitiger PHP-Code wird den separaten Datumswert erhalten