Question

您好我是关于daterange的编程研究的新手，并找到了这个http://www.daterangepicker.com/

我按照如何使用它，但我如何获取此代码的日期数据到我的PHP？我尝试使用get但它不能正常工作

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

谢谢

Answer 1

当您使用日期范围选择器时，您将获得日期范围字符串。就像＆＃34; 2016-08-09 10：11：12-2017-05-06 12：34：12＆＃34;，您可能会注意到它只是一个格式化的字符串，但您的PHP代码必须得到一个单独的值。

这是我的解决方案。

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

所以，你应该监听回调事件apply.daterangepicker，在你完成选择后调用它。你将获得你的startDate end endDate。然后你可以将它设置为input [hidden]元素。您的服务器端PHP代码将获得分离的日期值

Answer 2

如果没有表格，你就无法做到这一点。基本上你要做的就是：

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

如何从datepicker获取价值？

2 个答案: