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>
  22. </table>
  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(
  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. }
  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" %>
  3. <!DOCTYPE html>
  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" />
  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>
  17. <!-- Load SCRIPT.JS which will create datepicker for input field -->
  18. <script>
  19. $(document).ready(
  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. }
  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>
  66. </table>
  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;
  8. public partial class DateCompare : System.Web.UI.Page
  9. {
  10. protected void Page_Load(object sender, EventArgs e)
  11. {
  13. }
  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.