auto generate number of days in another textbox upon selection of start and end date in asp.net c#

Question

i got a task for creating leave application for the employees.. it contains 3 tabs one with apply leave which has

1. type for leave
2. description
3. begin date
4. end date
5. number of days

those begin and end date contains calendar extenders and once i select both dates , cursor should point on number of days textbox and it should calculate the total number of days leave will be taken... please help me sort this out..

i have tried this

cs

    protected void BtnApply_Click(object sender, EventArgs e)
    {
        MTMSDTO objc = new MTMSDTO();

        int Flag = 0;

        LblLogdInUser.Text = Session["EmpName"].ToString();
        objc.LoggedInUser = LblLogdInUser.Text;
        objc.TypeofLeave = DrpTypeofLeave.SelectedItem.Text;

        string date;
        date = Convert.ToDateTime(TxtBeginDate.Text).ToString("dd/MM/yyyy");

        DateTime dt = new DateTime();
        dt = Convert.ToDateTime(date);

        objc.BeginDate = dt;
        objc.EndDate = Convert.ToDateTime(TxtEndDate.Text);
        objc.Description = TxtDescription.Text;
        objc.NumofDays = Convert.ToInt32(TxtNumofDays.Text);
        //objc.EmpName = LblLogdInUser.Text;


        int X = obj.InsertLeave(objc);
        {
            if (X >= 0)
            {
                Flag = 1;
            }
            else
            {
                Flag = 0;

            }
        }

        if (Flag == 1)
        {
            LblSuccess.Visible = true;
            LblSuccess.Text = "Data Added Successfully";
            DrpTypeofLeave.ClearSelection();
            TxtBeginDate.Text = "";
            TxtEndDate.Text = "";
            TxtDescription.Text = "";
            TxtNumofDays.Text = "";
        }
        else
        {
            LblErr.Visible = true;
            LblErr.Text = "Failed To Add Data!!!";
        }
    }

    protected void TxtNumofDays_TextChanged1(object sender, EventArgs e)
    {
        MTMSDTO objc = new MTMSDTO();
        TxtNumofDays.Text = Session["NumofDays"].ToString();
        objc.NumofDays = Convert.ToInt32(TxtNumofDays.Text);
    }

    protected void TxtEndDate_TextChanged(object sender, EventArgs e)
    {
        DateTime BeginDate = Convert.ToDateTime(TxtBeginDate.Text);
        DateTime EndDate = Convert.ToDateTime(TxtEndDate.Text);
        TimeSpan diff = EndDate.Subtract(BeginDate);
        TxtNumofDays.Text = diff.Days.ToString();
        TxtNumofDays.Focus();
    }

aspx

    <asp:Panel ID="Panel1" runat="server" Height="567px" Width="858px">
                        <table style="width:100%; height: 587px;">
                            <tr>
                                <td class="style50">
                                    </td>
                                <td class="style51">
                                    <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" 
                                        Height="550px" Width="833px">
                                        <asp:TabPanel ID="TabLAP" runat="server" HeaderText="Leave Application">
                                            <HeaderTemplate>
                                                <span class="style40"><strong>Leave Application</strong></span>
                                            </HeaderTemplate>
                                            <ContentTemplate>
                                                <table style="width:101%; height: 505px; margin-left: 0px;">
                                                    <tr>
                                                        <td class="style160" style="font-weight: 700;">
                                                        </td>
                                                        <td class="style161" style="font-weight: 700; ">
                                                            <asp:Label ID="LblLogdInUser" runat="server" BorderColor="#0061C1" 
                                                                BorderWidth="1px" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" 
                                                                ForeColor="#0061C1" Height="23px" Visible="False" Width="123px"></asp:Label>
                                                            <asp:RoundedCornersExtender ID="LblLogdInUser_RoundedCornersExtender" 
                                                                runat="server" BorderColor="Black" Enabled="True" Radius="4" 
                                                                TargetControlID="LblLogdInUser"></asp:RoundedCornersExtender>
                                                        </td>
                                                        <td class="style162" style="font-weight: 700; ">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="style159" style="font-weight: 700; ">
                                                            Type Of Leave:</td>
                                                        <td class="style156">
                                                            <asp:DropDownList ID="DrpTypeofLeave" runat="server" 
                                                                AppendDataBoundItems="True" BorderColor="#0061C1" BorderWidth="1px" 
                                                                Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" ForeColor="#0061C1" 
                                                                Height="29px" onselectedindexchanged="DrpTypeofLeave_SelectedIndexChanged1" 
                                                                style="text-align: left" Width="123px"><asp:ListItem Selected="True" Value="0">Please Select</asp:ListItem><asp:ListItem 
                                                                    Value="1">Sick Leave</asp:ListItem><asp:ListItem Value="2">Casual Leave</asp:ListItem><asp:ListItem 
                                                                    Value="3">Earned Leave</asp:ListItem>
                                                            </asp:DropDownList>
                                                            <asp:RoundedCornersExtender ID="DrpTypeofLeave_RoundedCornersExtender" 
                                                                runat="server" BorderColor="Black" Enabled="True" Radius="4" 
                                                                TargetControlID="DrpTypeofLeave"></asp:RoundedCornersExtender>
                                                        </td>
                                                        <td class="style141" style="font-weight: 700; ">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="style146" style="font-weight: 700; ">
                                                            Description:</td>
                                                        <td class="style154" style="font-weight: 700; ">
                                                            <asp:TextBox ID="TxtDescription" runat="server" BorderColor="#0061C1" 
                                                                BorderWidth="1px" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" 
                                                                ForeColor="#0061C1" Height="25px" style="text-align: left" TextMode="MultiLine" 
                                                                Width="103px"></asp:TextBox>
                                                            <asp:RoundedCornersExtender ID="TxtDescription_RoundedCornersExtender" 
                                                                runat="server" BorderColor="Black" Enabled="True" Radius="4" 
                                                                TargetControlID="TxtDescription"></asp:RoundedCornersExtender>
                                                        </td>
                                                        <td class="style144" style="font-weight: 700; ">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="style159" style="font-weight: 700; ">
                                                            Begin Date:</td>
                                                        <td class="style156" style="font-weight: 700; ">
                                                            <asp:TextBox ID="TxtBeginDate" runat="server" BorderColor="#0061C1" 
                                                                BorderWidth="1px" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" 
                                                                ForeColor="#0061C1" Height="25px" style="text-align: left" Width="73px"></asp:TextBox>
                                                            <asp:ImageButton ID="ImageButton1" runat="server" 
                                                                AlternateText="Click to show calendar" ImageUrl="Images/calendar.png" />
                                                            <asp:CalendarExtender ID="TxtBeginDate_CalendarExtender" runat="server" 
                                                                Enabled="True" Format="dd/MM/yyyy" PopupButtonID="ImageButton1" 
                                                                PopupPosition="Right" TargetControlID="TxtBeginDate" 
                                                                TodaysDateFormat="dd/MM/yyyy"></asp:CalendarExtender>
                                                            <asp:RoundedCornersExtender ID="TxtBeginDate_RoundedCornersExtender" 
                                                                runat="server" BorderColor="Black" Enabled="True" Radius="4" 
                                                                TargetControlID="TxtBeginDate"></asp:RoundedCornersExtender>
                                                            <asp:CompareValidator ID="chkBeginDate" runat="server" 
                                                                ControlToValidate="TxtBeginDate" Display="Dynamic" 
                                                                ErrorMessage="You must supply a valid start date" ForeColor="Red" 
                                                                Operator="DataTypeCheck" Type="Date" /><td class="style141" 
                                                                style="font-weight: 700; ">
                                                            </td>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="style159" style="font-weight: 700; ">
                                                            End Date:</td>
                                                        <td class="style156" style="font-weight: 700; ">
                                                            <asp:TextBox ID="TxtEndDate" runat="server" BorderColor="#0061C1" 
                                                                BorderWidth="1px" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" 
                                                                ForeColor="#0061C1" Height="25px" ontextchanged="TxtEndDate_TextChanged" 
                                                                style="text-align: left" Width="73px" AutoPostBack ="true"></asp:TextBox>
                                                            <asp:ImageButton ID="ImageButton2" runat="server" 
                                                                AlternateText="Click to show calendar" ImageUrl="Images/calendar.png" />
                                                            <asp:CalendarExtender ID="TxtEndDate_CalendarExtender" runat="server" 
                                                                Enabled="True" Format="dd/MM/yyyy" PopupButtonID="ImageButton2" 
                                                                PopupPosition="Right" TargetControlID="TxtEndDate" 
                                                                TodaysDateFormat="dd/MM/yyyy"></asp:CalendarExtender>
                                                            <asp:RoundedCornersExtender ID="TxtEndDate_RoundedCornersExtender" 
                                                                runat="server" BorderColor="Black" Enabled="True" Radius="4" 
                                                                TargetControlID="TxtEndDate"></asp:RoundedCornersExtender>
                                                            <asp:CompareValidator ID="chkEndDate" runat="server" 
                                                                ControlToValidate="TxtEndDate" Display="Dynamic" 
                                                                ErrorMessage="You must supply a valid end date" ForeColor="Red" 
                                                                Operator="DataTypeCheck" Type="Date" /><br />
                                                            <asp:CompareValidator ID="cmpBeginAndEndDates" runat="server" 
                                                                ControlToCompare="TxtBeginDate" ControlToValidate="TxtEndDate" 
                                                                Display="Dynamic" ErrorMessage="The end date must be after the start date" 
                                                                ForeColor="Red" Operator="GreaterThan" /></td>
                                                        <td class="style141" style="font-weight: 700; ">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="style159" style="font-weight: 700; ">
                                                            Number of Days:</td>
                                                        <td class="style156" style="font-weight: 700; ">
                                                            <asp:TextBox ID="TxtNumofDays" runat="server" BorderColor="#0061C1" 
                                                                BorderWidth="1px" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" 
                                                                ForeColor="#0061C1" Height="25px" ontextchanged="TxtNumofDays_TextChanged1" 
                                                                style="text-align: left" Width="73px"></asp:TextBox>
                                                            <asp:RoundedCornersExtender ID="TxtNumofDays_RoundedCornersExtender" 
                                                                runat="server" BorderColor="Black" Enabled="True" Radius="4" 
                                                                TargetControlID="TxtNumofDays"></asp:RoundedCornersExtender>
                                                        </td>
                                                        <td class="style141" style="font-weight: 700; ">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="style164" style="font-weight: 700; ">
                                                            <br />
                                                            <asp:Label ID="LblSuccess" runat="server" Font-Bold="True" Font-Names="Verdana" 
                                                                Font-Size="X-Small" ForeColor="#009933" Height="14px" style="text-align: right" 
                                                                Visible="False"></asp:Label>
                                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                            <br />
                                                            <asp:Label ID="LblErr" runat="server" Font-Bold="True" Font-Names="Verdana" 
                                                                Font-Size="X-Small" ForeColor="#CC0000" Height="14px" Visible="False"></asp:Label>
                                                        </td>
                                                        <td class="style163" style="font-weight: 700; ">
                                                            &nbsp;&nbsp;<asp:Button ID="BtnApply" runat="server" BackColor="White" 
                                                                BorderColor="#0061C1" BorderWidth="1px" CssClass="ButtonClass" Font-Bold="True" 
                                                                Font-Names="Verdana" Font-Size="Small" ForeColor="#0061C1" Height="21px" 
                                                                OnClick="BtnApply_Click" Text="Apply" Width="65px" />
                                                            <asp:RoundedCornersExtender ID="BtnApply_RoundedCornersExtender1" 
                                                                runat="server" BorderColor="Black" Enabled="True" Radius="4" 
                                                                TargetControlID="BtnApply"></asp:RoundedCornersExtender>
                                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                            <asp:Button ID="BtnCancel" runat="server" BackColor="White" 
                                                                BorderColor="#0061C1" BorderWidth="1px" CssClass="ButtonClass" Font-Bold="True" 
                                                                Font-Names="Verdana" Font-Size="Small" ForeColor="#0061C1" Height="21px" 
                                                                OnClick="BtnCancel_Click" Text="Cancel" Width="65px" />
                                                            <asp:RoundedCornersExtender ID="BtnCancel_RoundedCornersExtender" 
                                                                runat="server" BorderColor="Black" Enabled="True" Radius="4" 
                                                                TargetControlID="BtnCancel"></asp:RoundedCornersExtender>
                                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                        </td>
                                                        <td class="style165" style="font-weight: 700; ">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="style159" style="font-weight: 700; ">
                                                            &nbsp;</td>
                                                        <td class="style156" style="font-weight: 700; ">
                                                            &nbsp;</td>
                                                        <td class="style141" style="font-weight: 700; ">
                                                            &nbsp;</td>
                                                    </tr>
                                                </table>
                                            </ContentTemplate>
                                        </asp:TabPanel>
                                           </asp:Panel>

I'm getting the number of days value in my database but its not showing in the textbox and cursor is not pointing too to the textbox of number of days wen i run the project..

Answer 1

cs code:

protected void TxtNumofDays_TextChanged1(object sender, EventArgs e)
{
    MTMSDTO objc = new MTMSDTO();
    TxtNumofDays.Text = Session["NumofDays"].ToString();
    objc.NumofDays = Convert.ToInt32(TxtNumofDays.Text);
}

protected void TxtEndDate_TextChanged(object sender, EventArgs e)
{
    DateTime BeginDate = Convert.ToDateTime(TxtBeginDate.Text);
    DateTime EndDate = Convert.ToDateTime(TxtEndDate.Text);
    TimeSpan diff = EndDate.Subtract(BeginDate);
    TxtNumofDays.Text = diff.Days.ToString();
    TxtNumofDays.Focus();
}

aspx code:

<asp:TextBox ID="TxtBeginDate" runat="server" BorderColor="#0061C1" 
BorderWidth="1px" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" 
ForeColor="#0061C1" Height="25px" style="text-align: left" Width="73px"></asp:TextBox>

<asp:ImageButton ID="ImageButton1" runat="server" 
AlternateText="Click to show calendar" ImageUrl="Images/calendar.png" />

<asp:CalendarExtender ID="TxtBeginDate_CalendarExtender" runat="server" 
Enabled="True" Format="dd/MM/yyyy" PopupButtonID="ImageButton1" 
PopupPosition="Right" TargetControlID="TxtBeginDate" 
TodaysDateFormat="dd/MM/yyyy"> </asp:CalendarExtender>

<asp:RoundedCornersExtender ID="TxtBeginDate_RoundedCornersExtender" 
runat="server" BorderColor="Black" Enabled="True" Radius="4"
TargetControlID="TxtBeginDate"></asp:RoundedCornersExtender> 

<asp:CompareValidator ID="chkBeginDate" runat="server" 
ControlToValidate="TxtBeginDate" Display="Dynamic" 
ErrorMessage="You must supply a valid start date" ForeColor="Red" 
Operator="DataTypeCheck" Type="Date" />

<asp:TextBox ID="TxtEndDate" runat="server" BorderColor="#0061C1" 
BorderWidth="1px" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" 
ForeColor="#0061C1" Height="25px" ontextchanged="TxtEndDate_TextChanged" 
style="text-align: left" Width="73px" AutoPostBack ="true"></asp:TextBox>

<asp:ImageButton ID="ImageButton2" runat="server" 
AlternateText="Click to show calendar" ImageUrl="Images/calendar.png" />

<asp:CalendarExtender ID="TxtEndDate_CalendarExtender" runat="server" 
Enabled="True" Format="dd/MM/yyyy" PopupButtonID="ImageButton2" 
PopupPosition="Right" TargetControlID="TxtEndDate" 
TodaysDateFormat="dd/MM/yyyy"></asp:CalendarExtender>

<asp:RoundedCornersExtender ID="TxtEndDate_RoundedCornersExtender" 
runat="server" BorderColor="Black" Enabled="True" Radius="4" 
TargetControlID="TxtEndDate"></asp:RoundedCornersExtender>

<asp:CompareValidator ID="chkEndDate" runat="server" 
ControlToValidate="TxtEndDate" Display="Dynamic" 
ErrorMessage="You must supply a valid end date" ForeColor="Red" 
Operator="DataTypeCheck" Type="Date" /><br />

<asp:CompareValidator ID="cmpBeginAndEndDates" runat="server" 
ControlToCompare="TxtBeginDate" ControlToValidate="TxtEndDate" 
Display="Dynamic" ErrorMessage="The end date must be after the start date" 
ForeColor="Red" Operator="GreaterThan" />

Answer 2

I think you are taking the hard way out there is a much easier way of implementing what you are trying to do in ASP.net. First it would require the use of jQuery UI (date-picker). I came up with a pure JavaScript and HTML5 solution to your problem. I think you are going a bit over board with the post back of the data just so you can get the date out of it.

Note: I am not doing any validation nor have I made this specific towards your application.

Here is my solution:

CSS style, just to make things okay looking ;)

<!-- link to the jQuery UI CSS -->
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<style>
    #employee_form {
        width: 350px;
        background: #f0e68c;
        padding: .2em;

    }
    li {
        list-style: none;
        font-weight: bold;
    }
    li input {
        float: right;   
    }
</style>

aspx page

<form id="form1" runat="server">
<div id="employee_form">
    <ul>
        <li>
            <p>
                <asp:Label ID="Label1" runat="server" Text="Type of leave"></asp:Label>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>              
            </p>
        </li>
        <li>
            <p>
                <asp:Label ID="Label6" runat="server" Text="Description"></asp:Label>
                <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
            </p>
        </li>
        <li>
            <p>
                <asp:Label ID="Label2" runat="server" Text="Begin Date"></asp:Label>
                <asp:TextBox ID="beginDate" runat="server"></asp:TextBox>
            </p>
        </li>
        <li>
            <p>
                <asp:Label ID="Label3" runat="server" Text="End Date"></asp:Label>
                <asp:TextBox ID="endDate" runat="server"></asp:TextBox>
            </p>
        </li>
        <li>
            <p>
                <asp:Label ID="Label4" runat="server" Text="Number of Days"></asp:Label>
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
            </p>
        </li>
        <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
    </ul>
</div>
</form>

JavaScript

<!-- link to the latest jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- link to the jQuery UI -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
    (function () {
        $('.date').datepicker();
        var resultDate = "";
        $('.date').on('change', function () {
            var beginDate = $('#beginDate').val();
            var endDate = $("#endDate").val();
            if (beginDate != "" && endDate != "") {
                beginDate = new Date(beginDate);
                endDate = new Date(endDate);
                resultDate = endDate.getDate() - beginDate.getDate();
            }
            $("#days").val(resultDate + " ");
        });
    })();        
</script>       

cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace _Web_StackoverFlow_Question_Test_Code
{
    public partial class EmployeeLeaveForm : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            // Submit the data to the database
        }
    }
}

End of solution Feel free to ask me any question on twitter @muhammad_khan40.

Thanks, let me know if the solution helped with your problem.