Monday, September 17, 2012

Disable Previous Dates in Jquery DatePicker based on Other DatePicker in ASP.Net

As the Title Says Disable previous Days in Jquery Date Picker based on the other DatePicker and here i will show how to display text in the second textbox when first datepicker was selected.

In the other post i was explained  
  1.   Plain text as watermark for password text box using     
  2.   ASP.NET textbox with jQuery UI DatePicker
OutPut :








<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs"  
Inherits="Disable_Prev_Dates.MainPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Disable Previous Dates in DatePicker Using Jquery</title>
    <link href="css/DatePickerSize.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[id$=txtStartingDate]').datepicker({
                dateFormat: 'mm-dd-yy',
                changeMonth: true,
                changeYear: true
            });

            $('[id$=txtEndingDate]').datepicker({
                dateFormat: 'mm-dd-yy',
                changeMonth: true,
                changeYear: true
            });

        });
    </script>
    <%--To Disable previous dates based on first date picker selection--%>
    <script type="text/javascript">
        function changedate() {
            var strdate = $('[id$=txtStartingDate]').val();
            $('[id$=txtEndingDate]').val(strdate);
            var substring = strdate.split('-');
            $('[id$=txtEndingDate]').datepicker('option', {
                minDate: new Date(substring[2], substring[0] - 1, substring[1]) });
        }  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <center>
            <h2 style="color: #E93639">
                Disable Previous Dates in DatePicker Using Jquery</h2>
            <table>
                <tr>
                    <td>
                        Starting Date :
                    </td>
                    <td>
                        <asp:TextBox ID="txtStartingDate" runat="server"  
                                                      onchange="changedate();" />
                    </td>
                    <td>
                        Ending Date :
                    </td>
                    <td>
                        <asp:TextBox ID="txtEndingDate" runat="server" />
                    </td>
                </tr>
            </table>
        </center>
    </div>
    </form>
</body>
</html>






No comments:

Post a Comment