繁体   English   中英

使用jQuery(ajax)和php的上一个和下一个日期

[英]Previous and next date using jquery (ajax) and php

我有某种用php写的日历,带有上一个和下一个按钮。 现在,我想使用一些ajax来上一个或下一个日期,而不刷新页面。

在由ajax调用的php文件中,我有一个查询,该查询返回选定日期的任务(如: ...WHERE date = $date )。

问题是我无法到达今天的前一天,等等,直到第二天等等。

有人可以帮忙吗?

编辑

纽扣:

<button class='btn btn-default previous' data-date='$date'>
  <span class='glyphicon glyphicon-arrow-left' aria-hidden='true'></span>   
</button>
<button class='btn btn-default next' data-date='$date'>
  <span class='glyphicon glyphicon-arrow-right' aria-hidden='true'></span>
</button>

jQuery的:

$(document).ready(function() {
    $('button.previous').click(function() {
        var date = $(this).data('date');
        $.ajax({
            type: "POST",
            data: { action : "previous" , date: date },
            url: "includes/ajax/plannerdata.php",               
            success: function(returnData){                    
                $("#planner-data").html(returnData);
            }
        });
    });
    $('button.next').click(function() {
    var date = $(this).data('date');
        $.ajax({
            type: "POST",
            data: { action: 'next', date: date },
            url: "includes/ajax/plannerdata.php",               
            success: function(returnData){                    
                $("#planner-data").html(returnData); 
            }
        });
    });
});

plannerdata.php:

switch ($_POST['action']) {
    case 'next':
        $date = strftime('%Y-%m-%d', strtotime($_POST['date'] .' -1 day'));
        break;
    case 'previous':
        $date = strftime('%Y-%m-%d', strtotime($_POST['date'] .' +1 day'));
        break;
}

然后在查询中使用$ date。

更新后的plannerdata.php:

if (!isset ($_POST['date'])) { // At first page load or refresh (without using the previous/next buttons), plannerdata.php is also loaded bij ajax and injected in index.php
    $currentDatetime = new DateTime('NOW');
}
else { // Previous or next button is pressed
    $currentDatetime = new DateTime($_POST['date']);
}

    $dateModification = $_POST['action'];

    switch ($dateModification) {
        case 'previous':
            $currentDatetime->modify('-1 day');
            break;
        case 'next':
            $currentDatetime->modify('+1 day');
            break;
    }
    $date = $currentDatetime->format('Y-m-d');

编辑

plannerdata.php;

if (!isset ($_SESSION['date'])) {
    $_SESSION['date'] = new DateTime('NOW');
}

if (isset ($_POST['action'])) {
    switch ($_POST['action']) {
        case 'previous':
            $_SESSION['date']->modify('-1 day');
            break;
        case 'next':
            $_SESSION['date']->modify('+1 day');
            break;
    }
}

$date = $_SESSION['date']->format('Y-m-d');

按钮(在index.php内部)。 我删除了data-date属性:

<button class='btn btn-default previous'><span class='glyphicon glyphicon-arrow-left' aria-hidden='true'></span></button>
<button class='btn btn-default next'><span class='glyphicon glyphicon-arrow-right' aria-hidden='true'></span></button>

这些按钮位于和内,并且显示两个按钮之间的选定日期。

<ul>
    <li>button previous</li>
    <li><span id="planner_date">selected date</span></li>
    <li>button next</li>
<ul>

我还更改了Jquery。 我同时拨打ajax电话。

$(document).ready(function() {
    $('button.previous').click(function() {
        $.when(
                $.post("includes/ajax/plannerdata.php", {action: 'previous'}, function(data) {
                    plannerData = data;
                }),
                $.post("includes/ajax/date.php", {action: 'previous'}, function(date) {
                    calendardate = date;
                })
        ).then(function() {
            $("#planner-data").html(plannerData);
            $("#planner_date").text(calendardate);
        });
    });
    $('button.next').click(function() {
        $.when(
                $.post("includes/ajax/plannerdata.php", {action: 'next'}, function(data) {
                    plannerData = data;
                }),
                $.post("includes/ajax/date.php", {action: 'next'}, function(date) {
                    calendardate = date;
                })
        ).then(function() {
            $("#planner-data").html(plannerData);
            $("#planner_date").text(calendardate);
        });
    });
});

Date.php用于返回当前日期:

if (!isset ($_SESSION['current_date'])) {
    $_SESSION['current_date'] = new DateTime('NOW');
}

if (isset ($_POST['action'])) {
    switch ($_POST['action']) {
        case 'previous':
            $_SESSION['current_date']->modify('-1 day');
            break;
        case 'next':
            $_SESSION['current_date']->modify('+1 day');
            break;
    }
}

$date = $_SESSION['current_date']->format('Y-m-d');
echo $date;

编辑2015-03-05:

jQuery的:

$(document).ready(function() {
    $('button.previous').click(function() {
        $.when(
            $.post("includes/ajax/date.php", 
                {action: 'previous'}, 
                function(date) {
                   dates = jQuery.parseJSON(date);
                   calendardate = dates.dutch;

                    $.post("includes/ajax/plannerdata.php", 
                        {date: dates.sql},
                        function(data) {
                            plannerData = data;
                        })
                    })
                    ).then(function(){
                $("#planner_date").text(calendardate);
                $("#planner-data").html(plannerData);
            });
        });
});

date.php

if (!isset ($_SESSION['current_date'])) {
    $_SESSION['current_date'] = new DateTime('NOW');
}
if (isset ($_POST['action'])) {
    switch ($_POST['action']) {
        case 'previous':
            $_SESSION['current_date']->modify('-1 day');
            break;
        case 'next':
            $_SESSION['current_date']->modify('+1 day');
            break;
    }
}
$date_1 = $_SESSION['current_date']->format('Y-m-d');
$date_2 = $_SESSION['current_date']->format('d-m-Y');
$response = array('sql' => $date_1, 'dutch' => $date_2);
echo json_encode($response);

更新2015-03-08

$(document).ready(function() {
    $('button.previous').click(function() {
        var calendardate;
        var plannerData;
        $.when(
            $.post("includes/ajax/date.php", 
                {action: 'previous'}, 
                function(date) {
                   dates = jQuery.parseJSON(date)
                   calendardate = dates.dutch;

                    $.post("includes/ajax/plannerdata.php", 
                            {date: dates.sql},
                            function(data) {
                               plannerData = data;
                            })}
                        )).then(function(){
                $("#planner_date").text(calendardate)
                $("#planner-data").html(plannerData);
            });
        });
});

如我所见,最适合您的应该是PHP DateTime 您可以将脚本修改为以下形式:

$dateModification=$_POST['action'];//for clarification
//Datetime understands every format strtotime does
$currentDatetime=new DateTime($_POST['date']);

switch ($dateModification) {
    case 'next':
        $currentDateTime->modify("+1 day");//simple, isn't it?
        break;
    case 'previous':
        $currentDateTime->modify("-1 day");
        break;
}
//final result
$date=$currentDateTime->format("Y-m-d");

使用DateTime,您可以轻松地将日期作为对象进行操作。 还可以轻松地将两个带有<> ==符号的Datetime对象进行比较:

$firstDatetime=new Datetime("2015-02-20");
$secondDatetime=new Datetime("2015-02-25");
if ($firstDatetime<$secondDatetime)
{
    echo '$firstDatetime was indeed first!';
}

自己尝试一下:)

编辑-如何在服务器端处理日期修改:

关于它的更多想法。 您更新的代码正在对服务器进行两个AJAX调用,它们都在修改datetime对象。 正如它的工作一样,它正在复制代码。 让我们尝试修改调用和脚本以仅对一个DateTime对象起作用。 让我们将日期修改移到date.phpplannerdata.php将在同一日期变量上工作。

使用Javascript:

$(document).ready(function() {
    $('button.previous').click(function() {
        $.post("includes/ajax/date.php", 
            {action: 'previous'}, 
            function(date) {
                dates = jQuery.parseJSON(date)
                $("#planner_date").text(dates.dutch)
                $.post("includes/ajax/plannerdata.php", 
                    {date: dates.sql},
                    function(data) {
                        $("#planner-data").html(data);
                    })
            })
    })
});

PHP:

Date.php将保持不变,我们必须只更改plannerdata.php以使用相同的变量:

//we remove that block, as it will be set in date.php
/*if (!isset ($_SESSION['date'])) {
    $_SESSION['date'] = new DateTime('NOW');
}

if (isset ($_POST['action'])) {
    switch ($_POST['action']) {
        case 'previous':
            $_SESSION['date']->modify('-1 day');
            break;
        case 'next':
            $_SESSION['date']->modify('+1 day');
            break;
    }
}*/

$date = $_SESSION['current_date']->format('Y-m-d');

就是这样! :)

如何从特定格式创建DateTime ?:

为此,存在功能DateTime :: createFromFormat 用法示例:

setlocale(LC_TIME, "nl_NL");//firstly we need to setlocale, so month names will be properly recognized
$dateString='6 maart 2015';
$datetime=DateTime::createFromFormat("j F Y", $dateString);

这将返回您可以对其进行操作的datetime对象。

使用INTERVAL,例如:

明天:

SELECT * FROM table WHERE date = $date + INTERVAL 1 DAY

昨天

SELECT * FROM table WHERE date = $date - INTERVAL 1 DAY

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM