RadDatePicker get_selectedDate() is always null

11 posts, 0 answers
  1. shunman
    shunman avatar
    77 posts
    Member since:
    Jul 2011

    Posted 21 Jan 2013 Link to this post

    Hello telerik team.

    I have a problem about RadDatePicker control.

    When i input the date RadDatePicker by keyboard and press enter
    get_selectedDate() is always null.

    however when i input the date RadDatePicker by keyboard and moving focus to other control
    and focus back to RadDatePicker and press enter,
    get_selectedDate() has value.

    due to this problem I'm confusing now.
    Is your intended logic?
  2. shunman
    shunman avatar
    77 posts
    Member since:
    Jul 2011

    Posted 21 Jan 2013 Link to this post

    Hello telerik team.

    I have a problem about RadDatePicker control.

    When i input the date RadDatePicker by keyboard and press enter
    get_selectedDate() is always null.

    however when i input the date RadDatePicker by keyboard and moving focus to other control
    and focus back to RadDatePicker and press enter,
    get_selectedDate() has value.

    due to this problem I'm confusing now.
    Is your intended logic?

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!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>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <%--Needed for JavaScript IntelliSense in VS2010--%>
                    <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>
            <script type="text/javascript">
                //Put your JavaScript code here.
     
                function DateInput_onkeydown(args)
                {
                    if (args.keyCode == 13) {
                        var datePicker = $find("RadDatePickerDateFrom");
     
                        datep
                    }
                }
     
            </script>
            <telerik:RadAjaxManager IDs="RadAjaxManager1" runat="server">
            </telerik:RadAjaxManager>
            <div>
                <telerik:RadDatsePicker ID="RadDatePickerDateFrom" runat="server" EnableEmbeddedSkins="true"
                    TabIndex="16" Calendar-FastNavigationStep="12" Calendar-ShowRowHeaders="false" Width="100%">
                    <DateInput AutoCompleteType="Disabled" ID="DateInputDateFrom" runat="server" DateFormat="M/d/yyyy" SelectionOnFocus="SelectAll" />
                </telerik:RadDatsePicker>
            </div>
     
        </form>
    </body>
    </html>

    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadDatePickerDateFrom.DateInput.Attributes.Add("onkeydown", "DateInput_onkeydown(event);");
        }
    }
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 24 Jan 2013 Link to this post

    Hello Shunman,

    I am afraid we are not able to replicate the reported behavior. Can you share in which event are you trying to run this method? Please provide us the exact steps to reproduce the issue so we can suggest a proper solution.

    Greetings,
    Eyup
    the Telerik team
    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.
  5. shunman
    shunman avatar
    77 posts
    Member since:
    Jul 2011

    Posted 24 Jan 2013 Link to this post

    Hello Eyup nice to meet you.

    I attached simple code that I told you about problem.

    if you want to test problem.

    1. input the date by keyboard  ex) 1/1/2012
    2. press enter immediately. (do not move focus to anywhere)
    3. you can see .get_selectedDate() has null value.

    4. refresh the page for clarifying test
    5. input the date by keyboard ex)1/1/2012
    6. remove focus from dateinput textbox
    7. click the dateinput textbox
    8. press enter by keyboard
    9. you can see get_dateInput().get_textBoxValue() and .get_selectedDate()  have value.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <!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>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <%--Needed for JavaScript IntelliSense in VS2010--%>
                    <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>
            <script type="text/javascript">
                //Put your JavaScript code here.
     
                function DateInput_onkeydown(args) {
                    if (args.keyCode == 13) {
                        var datePicker = $find("RadDatePickerDateFrom");
     
                        $("#Result").html("get_dateInput().get_textBoxValue() is: " + datePicker.get_dateInput().get_textBoxValue() + "<br />");
                        $("#Result").html($("#Result").html() + ".get_selectedDate() is: " + datePicker.get_selectedDate());
                    }
                }
            </script>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            </telerik:RadAjaxManager>
            <div>
                <telerik:RadDatePicker ID="RadDatePickerDateFrom" runat="server" EnableEmbeddedSkins="true"
                    TabIndex="16" Calendar-FastNavigationStep="12" Calendar-ShowRowHeaders="false" Width="350px">
                    <DateInput AutoCompleteType="Disabled" ID="DateInputDateFrom" runat="server" DateFormat="M/d/yyyy" SelectionOnFocus="SelectAll" />
                </telerik:RadDatePicker>
     
            </div>
            <asp:Label runat="server" ID="Result"></asp:Label>
        </form>
    </body>
    </html>

    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadDatePickerDateFrom.DateInput.Attributes.Add("onkeydown", "DateInput_onkeydown(event);");
        }
    }
  6. Hee
    Hee avatar
    25 posts
    Member since:
    Sep 2011

    Posted 24 Jan 2013 Link to this post

    Hello, telerik.
    There is a bug.
    I want to upload sample source but I can't upload article.
    When I upload it, it just disappeared.
  7. shunman
    shunman avatar
    77 posts
    Member since:
    Jul 2011

    Posted 24 Jan 2013 Link to this post

    Hello Eyup nice to meet you.

    I tried posting this article with sample source code.  but It doesn't work.
    I had shared file download link, you can download sample source code here

    if you want to test problem, please download zipfile and follow this step.

    http://www.mediafire.com/?zmsy2n2r06p28v8

    1. input the date by keyboard  ex) 1/1/2012
    2. press enter immediately. (do not move focus to anywhere)
    3. you can see .get_selectedDate() has null value.

    4. refresh the page for clarifying test
    5. input the date by keyboard ex)1/1/2012
    6. remove focus from dateinput textbox
    7. click the dateinput textbox
    8. press enter by keyboard
    9. you can see get_dateInput().get_textBoxValue() and .get_selectedDate() have same value.

    I don't know why this test shows me different results.
  8. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 28 Jan 2013 Link to this post

    Hello Shunman,

    This behavior is absolutely normal and expected. It is due to the fact that at the time when the key is pressed and the event is fired, the value has not become the entered date yet. You can use the OnDateSelected of the picker and calendar, or OnValueChanging and OnValueChanged client side events of the DateInput to get the new value and achieve your preferred functionality.

    I hope this will prove helpful.

    Greetings,
    Eyup
    the Telerik team
    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.
  9. Dmitriy
    Dmitriy avatar
    2 posts
    Member since:
    Aug 2012

    Posted 09 Jun 2015 in reply to Eyup Link to this post

    Hello Eyup,

    Your last post is understandable, but what if I need to add the ENTER key action to the DatePicker control? I need to use OnKeyPress client event as well to capture the ENTER key (code 13) and not to loose just entered date value at the same time.

    Thanks,

    Dmitriy

  10. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 12 Jun 2015 Link to this post

    Hi Dmitriy,

    You can use the following approach to achieve this requirement:
    <script type="text/javascript">
        function keyPress(sender, args) {
            if (args.get_keyCode() == 13) {
                setTimeout(function () {
                    var date = sender.get_selectedDate();
                    alert(date);
                }, 2);
            }
        }
    </script>
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
        <DateInput runat="server">
            <ClientEvents OnKeyPress="keyPress" />
        </DateInput>
    </telerik:RadDatePicker>

    Hope this helps. Please give it a try and let me know if it works for you.

    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. Dmitriy
    Dmitriy avatar
    2 posts
    Member since:
    Aug 2012

    Posted 16 Jun 2015 in reply to Eyup Link to this post

    Hi Eyup,

     

    Thanks for the reply. In my particular case I am calling my page’s button (rbCreateDataReport)  click event.

     

    function KeyDown_DatePicker(sender, args) {

                var c = args.get_keyCode();

                if (c == 13) {

                    args.set_cancel(true);

                    $get("<%= rbCreateDataReport.ClientID %>").click();

                }

     

            }

     

     

    This button’s client click event sequentially calling  another client’s validation function AlertSearchCriteriaDialog(button, args)

    , which is checking for some required fields. Some of them are DatePicker fields. And those fields by some reason showing “undefined” values. But the date values actually there? This is the  function code on the client:

     

    function AlertSearchCriteriaDialog(button, args) {

     

                var beginDate = document.getElementById('<%=rdpBeginDate.ClientID %>');

                var endDate = document.getElementById('<%=rdpEndDate.ClientID %>');

                var agency = document.getElementById('<%=rcbAgency.ClientID %>');

                var collectedby = document.getElementById('<%=rcbCollectedBy.ClientID %>');

                var beginDateValue = beginDate.value;

                var endDateValue = endDate.value;

               

                var agencyValue = agency.value;

                var collectedbyValue = collectedby.value;

     

                if ((beginDateValue == '') && (endDateValue == '') && (agencyValue == 'Not Selected') && (collectedbyValue == 'Not Selected')) {

                    window.alert('The search criteria selection has to be done before you may proceed!');

                    SetFocusBeginDate();

                    button.set_autoPostBack(false);

                    return false;

                }

                else if ((beginDateValue == '') && (endDateValue == '')) {

                    window.alert('The date range has to be selected before you may proceed!');

                    SetFocusBeginDate();

                    button.set_autoPostBack(false);

                    return false;

                }

                else if ((beginDateValue != '') && (endDateValue == '')) {

                    window.alert('The date range has to be selected before you may proceed!');

                    SetFocusEndDate();

                    button.set_autoPostBack(false);

                    return false;

                }

                else if ((beginDateValue == '') && (endDateValue != '')) {

                    window.alert('The date range has to be selected before you may proceed!');

                    SetFocusBeginDate();

                    button.set_autoPostBack(false);

                    return false;

                }

                else if (agencyValue == 'Not Selected') {

                    window.alert('The agency has to be selected before you may proceed!');

                    SetFocusAgency();

                    button.set_autoPostBack(false);

                    return false;

                }

                else if (collectedbyValue == 'Not Selected') {

                    window.alert('Collector\'s name has to be selected before you may proceed!');

                    SetFocusCollector();

                    button.set_autoPostBack(false);

                    return false;

                }

                else {

                    button.set_autoPostBack(true);

                    return true;

                }

     

            }

     

    Thanks again,

    Dmitriy

  12. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 19 Jun 2015 Link to this post

    Hello Dmitriy,

    You should use the get_selectedDate() method in order to access the picker's date:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/calendar/client-side-programming/raddatepicker-object

    For further checking, you can access its get_dateInput() and use the get_value() method:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/input/client-side-programming/raddateinput-client-object

    If the date is not present, you can try to wrap the logic within the KeyDown_DatePicker function within a setTimeOut method:
    http://www.w3schools.com/jsref/met_win_settimeout.asp

    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017