[Solved] Disable fonctionnality in RadDatePicker

[arnaud]

Hi,

Is it possible to disable the DateInput style modification inside a RadDatePicker ?
I would like to disable some fonctionnality like HoverStyle and FocusStyle.

In my case, I have a RadDatePicker with a customvalidator and a ValidatorCalloutExtender attached to it :

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
                </telerik:RadDatePicker>
                <asp:CustomValidator ID="CustomValidator1" runat="server" Text=" " ControlToValidate="RadDatePicker1"
                    ClientValidationFunction="RadDatePicker1_Validate" ValidateEmptyText="true" />
                <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender7" runat="server" Enabled="True"
                    TargetControlID="CustomValidator1" HighlightCssClass="validatorCalloutHighlight">
                </cc1:ValidatorCalloutExtender>

When the RadDatePicker is empty, I change its textbox background color :

<script language="javascript" type="text/javascript">
    function RadDatePicker1_Validate(sender, args)
{
    var picker = $find("<%= RadDatePicker1.ClientID %>").get_dateInput();
    var textbox = $find("<%= RadDatePicker1.ClientID %>").get_textBox();
    if (picker.get_value().length == 0)
    {
        textbox.className = "validatorCalloutHighlight";
        args.IsValid = false;
    }
    else
    {
        args.IsValid = true;
    }
}

    </script>

 
Everything is fine until I hover or focus the textbox. In those cases, the default skin of the RadDatePicker is back.

That's why I would like to disable the hover and focus fonctionnality. Is there a way to do it ?

Thank you
Ab

[Dimo]

Hello Arnaud,

I am afraid that you cannot disable the hover/focus functionality, however, you can modify the styles according to your requirements and scenario. Here is how:

RadInput Client-side Basics

Please scroll down the page and you will see an example under section "Changing the appearance style of RadInput controls on the client".


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[arnaud]

Thank you for your answer.

For people who want to use a RadDatePicker while keeping the behavior (and style) of a ValidatorCalloutExtender on it, here is my code :

<%@ Page Language="VB" MasterPageFile="~/lesitedumariage.master" AutoEventWireup="false"
    CodeFile="Default2.aspx.vb" Inherits="Default2" Title="Page sans titre" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content4" ContentPlaceHolderID="CPHmainContent" runat="Server">

    <script language="javascript" type="text/javascript">
function RadDatePicker1_Validate(sender, args)
{
    var picker = $find("<%= RadDatePicker1.ClientID %>").get_dateInput();

    if (picker.get_value().length == 0)
    {
        picker.get_styles().EnabledStyle[0] += "background-color: lemonchiffon;";
        picker.get_styles().HoveredStyle[0] += "background-color: lemonchiffon;";
        picker.get_styles().FocusedStyle[0] += "background-color: lemonchiffon;";
        picker.get_styles().InvalidStyle[0] += "background-color: lemonchiffon; border-color: #7f9db9; color:#000;";
        picker.updateCssClass();
        args.IsValid = false;
    }
    else
    {
        picker.get_styles().EnabledStyle[0] += "background-color: white;";
        picker.get_styles().HoveredStyle[0] += "background-color: white;";
        picker.get_styles().FocusedStyle[0] += "background-color: white;";
        picker.updateCssClass();
        args.IsValid = true;
    }
}
function Load(sender)
{
 sender.get_styles().InvalidStyle[0] += "background-color: lemonchiffon; border-color: #7f9db9; color:#000;";
 sender.updateCssClass();
}

    </script>

    <table>
        <tr>
            <td>
                Name :
            </td>
            <td>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="A name is required"
                    ControlToValidate="TextBox1" SetFocusOnError="true" Display="None"></asp:RequiredFieldValidator>
                <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" Enabled="True"
                    HighlightCssClass="validatorCalloutHighlight" TargetControlID="RequiredFieldValidator1">
                </cc1:ValidatorCalloutExtender>
            </td>
        </tr>
        <tr>
            <td>
                Date :
            </td>
            <td>
                <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Office2007">
                    <DateInput LabelCssClass="radLabelCss_Office2007" Skin="Office2007" runat="server">
                    <ClientEvents OnLoad="Load" />
                    </DateInput>
                    <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"
                        Skin="Office2007" runat="server">
                    </Calendar>
                </telerik:RadDatePicker>
                <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Valid date required"
                    Display="None" ControlToValidate="RadDatePicker1" ValidateEmptyText="true" ClientValidationFunction="RadDatePicker1_Validate" />
                <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" Enabled="True"
                    TargetControlID="CustomValidator1">
                </cc1:ValidatorCalloutExtender>
            </td>
        </tr>
        <tr><td colspan="2">
            <asp:Button ID="Button1" runat="server" Text="Button" /></td></tr>
    </table>
</asp:Content>

The RadDatePicker1_Validate function is here to make the RadDatePicker inputbox style behaves like a normal textbox (like textbox1 in my code) once button1 is fired (i.e : when the customvalidator is fired)

The Load function is here to make the RadDatePicker inputbox style behaves like a normal textbox if a invalid date is entered before you click on button1.

The css :
.validatorCalloutHighlight
{
    background-color: lemonchiffon;
   padding:2px 2px 2px 2px;
    border:1px solid #7f9db9;
}

Regards,
AB

[Dimo]

Hi Arnaud,

Thank you very much for sharing your implementation with the community!

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.