Wednesday, July 11, 2012

Asp.Net jQuery UI Datepicker only future dates


In this post Asp.Net jQuery UI Datepicker only future dates we shall see on how to restrict the Datepicker to allow the user to select only future dates.

By setting the minDate to the current date “Now” the control will restrict the user to select either the current date or any future date.

Add an asp:TextBox control to the page and add the below jQuery script.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Date Picker</title>
    <link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
    <script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
    <script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link
type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
    <script type="text/javascript">
        $(function() {
$("#txtOnlyFutureDates").datepicker({ minDate: "Now" });
        });
      </script>
</head>
<body>
    <form id="frmDatePicker" runat="server">
        <table>
            <tr>
                <td>Only Future Dates</td>
                <td><asp:TextBox
                    id="txtOnlyFutureDates"
                    runat="server"
                    ReadOnly="true"></asp:TextBox>
                </td>               
            </tr> 
  </table>
    </form>
</body>
</html>

For a full example covering all posible scenarios in using a jQuery UI Datepicker control refer to the post Asp.Net jQuery UI Datepicker Tutorial.

Search Flipkart Products:
Flipkart.com

No comments: