This is a migrated thread and some comments may be shown as answers.
RadDatePicker - selecting a day is getting the previous day
11 Answers 180 Views
This is a migrated thread and some comments may be shown as answers.
Telerik Admin
Top achievements
Rank 1
Telerik Admin asked on 11 Apr 2013, 03:13 PM
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 20th. However, every time I select this date, the picker re-selects it to be the 19th. 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 20th 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
        }
    }
}

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

11 Answers, 1 is accepted

Sort by
0
Vasanth
Top achievements
Rank 1
answered on 26 Aug 2013, 11:27 AM
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
0
Kostadin
Telerik team
answered on 29 Aug 2013, 08:34 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Vasanth
Top achievements
Rank 1
answered on 29 Aug 2013, 09:13 AM

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

0
Kostadin
Telerik team
answered on 03 Sep 2013, 06:57 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
marcos
Top achievements
Rank 1
answered on 23 Oct 2013, 03:25 PM
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
0
Vasanth
Top achievements
Rank 1
answered on 24 Oct 2013, 05:42 AM
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
0
Kostadin
Telerik team
answered on 28 Oct 2013, 09:21 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
marcos
Top achievements
Rank 1
answered on 28 Oct 2013, 10:42 AM
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">
<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
0
Kostadin
Telerik team
answered on 30 Oct 2013, 12:40 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
marcos
Top achievements
Rank 1
answered on 30 Oct 2013, 01:17 PM
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?
0
Kostadin
Telerik team
answered on 04 Nov 2013, 08:50 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Asked by
Telerik Admin
Top achievements
Rank 1
Answers by
Vasanth
Top achievements
Rank 1
Kostadin
Telerik team
marcos
Top achievements
Rank 1
Share this question
or