Thursday, August 22, 2013

Devexpress Date Edit Validating two Dates in Javascript using CustomValidator

In this post I am going to explain how we can validate two DateEdit controls which are Devexpress controls using CustomValidator.

First drag and drop two devexpress datedit controls on the form

<dx:ASPxDateEdit ID="ASPxDateEdit1" ClientInstanceName="cliDate1" runat="server"
       DisplayFormatString="dd-MMM-yy" EditFormatString="dd-MMM-yy">
   </dx:ASPxDateEdit>
     <dx:ASPxDateEdit ID="ASPxDateEdit2" runat="server" ClientInstanceName="cliDate2"
       DisplayFormatString="dd-MMM-yy" EditFormatString="dd-MMM-yy">
    </dx:ASPxDateEdit>
    <asp:CustomValidator ID="cvDueDate" runat="server" ValidationGroup="vgCheck" ControlToValidate="ASPxDateEdit2"
       Display="Dynamic" ClientValidationFunction="compare"></asp:CustomValidator>


Script to compare the two dates on client side
<script type="text/javascript">
  function compare1(s, e) {
       var orderDate = cliDate1.GetDate();
       if (orderDate != null) {
         var dueDate = cliDate2.GetDate();
         if (dueDate != null) {
           var orderYear = orderDate.getFullYear();
           var orderMonth = orderDate.getMonth();
           var orderDay = orderDate.getDate();
           var corderDate = new Date(orderYear, orderMonth, orderDay);
           var dueYear = dueDate.getFullYear();
           var dueMonth = dueDate.getMonth();
           var dueDay = dueDate.getDate();
           var cDueDate = new Date(dueYear, dueMonth, dueDay);
           if (cDueDate.toString() === corderDate.toString()) {
             e.IsValid = true;
           }
           else if (cDueDate < corderDate) {
             e.IsValid = false;
           }
           else {
             e.IsValid = true;
           }
         }
       }
     }
 </script> 

Popular Posts