How to add Calender to a Textbox and how to validate StartDate should be lessthan EndDate

Question

0.00/5 (No votes)

See more:

In the below code i need to add calender for two text Boxes
1. Start Date
2. End Date
and validate that StartDate should be lessthan EndDate.

I searched in Google i found the Code but they all are using HTML Controls but here i'm using Asp.Net Controls. Later i need to access those StartDate and EndDate in Codebehind.

ASP.NET

<p>
  <asp:Label ID="lblcourses" runat="server" Text="Course Name"></asp:Label>
  <asp:DropDownList ID="drpcourses" runat="server">
  <asp:ListItem Text="--Select a Course--" Value="0"></asp:ListItem>
  <asp:ListItem Text="Basic Unix" Value="1"></asp:ListItem>
  <asp:ListItem Text="Basic Oracle" Value="2"></asp:ListItem>
  <asp:ListItem Text="PL/SQL" Value="3"></asp:ListItem>
  <asp:ListItem Text="Oracle 11g DBA" Value="4"></asp:ListItem>
  <asp:ListItem Text="Oracle 11g DBA F/T" Value="5"></asp:ListItem>
  <asp:ListItem Text="Oracle 11g RAC F/T" Value="6"></asp:ListItem>
  <asp:ListItem Text="Linux Admin" Value="7"></asp:ListItem>
  <asp:ListItem Text="Unix Administration" Value="8"></asp:ListItem>
  <asp:ListItem Text="Advance Shell" Value="9"></asp:ListItem>
  <asp:ListItem Text="Hadoop Administration" Value="10"></asp:ListItem>
  </asp:DropDownList>
  </p>

  <p>
  <asp:Label ID="lblbatchname" runat="server" Text="Batch Name"></asp:Label>
  <asp:TextBox ID="txtbatchname" runat="server" ReadOnly="true"></asp:TextBox>
  </p>

  <p>
  <asp:Label ID="lblstartdate" runat="server" Text="Start Date"></asp:Label>
  <asp:TextBox ID="txtstartdate" runat="server"></asp:TextBox>
  </p>

 <p>
  <asp:Label ID="lblenddate" runat="server" Text="End Date"></asp:Label>
  <asp:TextBox ID="txtenddate" runat="server"></asp:TextBox>
  </p>

<p>
<asp:Button ID="btnsave" runat="server"  Text="Add" OnClientClick="javascript:return ValidateDropDown();"/>
</p>

Posted 8-May-14 21:37pm

Venkat Kumar chigulla

Add a Solution

Comments

Venkat Kumar chigulla 9-May-14 4:44am

Could anybody help me....?

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 1 · 2014-05-08T22:49:00

Solution 1

Solution

Please don't use Plain TextBoxes for Date operations.

You can use jQuery DatePicker, which is simple to use.

Demo

[Demo] Date Comparision in JavaScript[^]

Posted 8-May-14 22:49pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Divya RS · Answer 2 · 2014-05-09T01:23:00

if u want to make use of javascript
try tis

C#

function fnGo() {
                lblMsg.innerHTML = "";
                var Mon = new Date();
                var CurMonth = Mon.getMonth() + 1;
                var today = new Date();
                var dd = today.getDate();
                var mm = today.getMonth() + 1;
                var yyyy = today.getFullYear();
                if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm } var today = mm + '/' + dd + '/' + yyyy;

var fromdt=document.getElementById("txtstartdate").value;
var todt=document.getElementById("txtenddate").value;
                var dtexp = fromdt.split("-")[1] + '/' + fromdt.split("-")[0] + "/" + fromdt.split("-")[2];
                var Mon = todt .split("-")[1] + '/' + todt .split("-")[0] + "/" + fodt.split("-")[2];
                if (Date.parse(dtexp) > Date.parse(today)) {
                    lblMsg.innerText = "The From Date should be less than or equal to the Current Date";
                    document.getElementById("txtstartdate").focus();
                    return false;
                }
                if (Date.parse(Mon) > Date.parse(today)) {
                    lblMsg.innerText = "The To Date should be less than or equal to the Current Date";
                   document.getElementById("txtenddate").focus();
                    return false;
                }
                if (Date.parse(dtexp) > Date.parse(Mon)) {
                    lblMsg.innerText = "The From Date should be less than or equal to the To Date";
                    document.getElementById("txtstartdate").focus();
                    return false;
                }

aspx:
<asp:textbox id="txtbatchname" runat="server" readonly="true" xmlns:asp="#unknown">

XML

<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged">
    </asp:Calendar>

C#

code behind:
------------
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
    txtstartdate.Text = Calendar1.SelectedDate.ToString();
}

u can use calendar control like tis for both textbox.
However jquery datepicker is an easy way to accomplish tis task

KaushalJB · Answer 3 · 2014-05-09T01:33:00

Try by using this function in javascript, the best way for fast response.

HTML

function ValidateEndDate() {
       var startDate = $("txtfromdate").val();
       var endDate = $("txttodate").val();
       if (startDate != '' && endDate !='') {
           if (Date.parse(startDate) > Date.parse(endDate)) {
               $("txttodate").val('');
               alert("Start date should not be greater than end date");
           }
       }
       return false;
   }