Post
Ask Question

Compare Two Dates Using C# and jQuery Datepicker

Abstraction

Many beginners and sometimes experienced developers also encounter the question of how to compare two dates. In this article I have described this difference and explained everything that will help a beginner. If this has some drawback or if you have some suggestion, then feel free to mention it in the comments section. Today a friend told me that he encountered the same question in an interview during a machine test process.

Initial chamber

Step 1

Open Visual Studio and create an empty website, provide a suitable name such as DateCompare.

Step 2

In Solution Explorer you will get your empty website, then add web forms

For Web Form

DateCompare (your empty website). Right-click and select Add New Item, then Web Form. Name it DateCompare.aspx.

Design chamber

Step 3

Open the DateCompare.aspx file and write some code for the design of the application.

First add a jQuery plugin to your head section. Here I used jquery-1.9.1.js for demonstration purposes.

The following shows how to add it to your page:
  1. <div>  
  2.     <div>  
  3.         <table border="0" cellpadding="0" cellspacing="0">  
  4.             <tr>  
  5.                 <th>First Date  
  6.                 </th>  
  7.                 <th>Second Date  
  8.                 </th>  
  9.             </tr>  
  10.             <tr>  
  11.                 <td>  
  12.                     <asp:TextBox ID="txtDate1" runat="server" />  
  13.                 </td>  
  14.                 <td>  
  15.                     <asp:TextBox ID="txtDate2" runat="server" />  
  16.                 </td>  
  17.                 <td>  
  18.                     <asp:Button ID="btnDiff" runat="server" OnClick="btnDiff_Click" Text="Calculate Date" />  
  19.                 </td>  
  20.             </tr>  
  21.   
  22.         </table>  
  23.   
  24.     </div>  
  25. </div>  
Now the design looks as in the following:

design

Now write some script for jQuery. Here we will write code to show and hide jQuery code:
  1. <script>  
  2.         $(document).ready(  
  3.   
  4.   /* This is the function that will get executed after the DOM is fully loaded */  
  5.   function () {  
  6.       $("#txtDate1").datepicker({  
  7.           changeMonth: true,//this option for allowing user to select month  
  8.           changeYear: true //this option for allowing user to select from year range  
  9.       });  
  10.       $("#txtDate2").datepicker({  
  11.           changeMonth: true,//this option for allowing user to select month  
  12.           changeYear: true //this option for allowing user to select from year range  
  13.       });  
  14.   }  
  15.   
  16. );  
  17.     </script>  
Add some CSS for the look and feel in the head section of the page:
  1. <style type="text/css">  
  2.    body {  
  3.       color: #333;  
  4.       text-align: center;  
  5.       background-color: aqua;  
  6.    }  
  7. </style>  
Now your page looks like the following:

DateCompare.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DateCompare.aspx.cs" Inherits="DateCompare" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>C# corner article for date comparision</title>  
  8.     <!-- Load jQuery from Google's CDN -->  
  9.     <!-- Load jQuery UI CSS  -->  
  10.     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
  11.   
  12.     <!-- Load jQuery JS -->  
  13.     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
  14.     <!-- Load jQuery UI Main JS  -->  
  15.     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
  16.   
  17.     <!-- Load SCRIPT.JS which will create datepicker for input field  -->  
  18.     <script>  
  19.         $(document).ready(  
  20.   
  21.   /* This is the function that will get executed after the DOM is fully loaded */  
  22.   function () {  
  23.       $("#txtDate1").datepicker({  
  24.           changeMonth: true,//this option for allowing user to select month  
  25.           changeYear: true //this option for allowing user to select from year range  
  26.       });  
  27.       $("#txtDate2").datepicker({  
  28.           changeMonth: true,//this option for allowing user to select month  
  29.           changeYear: true //this option for allowing user to select from year range  
  30.       });  
  31.   }  
  32.   
  33. );  
  34.     </script>  
  35.     <style type="text/css">  
  36.         body {  
  37.             color: #333;  
  38.             text-align: center;  
  39.             background-color: aqua;  
  40.         }  
  41.     </style>  
  42. </head>  
  43. <body>  
  44.     <form id="form1" runat="server">  
  45.         <div>  
  46.             <div>  
  47.                 <table border="0" cellpadding="0" cellspacing="0">  
  48.                     <tr>  
  49.                         <th>First Date  
  50.                         </th>  
  51.                         <th>Second Date  
  52.                         </th>  
  53.                     </tr>  
  54.                     <tr>  
  55.                         <td>  
  56.                             <asp:TextBox ID="txtDate1" runat="server" />  
  57.                         </td>  
  58.                         <td>  
  59.                             <asp:TextBox ID="txtDate2" runat="server" />  
  60.                         </td>  
  61.                         <td>  
  62.                             <asp:Button ID="btnDiff" runat="server" OnClick="btnDiff_Click" Text="Calculate Date" />  
  63.                         </td>  
  64.                     </tr>  
  65.   
  66.                 </table>  
  67.   
  68.             </div>  
  69.         </div>  
  70.     </form>  
  71. </body>  
  72. </html>  
On code behind page.

I have written some code for date comparison using C#.

DateCompare.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class DateCompare : System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e)  
  11.     {  
  12.   
  13.     }  
  14.   
  15.     protected void CompareDate()  
  16.     {  
  17.         if (txtDate1.Text == "" && txtDate2.Text == "")  
  18.         {  
  19.             ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('Textbox can not be blank!')", true);  
  20.             return;  
  21.         }  
  22.         else if (txtDate1.Text == "" || txtDate2.Text == "")  
  23.         {  
  24.             ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('Date must be select for comparision')", true);  
  25.             return;  
  26.         }  
  27.         else  
  28.         {  
  29.             //here I have taken day part from textbox  
  30.             string date1Day = this.txtDate1.Text.Remove(2);  
  31.             string date2Day = this.txtDate2.Text.Remove(2);  
  32.             //here I have taken month part from textbox  
  33.             string date1Month = this.txtDate1.Text.Substring(3, 2);  
  34.             string date2Month = this.txtDate2.Text.Substring(3, 2);  
  35.             //here I have taken year part from textbox  
  36.             string date1Year = this.txtDate1.Text.Substring(6);  
  37.             string date2Year = this.txtDate2.Text.Substring(6);  
  38.             //here I have converting in datetime format  
  39.             DateTime d1 = Convert.ToDateTime(date1Month + "/" + date1Day + "/" + date1Year);  
  40.             DateTime d2 = Convert.ToDateTime(date2Month + "/" + date2Day + "/" + date2Year);  
  41.             if (d1 > d2)  
  42.             {  
  43.                 ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('First dae is greater')", true);  
  44.             }  
  45.             else if (d1 == d2)  
  46.             {  
  47.                 ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('Both date are same')", true);  
  48.             }  
  49.             else  
  50.             {  
  51.                 ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('Second date is greater')", true);  
  52.             }  
  53.         }  
  54.     }  
  55.     protected void btnDiff_Click(object sender, EventArgs e)  
  56.     {  
  57.         CompareDate();  
  58.     }  
  59. }  
Output

On first text box
Figure 1: Initial loading

On second textbox click
Figure 2: On first text box

On button click when textbox is blanked
Figure 3: On second TextBox click

When one textbox is blank
Figure 4: On button click when TextBox is blank

When take a positive output
Figure 5: When one TextBox is blank

enter date
Figure: 6a

Compare date
Figure: 6b

date
Figure: 6c

Figure 6: When getting positive output

I hope you liked this. Have a good day. Thank you for reading.


Similar Articles