AJAX Date not correctly displaying date

Question

I am creating a system to preview events on my system before submitting and actually saving them to the database.

I am using an AJAX call to collect the variables, process them and then concatenating them to a variable that is returned and entered into the Javascript and displayed in a div. I am using Bootstrap Datepicker and Bootstrap Timepicker to allow the user to select the date and time and then am appending these together into one variable. This is then concatenated into HTML code string that is returned to be displayed. The issue is that the date displayed has absolutely no relation to what I entered. Suggested fixes would be appreciated.

Output 01:33:37 - 01/01/70

Datepicker / Timepicker Config

$('#dteEStart').datepicker({
  autoclose: true,
  format: 'dd/mm/yyyy',
  startView: 'year'
});
$('#dteEEnd').datepicker({
  autoclose: true,
  format: 'dd/mm/yyyy',
  startView: 'year'
});
$('#dteESUDeadline').datepicker({
  autoclose: true,
  format: 'dd/mm/yyyy',
  startView: 'year'
});
$(".timepicker").timepicker({
  showInputs: false,
  minuteStep: 1
});

Javascript / AJAX call

function UpdateEventPreview(){
    $('#divError').css('display', 'none');

    var StrETitle = $("txtETitle").val();
    var DteEStart = $("#dteEStart").val();
    var TimeEStart = $("#timeEStart").val();
    var DteEEnd = $("#dteEEnd").val();
    var TimeEEnd = $("#timeEEnd").val();
    var DteESUDeadline = $("#dteESUDeadline").val();
    var IntEMaleS = $("#numEMaleS").val();
    var IntEFemaleS = $("#numEFemaleS").val();
    var IntEPTag = $("#sltEPTag").val();

    var LstTags = [];
    for (var i = 0; i < $('#sltETags').select2('data').length; i++) {
        LstTags.push(Number($('#sltETags').select2('data')[i].id));
    }
    LstTags = JSON.stringify(LstTags);

    var StrEDesc = $('#txtEDesc').val();
    var StrEReq = $('#txtEReq').val();

    $.post('https://thomas-smyth.co.uk/functions/php/fncupdateeventpreview.php', {StrETitle: StrETitle, DteEStart: DteEStart, TimeEStart: TimeEStart, DteEEnd: DteEEnd, TimeEEnd, DteESUDeadline: DteESUDeadline, IntEMaleS: IntEMaleS, IntEFemaleS: IntEFemaleS, IntEPTag: IntEPTag, LstTags: LstTags, StrEDesc: StrEDesc, StrEReq: StrEReq}, function(data){
        if(data == 10){
            window.location.href = "https://thomas-smyth.co.uk/login";
        }
        else if (data == 11){
            $('#divError').css('display', '');
            $("#pError").text('HTML Injection Detected!');
        }
        else{
            $("#divEventPreview").html(data);
        }
    });
}

PHP

<?php
session_start();

require "tagHandler.php";
$TagManager = new tagHandler();

//Retrieves variables from Javascript.
$StrETitle = $_POST["StrETitle"];
$DteEStart = $_POST["DteEStart"];
$TimeEStart = $_POST["TimeEStart"];
$DteEEnd = $_POST["DteEEnd"];
$TimeEEnd = $_POST["TimeEEnd"];
$IntEMaleS = $_POST["IntEMaleS"];
$IntEFemaleS = $_POST["IntEFemaleS"];
$IntEPTag = $_POST["IntEPTag"];
$StrEDesc = $_POST["StrEDesc"];
$StrEReq = $_POST["StrEReq"];

$LstTags = array();
$LstTags = json_decode($_POST["LstTags"]);

if(!isset($_SESSION["LoginDetails"]) || $_SESSION["LoginDetails"][1] != "Staff" && $_SESSION["LoginDetails"][1] != "Developer"){
    $data = 10;
}
else if($StrETitle != strip_tags($StrETitle)){
    $data = 11;
}
else {
    $data = '<div class="box box-widget widget-user">
                        <div class="widget-user-header" style="background-color: #'.$TagManager->getTag($IntEPTag)[2].';">
                            <h3 class="widget-user-username">'.$StrETitle.'</h3>
                            <h5 class="widget-user-desc">'.$TagManager->getTag($IntEPTag)[1].'</h5>
                        </div>
                        <div class="widget-user-image">
                            <img class="img-circle" src="../dist/img/user2-160x160.jpg" alt="User Avatar">
                        </div>
                        <div class="box-footer">
                            <div class="row">
                                <div class="col-sm-4 border-right">
                                    <div class="description-block">
                                        <h5 class="description-header">Start Date</h5>
                                        <span class="description-text">'.date('H:i:s d/m/y', strtotime($DteEStart.' '.$TimeEStart)).'</span>
                                    </div>
                                </div>
                                <div class="col-sm-4 border-right">
                                    <div class="description-block">
                                        <h5 class="description-header">Sign Up Deadline</h5>
                                        <span class="description-text">'.date('Y-m-d', strtotime($_POST["DteESUDeadline"])).'</span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="description-block">
                                        <h5 class="description-header">End Date</h5>
                                        <span class="description-text">'.date('H:i:s d/m/y', strtotime($DteEEnd.' '.$TimeEEnd)).'</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="box-header with-border" style="text-align: center;">
                                  <h3 class="box-title"><i class="fa fa-info-circle"></i> Description</h3>
                                </div>
                                <div class="box-body" style="text-align: center;">'.$StrEDesc.'</div>
                            </div>
                            <div class="col-md-6">
                                <div class="box-header with-border" style="text-align: center;">
                                  <h3 class="box-title"><i class="fa fa-exclamation-triangle"></i> Requirements</h3>
                                </div>
                                <div class="box-body" style="text-align: center;">'.$StrEReq.'</div>
                            </div>
                        </div>
                    </div>';
}
echo $data;
?>

Update With some more testing I believe I have found what is causing the bug. It seems that the date is confusing the month and date between each other. So when the day is larger than 12 it produces the random date as it thinks the date is invalid, but when it's between 1-12 it works.

No matter what I input I enter is doesn't work. I have added a screenshot to my question (Not sure if it loaded properly, my school network blocks the image). — Thomas Smyth, Mar 08 '17 at 11:08

score 1 · Accepted Answer · edited May 23 '17 at 12:17

You can get reference from the older question Strtotime() doesn't work with dd/mm/YYYY format the actual problem lies here in the php code

<span class="description-text">'.date('H:i:s d/m/y', strtotime($DteEStart.' '.$TimeEStart)).'</span>

FIX In php

$DteEStart = $_POST["DteEStart"];
$DteEStart = str_replace('/', '-', $DteEStart);
echo date('H:i:s d/m/y', strtotime($DteEStart.' '.$TimeEStart));

Or JS

$('#dteEStart').datepicker({
  autoclose: true,
  format: 'dd-mm-yyyy',/*change date formate*/
  startView: 'year'
});

You can see by running code

<?php 
$DteEStart="22/02/2017";
$DteEStart = str_replace('/', '-', $DteEStart); /*see result with commenting and without commenting this line*/
$TimeEStart="10:45 AM";
$r=date('H:i:s d/m/y', strtotime($DteEStart.' '.$TimeEStart));
echo $r;
?>

AJAX Date not correctly displaying date

1 Answers1