Time picker validation using compare validator

[Karthick Purushothaman]

Greetings,

I have a problem with comparing the time values in a time pickers using a compare validator. When the form loads with an existing value (e.g 10:00AM & 8: AM in two time pickers) the second time picker should be validated to have a greater time value than the first one. In a new form if we add the time, the validation fires, but not consistently. The validations should be checked on a button click.

Please lend your helping hand.

Thanx in advance.

regards

[Johny]

Hi Karthick,

I think that you can find this documentation article helpful:

http://www.telerik.com/help/aspnet-ajax/calendar_webpagesvalidation.html

These demos also provide details about using the picker control with compare validators:

http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/validation/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/calendar/examples/design/sunny/defaultcs.aspx

I hope this helps.
Johny

[Shinu]

Hi Karthik,

One more suggestion to achieve this functionality. If you want to check for validation when clicking the button, then you could use CustomValidator instead of CompareValidator. Here is the example that I tried to achieve the scenario.

ASPX:

    <telerik:RadTimePicker ID="Start" runat="server">
    </telerik:RadTimePicker>
    <telerik:RadTimePicker ID="End" runat="server">
    </telerik:RadTimePicker>
    <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="The second time must be after the first one."
        ClientValidationFunction="ClientValidationFunction"></asp:CustomValidator>

    <asp:Button ID="Button2" runat="server" Text="Update" />

JavaScript:

<script type="text/javascript">
    function ClientValidationFunction(sender, args) {
        var start = $find("<%= Start.ClientID %>");
        var end = $find("<%= End.ClientID %>");
        var date1 = new Date();
        date1 = start.get_selectedDate();
        var date2 = new Date();
        date2 = end.get_selectedDate();
        if (date1 > date2) {
            args.IsValid = false;
        }
    }
</script>

Hope this helps,
Shinu.

[biseptol]

Hi Karthik,

One more suggestion :

•    Disable client script on CompareValidator - EnableClientScript="False"
•    Call Validate method on Page in Page_Load event
•    Call Validate method on Page in Button_Click event

How does this work  :

When your page is loaded, if the value of the second RadTimePicker is not greater than the value of the first, validation will fire. – this solve your first problem - When the form loads with an existing value (e.g 10:00AM & 8: AM in two time pickers) the second time picker should be validated to have a greater time value than the first one.

When you turn off client script validation EnableClientScript="False" the hole javascript validation is disabled, that means you have only server side validation. Then you could validate controls when button was pressed. – this solve your second problem - The validations should be checked on a button click event.

ASPX:

<telerik:RadDateTimePicker ID="RadTimePickerFirst" SelectedDate="5/11/2009" runat="server"></telerik:RadDateTimePicker>
<telerik:RadDateTimePicker ID="RadTimePickerSecond" SelectedDate="2/11/2009" runat="server"></telerik:RadDateTimePicker>
<asp:CompareValidator ID="CompareValidatorDatePickers" ControlToCompare="RadTimePickerFirst" ControlToValidate="RadTimePickerSecond" runat="server" Operator="GreaterThan" ErrorMessage="The second date must be grater than the first!" ValidationGroup="myGroup" EnableClientScript="False"></asp:CompareValidator>
<asp:Button ID="ButtonPostback" runat="server" ValidationGroup="myGroup" Text="Postback" />

ASPX.CS

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

ButtonPostback.Click += new EventHandler(ButtonPostback_Click);

}

void ButtonPostback_Click(object sender, EventArgs e)

{

Page.Validate();

}

protected override void OnLoad(EventArgs e)

{

base.OnLoad(e);

if (RadTimePickerFirst.SelectedDate.Value > RadTimePickerSecond.SelectedDate.Value)

{

Page.Validate();

}

}

I hope this helps,
Biseptol

[brian]

Shinu, thanks for that snippet with JavaScript and CustomValidator, it helped me.