Compare Two Dates Using C# and jQuery Datepicker

Upendra Pratap Shahi
Aug 20, 2015
26.3k
0
1
Article

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:

<div>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th>First Date
</th>
<th>Second Date
</th>
</tr>
<tr>
<td>
<asp:TextBox ID="txtDate1" runat="server" />
</td>
<td>
<asp:TextBox ID="txtDate2" runat="server" />
</td>
<td>
<asp:Button ID="btnDiff" runat="server" OnClick="btnDiff_Click" Text="Calculate Date" />
</td>
</tr>
</table>
</div>
</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:

<script>
$(document).ready(
/* This is the function that will get executed after the DOM is fully loaded */
function () {
$("#txtDate1").datepicker({
changeMonth: true,//this option for allowing user to select month
changeYear: true //this option for allowing user to select from year range
});
$("#txtDate2").datepicker({
changeMonth: true,//this option for allowing user to select month
changeYear: true //this option for allowing user to select from year range
});
}
);
</script>

Add some CSS for the look and feel in the head section of the page:

<style type="text/css">
body {
color: #333;
text-align: center;
background-color: aqua;
}
</style>

Now your page looks like the following:

DateCompare.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DateCompare.aspx.cs" Inherits="DateCompare" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>C# corner article for date comparision</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(
/* This is the function that will get executed after the DOM is fully loaded */
function () {
$("#txtDate1").datepicker({
changeMonth: true,//this option for allowing user to select month
changeYear: true //this option for allowing user to select from year range
});
$("#txtDate2").datepicker({
changeMonth: true,//this option for allowing user to select month
changeYear: true //this option for allowing user to select from year range
});
}
);
</script>
<style type="text/css">
body {
color: #333;
text-align: center;
background-color: aqua;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th>First Date
</th>
<th>Second Date
</th>
</tr>
<tr>
<td>
<asp:TextBox ID="txtDate1" runat="server" />
</td>
<td>
<asp:TextBox ID="txtDate2" runat="server" />
</td>
<td>
<asp:Button ID="btnDiff" runat="server" OnClick="btnDiff_Click" Text="Calculate Date" />
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>

On code behind page.

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

DateCompare.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class DateCompare : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void CompareDate()
{
if (txtDate1.Text == "" && txtDate2.Text == "")
{
ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('Textbox can not be blank!')", true);
return;
}
else if (txtDate1.Text == "" || txtDate2.Text == "")
{
ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('Date must be select for comparision')", true);
return;
}
else
{
//here I have taken day part from textbox
string date1Day = this.txtDate1.Text.Remove(2);
string date2Day = this.txtDate2.Text.Remove(2);
//here I have taken month part from textbox
string date1Month = this.txtDate1.Text.Substring(3, 2);
string date2Month = this.txtDate2.Text.Substring(3, 2);
//here I have taken year part from textbox
string date1Year = this.txtDate1.Text.Substring(6);
string date2Year = this.txtDate2.Text.Substring(6);
//here I have converting in datetime format
DateTime d1 = Convert.ToDateTime(date1Month + "/" + date1Day + "/" + date1Year);
DateTime d2 = Convert.ToDateTime(date2Month + "/" + date2Day + "/" + date2Year);
if (d1 > d2)
{
ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('First dae is greater')", true);
}
else if (d1 == d2)
{
ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('Both date are same')", true);
}
else
{
ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('Second date is greater')", true);
}
}
}
protected void btnDiff_Click(object sender, EventArgs e)
{
CompareDate();
}
}