This is a migrated thread and some comments may be shown as answers.

RadDatePicker get_selectedDate() is always null

10 Answers 703 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

10 Answers, 1 is accepted

answered on 22 Jan 2013, 03:58 AM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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);");

}

answered on 24 Jan 2013, 07:56 AM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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);");

}

answered on 24 Jan 2013, 08:19 AM

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.

answered on 28 Jan 2013, 03:45 PM

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.

answered on 12 Jun 2015, 03:14 PM

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

answered on 16 Jun 2015, 07:50 PM

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();