[英]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.php
, plannerdata.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.