RadDatePicker - selecting a day is getting the previous day

12 posts, 1 answers
  1. Answer
    Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 11 Apr 2013 Link to this post

    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.
  2. Vasanth
    Vasanth avatar
    3 posts
    Member since:
    Jun 2013

    Posted 26 Aug 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 29 Aug 2013 Link to this post

    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.
  5. Vasanth
    Vasanth avatar
    3 posts
    Member since:
    Jun 2013

    Posted 29 Aug 2013 Link to this post

    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

  6. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 03 Sep 2013 Link to this post

    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.
  7. marcos alves
    marcos alves avatar
    3 posts
    Member since:
    Mar 2010

    Posted 23 Oct 2013 Link to this post

    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
  8. Vasanth
    Vasanth avatar
    3 posts
    Member since:
    Jun 2013

    Posted 24 Oct 2013 Link to this post

    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
  9. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 28 Oct 2013 Link to this post

    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.
  10. marcos alves
    marcos alves avatar
    3 posts
    Member since:
    Mar 2010

    Posted 28 Oct 2013 Link to this post

    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
  11. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 30 Oct 2013 Link to this post

    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.
  12. marcos alves
    marcos alves avatar
    3 posts
    Member since:
    Mar 2010

    Posted 30 Oct 2013 Link to this post

    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?
  13. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 04 Nov 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017