RadDatePicker format switiching on button click

[William Wittsche]

The date entered into the RadDatePicker in format of 04/14/2012 and when you click on the go button the displayed date changes to 2012-04-14- it then goes back to 04/14/2012.  This causes a flicker issue in the field on the go click.  Is there a setting to stop this from happening?

<CommandItemTemplate>
    <table cellspacing="5px" cellpadding="0" style="width: 100%;height: 25px;margin: 0px;padding: 0px;border-bottom: 1px solid #cccccc;background-color: #ffffff;">
    <tr><td style="width:250px;text-align: left; padding-left: 1px;" nowrap="nowrap">
            <table cellspacing="0" cellpadding="0" border="0" style="width: 250px;height: 25px;margin: 0px;padding: 0px;border-bottom: 1px solid #cccccc;background-color: #ffffff;">
                <tr>
                    <td style="width:100px;text-align: right; padding-left: 1px;" nowrap>
                        <telerik:RadDatePicker ID="RadDatePicker1" Runat="server" Skin="Outlook" AutoPostBack="False" Width="100">
                            <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" Skin="Outlook"></Calendar>
                            <DateInput DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" AutoPostBack="False"></DateInput>
                            <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
                        </telerik:RadDatePicker>
                    </td><td style="width:20px;text-align:left;vertical-align:middle;padding-left:1px;" nowrap="nowrap">
                        <asp:Image ID="Image1" runat="server" Height="1" Width="1" ImageUrl="images/shim.gif" />
                        <asp:Label ID="Label1" runat="server" Text="to" CssClass="LabelStyle"></asp:Label>
                        <asp:Image ID="Image4" runat="server" Height="1" Width="5" ImageUrl="images/shim.gif" />
                    </td><td style="width:100px;text-align:left;vertical-align:middle;padding-left:1px;" nowrap="nowrap">
                        <telerik:RadDatePicker ID="RadDatePicker2" Runat="server" Skin="Outlook" AutoPostBack="False" Width="100">
                              <Calendar ID="Calendar1" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" Skin="Outlook" runat="Server"></Calendar>
                              <DateInput ID="DateInput1" DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" AutoPostBack="False"  runat="Server"></DateInput>
                              <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
                        </telerik:RadDatePicker>
                   </td><td style="width:30px;text-align:left;vertical-align:middle;padding-left:1px;" nowrap="nowrap">
                        <asp:Button ID="cmdSearch" runat="server" Text="Go" CssClass="ButtonStyle" CommandName="Refresh" />
                   </td>
                </tr>
            </table>
        </td><td style="width:50%;text-align: center">
            <asp:Label ID="LabelDate" runat="server" Text="" CssClass="LabelStyle"></asp:Label>
        </td><td style="width:20%;text-align: right">
            <asp:Image ID="Image2" runat="server" Height="1" Width="20" ImageUrl="images/shim.gif" />
        </td></tr>
    </table>
</CommandItemTemplate>

[Eyup]

Hi William,

Thank you for contacting us.

I have tried the provided code and everything is working as expected on my side. I have attached the project for your confirmation. Can you please give it a look and tell me if the RadDatePickers work properly?

It would be best if you can send us a runnable version of your application which demonstrates the problematic behavior. Thus we will be able to further research on the problem and do our best to provide a proper solution.

Kind regards,
Eyup
the Telerik team

[William Wittsche]

Eyup,

the forum only allows attachments of 2mb and only images like GIF and JPEG So I'll see about opening a support ticket and uploading a small program and video demonstarting the problem.

[Karthik]

Hi Telerik,

I am facing an issue with RadDateupPicker. I am enabling an Rad calender on any entry in Textbox. Initially RadDatePicker will be in Disabled mode. I have an button control associcated in the page. I can able to enable the RadDatepicker control upon entrering some data in Textbox. After performing button click in the page and remove the text from the Text box, I am not able to open the Calender Popup.

Here is the Code:
ASPX:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="RadDatePickerEnable._Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        .billReviewSearchCriteriaContDiv
        {
            position: relative;
            width: 778px;
            height: 30px;
        }
    </style>
    <script type="text/javascript">

        function PANCardCheck() {

            var panTbx = document.getElementById('<%=tbxpanNum.ClientID%>');
            var dateOfJoinTbx = $find('<%=radDateOfJoin.ClientID%>');

            if (panTbx.value != "") {

                dateOfJoinTbx.set_enabled(true);
                dateOfJoinTbx._popupButton.disabled = false;
                dateOfJoinTbx._popupButton.onclick = function () { dateOfJoinTbx.togglePopup(); return false; };

                dateOfJoinTbx.set_enabled(false);
                dateOfJoinTbx._popupButton.disabled = true;
                dateOfJoinTbx._popupButton.onclick = function () { return false; };

                dateOfJoinTbx.set_enabled(true);
                dateOfJoinTbx._popupButton.disabled = false;
                dateOfJoinTbx._popupButton.onclick = function () { dateOfJoinTbx.togglePopup(); return false; };

                var datePicker = $find('<%= radDateOfJoin.ClientID %>');
                $find('MainContent_radDateOfJoin')._popupButton.className = 'aspNetDisabled rcCalPopup rcEnabled';
            }
            else {
                dateOfJoinTbx.clear();
                dateOfJoinTbx.set_enabled(false);
                dateOfJoinTbx._popupButton.disabled = true;
                dateOfJoinTbx._popupButton.onclick = function () { return false; };

                var datePicker = $find('<%= radDateOfJoin.ClientID %>');
                $find('MainContent_radDateOfJoin')._popupButton.className = 'aspNetDisabled rcCalPopup rcDisabled';
            }
        }

    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
    <h2>
        Rad DatePicker Control
    </h2>
    <p style="color: Green;">
        Enable or Disable RadDatePicker control on Textbox entry
    </p>
    <div class="billReviewSearchCriteriaContDiv">
        <asp:Label ID="lblSocialSecurityNum" runat="server" Text="PAN Card # :" Style="position: relative;
            left: 35px; color: black;"></asp:Label>
        <asp:TextBox ID="tbxpanNum" runat="server"  onkeyup='PANCardCheck()' onchange='PANCardCheck()'
            Style="position: relative; left: 38px; font-size: 12px; width: 130px;" MaxLength="10"></asp:TextBox>
        <asp:Label ID="lblDateOfJoin" runat="server" Text="Date of Join :" Style="position: relative;
            left: 121px; color: black;"></asp:Label>
        <telerik:RadDatePicker ID="radDateOfJoin" runat="server" MinDate="01/01/1000" Width="145px"
            Height="14px" Skin="Web20" Font-Size="11px" DateInput-DateFormat="MM/dd/yyyy"
            Enabled="true" Style="position: absolute; left: 430px; top: 3px;">
        </telerik:RadDatePicker>
        <asp:LinkButton ID="lnkSearch" runat="server" Text="Click Here" OnClick="lnkSearch_Click" Style="position: relative; left: 380px;
            top: 3px;"   ></asp:LinkButton>
        <asp:Label runat="server" ID="lblTest" Text="" Style="position: absolute; left: 630px;
            top: 3px;"></asp:Label>
    </div>
    <div style="height: 50pt;">
    </div>
    <p>
        Initially when page loads, Rad Date Picker will be in disabled mode.</br> Upon any
        data entry in textbox, rad datecontrol should be enabled(DateInput and popupbutton)
        and user can enter the date.</br> After performing link button click 'lnkSearch' in the page and remove the text from the Text box, I am not able to open the Calender Popup.)
    </p>
</asp:Content>

Code Behind:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        private void ValidationCheck()
        {
            if (tbxpanNum.Text.ToString() != "")
            {
                radDateOfJoin.DatePopupButton.Enabled = true;
            }
            else
            {
                radDateOfJoin.DatePopupButton.Enabled = false;
                radDateOfJoin.DateInput.Enabled = false;
            }
        }
        protected void lnkSearch_Click(object sender, EventArgs e)
        {
            lblTest.Text = "Clicked";
        }
    }
}

Please do the needful.

Thanks
karthik

[Eyup]

Hello Karthik,

I have created a sample application by modifying the provided code to achieve the desired scenario. Please give it a look and let me know if you need further assistance. 

All the best,
Eyup
the Telerik team