How to calculate the difference between two dates in php using jquery

Question

I have been trying to calculate the difference between two dates using the change function in jquery but i have not been getting a good response... code seem to run fine but it doesnt give me any result...

<input type="text" name="datte1" class="form-control datepicker" id="datte1">
<input type="text" name="datte2" class="form-control datepicker" id="datte2">

<div class="mx-auto" id="display_result"></div>

Jquery code is:

$(document).ready(function(){
    $('.datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true
    });
   var date1 = $('#datte1').val();
   var date2 = $('#datte2').val();  

$('.datepicker').change(function(){
        $.ajax({
            url:"caldate.php",
            method:"POST",
            data:{date1:date1, date2:date2},
            success:function(data){
                $('#display_result').html(data);
            }
        }); 
});
});

This is the post function of caldate.php

<?php
if(isset($_POST["date1"]) && isset($_POST["date2"])){
    $date1 = new DateTime($_POST["date1"]);
    $date2 = new DateTime($_POST["date2"]);
    $interval = $date1->diff($date2);
    echo "Difference ". $interval->y . " years, " . $interval->m. " months, " .$interval->d. " days";
}else{
    echo "Something went wrong";
}
?>

My result total shows 0yr, 0month and 0days please what is my mistake?

You set the `date1` and `date2` value before the datepicker inputs have their value, ie `change` event — catcon, Sep 15 '19 at 10:24
Also you send the ajax right after one datepicker change value, the other input might not have the value yet. Only send AJAX request when both datepickers have value. — catcon, Sep 15 '19 at 10:27
You should move your `var date1 = $('#datte1').val();` (and `date2`) code into the change event handler. — Nick, Sep 15 '19 at 13:02

score 0 · Answer 1 · answered Sep 15 '19 at 15:54

$(document).ready(function(){
    $('.datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true
    });


$('.datepicker').change(function(){
   var date1 = $('#datte1').val();
   var date2 = $('#datte2').val(); 
        $.ajax({
            url:"caldate.php",
            method:"POST",
            data:{date1:date1, date2:date2},
            success:function(data){
                $('#display_result').html(data);
            }
        }); 
});
});

HappyDog · Answer 2 · 2019-09-17T10:39:43.550

I think the framing of this questions is all wrong. There is absolutely no reason why you should be using AJAX for this.

JavaScript provides native date handling, and calculating a date difference is pretty simple and there are plenty of examples online (for example, this StackOverflow question).

There are even dedicated JavaScript date libraries, such as Moment.js which can simplify things even further, though this might be overkill for your situation.

Using an AJAX request for this will slow things down, use up unnecessray bandwidth and add an unnecessary depedency on a PHP script that otherwise wouldn't even have to exist.

As a general rule, the only reasons to use an AJAX request are (1) you need to send data to the server; (2) you need to access data that is located on the server; or (3) because there is some non-trivial functionality that you don't want to implement multiple times. In your case, none of these reasons apply, so AJAX should not be used..

It's would be hard to judge OP's design decision since OP only a few lines of code. OP probably wants to reuse the date later in the code but he/she omitted that part since it's not related to the problem, who knows. — catcon, Sep 17 '19 at 02:32
I don't think the subsequent use of the data is relevant - the entirety of `caldate.php` is included in the OP and there is no reason why this logic can't be implemented directly in JavaScript (and plenty of reasons why it should be). — HappyDog, Sep 17 '19 at 10:45

How to calculate the difference between two dates in php using jquery

2 Answers2