jQWidgets Forums

Tagged: addSpecialDate, Angular calendar, calendar, date, day, hour, jQuery Calendar, jqxCalendar, special date, special date from mysql, special date from php, special date json, special date one day earlier, time zone

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Special date from PHP, MySQL Date Posts

June 19, 2015 at 8:20 pm Special date from PHP, MySQL Date #72774

jcaballero

Participant

Hi, I use this method to mark the special dates with Ajax, but the special dates shows me one day earlier.

My HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
    
      $("#jqxWidget").jqxCalendar({ enableTooltips: true, width: 220, height: 220});

      $.ajax({
         dataType: 'json', 
         async: false, 
         cache: false, 
         url: 'dates.php',
         success: function (json){
           for (var i = 0; i < json.length; i++) {
              var dates = json[i].dates;
              var sliced = dates.slice(0, 10);
              var d = new Date(sliced);
              $("#jqxWidget").jqxCalendar('addSpecialDate', d, '', 'Special Date' + i);
           }
        },
        error: function (xhr) {
           $("#jqxWidget").html("Error "+ xhr.status + " " + xhr.statusText);
        }
     });
   
  });
</script>

</head>
<body>
    <div id='jqxWidget'></div>
</body>
</html>

My JSON Data from PHP:

[{"dates":"2015-06-01 00:00:00"},{"dates":"2015-06-08 00:00:00"}]

Special dates are shown in the widget as follows: 2015/05/31 and 2015/06/07. Not like my JSON sample.

Any idea, what I’m doing wrong?

Thank you very much for your help.

June 22, 2015 at 6:54 am Special date from PHP, MySQL Date #72808

Dimitar

Participant

Hi jcaballero,

This issue occurs because of time zone hour differences. If you change your for loop like this:

for (var i = 0; i < json.length; i++) {
    var dates = json[i].dates;
    var year = parseInt(dates.slice(0, 4));
    var month = parseInt(dates.slice(5, 7)) - 1;
    var day = parseInt(dates.slice(8, 10));
    var d = new Date(year, month, day, 0, 0, 0);
    $("#jqxWidget").jqxCalendar('addSpecialDate', d, '', 'Special Date' + i);
}

the special dates should be shown correctly.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.