RadDatePicker - selecting a day is getting the previous day

[Telerik Admin]

As a developer, you need to consider the various time zones which your users are located on.

Some countries use the Daylight saving time (DST) /summer time/ which is the practice of advancing or adjusting backward clocks one hour near the start of a temperate mid-season (spring or autumn). Unfortunately, this adjusting is error-prone to software components and leads to unwanted behavior when using a RadDatePicker.

For instance, let’s assume that you have a web site for renting out various halls or principal rooms for meetings and social affairs, and you use a RadDatePicker to schedule the event date. I am a user from Brazil and with meu amor decided our wedding date to be on October the 20^th. However, every time I select this date, the picker re-selects it to be the 19^th. I contact you, the web administrator, and ask you “Does destiny want to prevent me from making a big mistake or is this a bug? What is happening, amigo?”

Here is the explanation:

Most probably, I have a Brazilian culture set on my computer:

As noticed in the image, the clocks will be advanced by 1 hour on that date. And since the RadDatePicker takes the zero hour by default, it is actually still on the previous day, because the 20^th starts at 01:00 o’clock. To work around this issue, you can use the client side events of the picker:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    <DateInput runat="server">
        <ClientEvents OnValueChanging="valueChanging" OnValueChanged="valueChanged" />
    </DateInput>
</telerik:RadDatePicker>

JavaScript:

var selectedValue = null;
var isDST = false;
function valueChanging(sender, args) {
    if (isDST) {
        args.set_newValue(selectedValue + " 01:00 AM");
        isDST = false;
    }
    selectedValue = args.get_newValue();
}
function valueChanged(sender, args) {
    if (selectedValue) {
        if (selectedValue.indexOf(args.get_newValue()) < 0) {
            isDST = true;
            sender.get_owner().set_selectedDate(); // used only to trigger selecting event
        }
    }
}

[Vasanth]

Hi,

I am having the same kind of problem. in java script i am assigning 1/1/1900 to variable if the datepicker left blank while sending the value to server. but at server end i am getting the value as 2/1/1900 (i.e. next day of 1/1/1900) and the datepicker works perfectly if any date has been selected.

Please let me know if any ideas on this.

Thanks in advance,

Thanks,

Vasanth

[Kostadin]

Hi Vasanth,

We are not aware of such issue and it would be best if you could provide your code declaration and the related code behind in order to investigate the issue locally. Could you please explain how exactly you are setting the default date if the date input is empty?

Regards,
Kostadin
Telerik

[Vasanth]

Thank you for your reply,

Below is the code i am using for assigning the default value

 

  var FromDate = $find("<%= datepickerfrom.ClientID %>").get_selectedDate() == null ? new Date(1900, 1, 1).format("MM/dd/yyyy") : $find("<%= datepickerfrom.ClientID %>").get_selectedDate().format("MM/dd/yyyy");

 

Thanks,

 

Vasanth

[Kostadin]

Hi Vasanth,

I noticed that you are setting 1 for a month which actually is February as the month object accept values from 0-11. So you have to create the new Date as follow:

new Date(1900, 0, 1).format("MM/dd/yyyy")

I would recommend you to review the following help article which elaborates more on JavaScript Date object.

Regards,
Kostadin
Telerik

[marcos]

Hello, I have the same problem you reported and have tried to use your solution but did not work ..
this solution works in that version?

Regards,
Marcos Alves

[Vasanth]

Hi Marcos,

 Yes, the solution worked for me. i have made changes to my javascript like below.

 var FromDate = $find("<%= datepickerfrom.ClientID %>").get_selectedDate() == null ? new Date(1900, 0, 1).format("MM/dd/yyyy") : $find("<%= datepickerfrom.ClientID %>").get_selectedDate().format("MM/dd/yyyy");

I am getting correct date if selected and 1/1/1900 if the datepicker is empty.

Thanks,

Vasanth

[Kostadin]

Hello Marcos,

Could you please elaborate a little bit more on your scenario? Sending us your code declaration and the related code behind will help us to pinpoint the reason for that behavior.

Regards,
Kostadin
Telerik

[marcos]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web;
using Telerik.Web.UI.Calendar;


namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }


    }
}

Hello,
Thanks for the feedback.
The problem occurs when DST is active. In my case the DST is for Brazil.
The change to daylight savings time occurred on October 20, then select in the calendar the Datepicker this day he goes to the 19th of October.
Efetuei an override on javascript to fix this problem (uncomment the line
<% - src="RadDateInputScript.js" language="javascript" <script type="text/javascript"> </ script> -%>)
adding one hour to date.
The problem now is when we make one click on the input field, it seems that the control keeps a hidden field with the date and time 00:00:00 reverts to the same behavior.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">


    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager runat="server" ID="scriptManager1">
        </telerik:RadScriptManager>
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Culture="Portuguese (Brazil)"
            Skin="Office2007" Width="100px" TabIndex="2" AutoPostBack="true">
            <DateInput DateFormat="dd/MM/yyyy" InvalidStyleDuration="100" LabelCssClass="radLabelCss_Office2007"
                Skin="Office2007" runat="server">

            </DateInput>

            <Calendar runat="server">

            </Calendar>
        </telerik:RadDatePicker>
    </div>
    </form>
</body>
</html>

The product version is 2008.3.1125.35

thank you

[Kostadin]

Hi Marcos,

The behavior which you described is expected and for this case you have to use the workaround from the first post. As far as I can see you didn't try it, so could you please check it out and let me know about the result after you test it?

Regards,
Kostadin
Telerik

[marcos]

thanks for the reply.
I had tried before posting the problem here in the forum .. but without success ...
the result is the same .. select the day October 20, 2013 and the calendar selects the 19th.

The only solution I found was to override the JS adding your selected day an hour .. however now found another problem ..
When I put a MaxDate type today .. and try to select that day he invalidate ..
because as I added one hour the day selected is greater than the MaxDate ..
The MaxDate the codebehind does not allow to set the hours?

[Kostadin]

Hi Marcos,

In this case you could try the following approach :

<script type="text/javascript">
    function f(sender, args)
    {
        sender.get_maxDate().setHours(1);
    }
</script>
<telerik:RadDatePicker runat="server" ID="RadDatePicker1" MaxDate="2013.11.05" DateInput-ClientEvents-OnLoad="f">
 </telerik:RadDatePicker>

Regards,
Kostadin
Telerik