[Solved] Big Problem with Telerik MVC DatePickers

[ashes]

I have 4 Telerik MVC DatePickers in my ASP.NET MVC 2 view and I am trying to validate values of these 4 DatePickers .

Say I have 2 DatePickers for ( PaymentDates i.e. " FrmPayDatePicker" & "ToPayDatePicker ) & another 2 for ( VoucherDates i.e. " FrmVoucherDatePicker " & " ToVoucherDatePicker ")

I want to validate the exact selected Date Range between the selected dates by these 4 DatePickers. FrmPaymentDatePicker's value should not be equal to or greater than ToPaymentDatePicker's value ... Same case applies to FrmVoucherDatePicker and ToVoucherDatePicker .

And here is my code ......!!!

         <div class="DivWrapperPayVouDates" >
    <div class="DivMainVouDate">
        <div class="divSubPay_date" >
            <input name="selection" type="radio" id="datavoucher" value="datevoucher" checked="checked" onclick="PVDates(this.value)" />
            Voucher Date from
        </div>
        <div id="Vou_date" class="divVou_date" >
            <%=Html.Telerik().DatePicker().Name("fromVoucher").ShowButton(true).Format(" yyyy-MM-dd").HtmlAttributes(new { style = " width:190px;" })%>
             to
            <%=Html.Telerik().DatePicker().Name("toVoucher").ShowButton(true).Format(" yyyy-MM-dd").HtmlAttributes(new { style = " width:190px;" })%>
        </div>
        <br />

    </div>
    <div class="divMainPay_date" >
        <div class="divSubPay_date" >
            <input name="selection" type="radio" id="datapay" value="datepay" onclick="PVDates(this.value)" />
            Payment Date from
        </div>
        <div id="Pay_date" class="divPay_date" >
            <%=Html.Telerik().DatePicker().Name("frmPayDate").ShowButton(true).Format("yyyy-MM-dd").HtmlAttributes(new { style = " width:190px;" })%>
             to
            <%=Html.Telerik().DatePicker().Name("toPayDate").ShowButton(true).Format("yyyy-MM-dd").HtmlAttributes(new { style = " width:190px;" })%>
        </div>
        <br />
    </div>
    <div>
        <input type="submit"  id="PaySearchDateSubmit" name="PaySearchDateSubmit" value="Search" onclick="ShowMessage();" />
    </div>

</div>

and JavaScript Code is as follows

                

<script type="text/javascript">

        function updateTarget(context) {
            var html = context.get_data();
            var target = context.get_updateTarget();
            $(target).html(html);
        }
        function getDatePickerFrom() {

            var datePicker = $('#fromVoucher').data("tDatePicker");
            return datePicker;
        }
        function getDatePickerTo() {

            var datePicker = $('#toVoucher').data("tDatePicker");
            return datePicker;
        }
        function getDatePickerFromPay() {

            var datePicker = $('#frmPayDate').data("tDatePicker");
            return datePicker;
        }
        function getDatePickerToPay() {

            var datePicker = $('#toPayDate').data("tDatePicker");
            return datePicker;
        }


        function ShowMessage() {
            debugger;
            //var today = new Date();
          //  var dd = today.getDate();
          //  var mm = today.getMonth();
            if (getDatePickerFromPay().value() == null && getDatePickerToPay().value() == null) {
                document.getElementById('errordiv').style.visibility = 'hidden';
                if (getDatePickerFrom().value() >= getDatePickerTo().value()) {

                    document.getElementById('errordiv').style.visibility = 'visible';
                    document.getElementById('errordiv').innerHTML = "<div id='Di'><span class=\"msglabelclass\"> Messages:</span></div>";
                    var errorme = new String();
                    errorme = document.getElementById('errordiv').innerHTML;
                    errorme = errorme.concat("<span style=\"color:#ff0000\">Invalid Dates ..!! .</span>");
                    document.getElementById('errordiv').innerHTML = errorme; //alert('enter again');
                    var datePicker = $('#fromVoucher').data("tDatePicker");
                    datePicker.selectedValue = null;
                    var datePicker1 = $('#toVoucher').data("tDatePicker");
                    datePicker1.selectedValue = null;
                }
                else {
                    document.getElementById('errordiv').style.visibility = 'hidden';
                }
            }
            if (getDatePickerFrom().value() == null && getDatePickerTo().value() == null) {
                document.getElementById('errordiv').style.visibility = 'hidden';
                if (getDatePickerFromPay().value() >= getDatePickerToPay().value()) {

                    document.getElementById('errordiv').style.visibility = 'visible';
                    document.getElementById('errordiv').innerHTML = "<div id='Di'><span class=\"msglabelclass\"> Messages:</span></div>";
                    var errorme = new String();
                    errorme = document.getElementById('errordiv').innerHTML;
                    errorme = errorme.concat("<span style=\"color:#ff0000\">Invalid Dates ..!! .</span>");
                    document.getElementById('errordiv').innerHTML = errorme; //alert('enter again');
                    var datePicker = $('#frmPayDate').data("tDatePicker");
                    datePicker.selectedValue = null;
                    var datePicker1 = $('#toPayDate').data("tDatePicker");
                    datePicker1.selectedValue = null;
                }
                else {
                    document.getElementById('errordiv').style.visibility = 'hidden';
                }
            }
        }

    </script>

I am showing an error message in a Error Div Tag. This code works absolutely fine for PaymentDate's validation and also VoucherDates also ... but If I keep on changing DatePicker Values then This Javascript code doesnt work and Error Message Div tag never shows up ...

What could be the problem ? or shall I have to change my Code ??? Any Guesses