RadDatePicker Empty or Valid Date

[skysailor]

Hi,
I would like to be about to validate that the date entered into a date picker control is either blank or a valid date. The examples use a required field validator to check that a valid date is entered. That works fine. But I would like the user to be able to enter a blank date and for that to be valid as well. But if they have entered a date then flag it as an error if the date is invalid.

[Giuseppe]

Hello skysailor,

We would suggest you the following modification of this code library project here:

<script type="text/javascript">
var invalidInput = false;
function OnDateSelected(sender, args)
{
    invalidInput = false;
}

function OnError(sender, args)
{
    invalidInput = true;
}

function CustomValidate(sender, args)
{
    if (invalidInput)
        args.IsValid = false;
}

function OnBlur(sender, args)
{
    if (sender.GetTextBoxValue() == "")
    {
        invalidInput = false;
    }
}
</script>

<radcln:RadDatePicker ID="RadDatePicker1" runat="server" MinDate="2006/12/31" MaxDate="2009/1/1">
    <ClientEvents OnDateSelected="OnDateSelected" />
    <DateInput ClientEvents-OnError="OnError" ClientEvents-OnBlur="OnBlur" />
</radcln:RadDatePicker>
<asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="CustomValidate"
    ErrorMessage="*" />
<asp:Button ID="Button1" runat="server" Text="Button" />

Hope this helps.


Best wishes,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[James]

I am trying this example and I never get the CustomValidator to execute.  Can someone help me with what I am doing wrong here?

var invalidInput = false;
function OnDateSelected(sender, args) {
    invalidInput = false;
}
 
function onDateError(sender, args) {
   invalidInput = true;
}
 
function CustomValidate(sender, args) {
    if (invalidInput)
       args.IsValid = false;
}
 
function onBlur(sender, args) {
    if (sender.get_textBoxValue() == "") {
        invalidInput = false;
     }
} 


<telerik:RadDatePicker ID="rdpStoreNewOpenDate" runat="server" Culture="en-US" DbSelectedDate='<%# Bind("NewOpenDate") %>' ShowPopupOnFocus="False" Skin="Simple">
    <Calendar Skin="Simple" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x"></Calendar>
    <DateInput DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy" ClientEvents-OnError="onDataError" ClientEvents-OnBlur="onBlur">
         <ClientEvents OnError="onDateError" />
    </DateInput>
    <DatePopupButton HoverImageUrl="" ImageUrl="" />
</telerik:RadDatePicker>
<asp:CustomValidator runat="server" ID="cvRDPStoreNewOpenDate" ClientValidationFunction="CustomValidate" ErrorMessage="*" ControlToValidate="rdpStoreNewOpenDate" />

[Princy]

Hi,

Try the following code snippet to achieve your scenario.

ASPX:

<telerik:RadDatePicker ID="rdpStoreNewOpenDate" runat="server" Culture="en-US" ShowPopupOnFocus="False" ClientEvents-OnDateSelected="OnDateSelected" Skin="Simple" DbSelectedDate='<%# Bind("NewOpenDate") %>' >
    <Calendar Skin="Simple" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" runat="server" ViewSelectorText="x">
    </Calendar>
    <DateInput DateFormat="M/d/yyyy" DisplayDateFormat="M/d/yyyy" ClientEvents-OnError="onDataError" runat="server" ClientEvents-OnBlur="onBlur">
        <ClientEvents OnError="onDateError" />
    </DateInput>
    <DatePopupButton HoverImageUrl="" ImageUrl="" />
</telerik:RadDatePicker>
<asp:CustomValidator runat="server" ID="cvRDPStoreNewOpenDate" ClientValidationFunction="CustomValidate" ErrorMessage="*" />
<asp:Button ID="Button2" runat="server" Text="Button" />

JS:

<script type="text/javascript">
    var invalidInput = true;
    function OnDateSelected(sender, args) {
        invalidInput = false;
    }
    function onDateError(sender, args) {
        invalidInput = true;
    }
    function CustomValidate(sender, args) {
        if (invalidInput)
            args.IsValid = false;
        else
            args.IsValid = true;
    }
    function onBlur(sender, args) {
        if (sender.get_textBoxValue() == "") {
            invalidInput = true;
        }
    }
</script>

Hope this helps.

Regards,
Princy.