Date rangeselection is offsetted by one day

[claudegelParticipant]

In the calendar if I pick a range from 2015-01-15 to 2015-01-17 these values are offsetted by one day in the calendar input field. The value shown there are 2015-01-14 – 2015-01-16. The value passed to the script are ok. It’s just the field value that is offsetted.
How can I correct that

I’m loading the default value from php values like this:
$(“#date”).jqxDateTimeInput(‘setRange’, <?php echo json_encode($date1);?>, <?php echo json_encode($date2);?>);
I’m using the same when the page is reloaded with the selected value.
$date1 = 2015-01-15
$date2 = 2015-01-17
but the range is set to 2015-01-14 – 2015-01-16 in the calendar

Page code source is like this:

$(document).ready(function () {           
                // Create a jqxDateTimeInput
                $("#date").jqxDateTimeInput({width: "250px", height: "25px", theme: "Arctic", formatString: "yyyy-MM-dd", selectionMode: "range", showFooter: true, todayString: "Aujourd'hui"});
                $("#date").jqxDateTimeInput('setRange', "2015-01-15", "2015-01-17");
                $("#date").on('change', function (event) {
                    var selection = $("#date1").jqxDateTimeInput('getRange');
                        document.getElementById('debut').value = selection.from.toLocaleDateString();
                    	document.getElementById('fin').value = selection.to.toLocaleDateString();
                });

            });

so the passed date is OK but jqxDateTimeInput is changing it by one day when displaying it
Is it a normal behavior or a bug ?

[claudegelParticipant]

sorry there was a typo error in my previous post

page code source is like this:

$(document).ready(function () {           
                // Create a jqxDateTimeInput
                $("#date").jqxDateTimeInput({width: "250px", height: "25px", theme: "Arctic", formatString: "yyyy-MM-dd", selectionMode: "range", showFooter: true, todayString: "Aujourd'hui"});
                $("#date").jqxDateTimeInput('setRange', "2015-01-15", "2015-01-17");
                $("#date").on('change', function (event) {
                    var selection = $("#date").jqxDateTimeInput('getRange');
                        document.getElementById('debut').value = selection.from.toLocaleDateString();
                    	document.getElementById('fin').value = selection.to.toLocaleDateString();
                });

            });

date range passed to the calendar is ok but it is offsetted by on day in the calendar field

[DimitarParticipant]

Hello claudegel,

We tested your code but everything works as expected: http://jsfiddle.net/Dimitar_jQWidgets/yyo73m7f/. Please make sure you are using the latest version of jQWidgets (3.6.0).

Best Regards,
Dimitar

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

[claudegelParticipant]

sorry but I didn’t explain properly. with the above code I can set a range of two date like 2015-01-15 to 2015-01-17
when I click the second date, 17, the calendar close and I have these value in the input field, 2015-01-15 to 2015-01-17
but then I send them as POST data to the same page (reload) and populate the datetimefield with the data received from POST
the start and end date in the datetimefield are offsetted by -1. but the date received are OK
The form send the 2015-01-15 and 2015-01-17 date and the date received are the same but when I use setRange to reload the datetime field with the received data, the field is offsetted by -1

$date = date('Y-m-d');

  	if (isset($_REQUEST['debut'])){
		$date1 = $_REQUEST['debut'];
	}else{
		$date1 = $date;
	}
	if (isset($_REQUEST['fin'])){
	  	$date2 = $_REQUEST['fin'];
	}else{
		$date2 = $date;
	}

  	echo "<form method=post id='date_range' action='$_SERVER[PHP_SELF]'>";
  	echo "<input  id='debut' type='hidden' name='debut' value='' />";
  	echo "<input id='fin' type='hidden' name='fin' value='' />";
	echo "<table width=755 border=0  bgcolor=#cce7bc cellspacing=0 cellpading=3>";

	echo "<tr><td colspan=2 align=center>Inscrire les dates de début et fin de la période à calculer</td></tr>";
	echo "<tr>";
	echo "<td align=center colspan=2>";
	?>
	<div id='content'>
	<script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxDateTimeInput
                $("#date1").jqxDateTimeInput({width: "250px", height: "25px", theme: "classic", formatString: "yyyy-MM-dd", selectionMode: "range", showFooter: true, todayString: "Aujourd'hui", enableBrowserBoundsDetection: true});
                $("#date1").jqxDateTimeInput('setRange', <?php echo json_encode($date1);?>, <?php echo json_encode($date2);?>);
                $("#date1").on('change', function (event) {
                    var selection = $("#date1").jqxDateTimeInput('getRange');
                        document.getElementById('debut').value = selection.from.toLocaleDateString();
                    	document.getElementById('fin').value = selection.to.toLocaleDateString();
                });

            });
        </script>
	<?php
	echo "<div id='date1'></div><i> Pour sélection rapide du mois et de l'année clicquer sur le titre du calendrier</i>";
	echo "</div>";
	echo "</td></tr>";

	echo "<tr><td align=center colspan=2>";
	echo "<input type=submit name='calculer' value='Calculer' />";
	echo "</td></tr>";
	echo "</table>";

$date1 and $date2 are the correct date received via $_REQUEST

but using

$("#date1").jqxDateTimeInput('setRange', <?php echo json_encode($date1);?>, <?php echo json_encode($date2);?>);

to fill the datetime field give a start and end date offsetted by -1
I can solve it by adding 1 day to the $date1 and $date2 but it’s really strange

I’m using the latest jQWidgets (3.6.0).

Thanks

[DimitarParticipant]

Hi claudegel,

What are the values of <?php echo json_encode($date1);?> and <?php echo json_encode($date2);?> when called in the JavaScript code? Are you sure they are correct and the issue is not in their encoding?

Best Regards,
Dimitar

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

[claudegelParticipant]

OK I’ve changed my code like this to make a proof

 $(document).ready(function () {
                // Create a jqxDateTimeInput
                //get the date 1 and 2 value from php
        -->        var date1 = <?php echo json_encode($date1);?>;
        -->        var date2 = <?php echo json_encode($date2);?>;
                $("#date1").jqxDateTimeInput({width: "250px", height: "25px", theme: "classic", formatString: "yyyy-MM-dd", selectionMode: "range", showFooter: true, todayString: "Aujourd'hui", enableBrowserBoundsDetection: true});
                $("#date1").jqxDateTimeInput('setRange', date1, date2);    <--
                $("#date1").on('change', function (event) {
                    var selection = $("#date1").jqxDateTimeInput('getRange');
                        document.getElementById('debut').value = selection.from.toLocaleDateString();
                    	document.getElementById('fin').value = selection.to.toLocaleDateString();
                });
				alert(date1 + "--" + date2);    <--
            });

the value of $date1 and $date2 are : 2015-03-15 and 2015-03-17
the value for date1 and date2 in the alert() are 2015-03-15 — 2015-03-17
But the value shown in the datetimefield are 2015-03-14 and 2015-03-16

I can send a screen capture if needed

[DimitarParticipant]

Hi claudegel,

As you can see from our fiddle, if you pass string values of the specified format to setRange as parameters, the datetimeinput is updated accordingly. Maybe this issue has something to do with date localization or browser specificity. Please share more details about any of these.

Best Regards,
Dimitar

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

[claudegelParticipant]

Hi Dimitar, in your fiddle you have the same problem. You set

$(“#date”).jqxDateTimeInput(‘setRange’, “2015-01-15”, “2015-01-17″);

but on the right side the datetimeinput show 2015-01-14 – 2015-01-16

for localization I have:

<script type=”text/javascript” src=”../java/jqwidgets-3.6/jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”../java/jqwidgets-3.6/jqwidgets/globalization/globalize.culture.fr-FR.js”></script>

On the server the locale is like this

LANG=fr_CA.UTF-8
LC_CTYPE=”fr_CA.UTF-8″
LC_NUMERIC=”fr_CA.UTF-8″
LC_TIME=”fr_CA.UTF-8″
LC_COLLATE=”fr_CA.UTF-8″
LC_MONETARY=”fr_CA.UTF-8″
LC_MESSAGES=”fr_CA.UTF-8″
LC_PAPER=”fr_CA.UTF-8″
LC_NAME=”fr_CA.UTF-8″
LC_ADDRESS=”fr_CA.UTF-8″
LC_TELEPHONE=”fr_CA.UTF-8″
LC_MEASUREMENT=”fr_CA.UTF-8″
LC_IDENTIFICATION=”fr_CA.UTF-8″
LC_ALL=

I’ve tryed to switch to
<script type=”text/javascript” src=”../java/jqwidgets-3.6/jqwidgets/globalization/globalize.culture.en-CA.js”></script>
but it didn’t change anything. I’m still one day back in the datetimefield

in my server php.ini I have date.timezone = “America/Montreal”
I’ve accessed the page from many browser on the network and all of them are a day late

[DimitarParticipant]

Hello claudegel,

We tested our fiddle with Chrome, Internet Explorer 9 and Firefox but in all these browsers the datetimeinput displays 2015-01-15 – 2015-01-17. It is possible this issue is related to your native time zone. Please refer to the topic Set TimeZone in to jqwidgets datetimeinput where this matter is discussed.

Best Regards,
Dimitar

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

[CaptainBliParticipant]

The issue may be discussed but with only a hint of a solution given in your “Set TimeZone in to jqwidgets datetimeinput” thread. Yes the browser handles time differently, yet there should be some way to provide the date back to the widget without us having to change the value so that it shows up correctly like a property in the widget that says local time or UTC. That would make this control a better control.

[HristoParticipant]

Hello CaptainBli,

Could you provide us with more details?
Also, I would like to suggest you something.
You could get the difference between the two time zones with custom calculation and set there wanted the date.
The “getTimezoneOffset” method will be helpful here.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts