Wednesday, July 11, 2012

Asp.Net jQuery UI Datepicker default date


In this post Asp.Net jQuery UI Datepicker default date we shall see on how to set a default date when the datepicker opens up.

By default the datepicker will display the current system date as the default date, we can set out own default date by setting the defaultDate property.
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() {
$("#txtDefaultDate").datepicker({ defaultDate: new Date(2007, 0, 1) });
        });
      </script>
</head>
<body>
    <form id="frmDatePicker" runat="server">
        <table>
            <tr>
                <td>Default Date (01/01/2007)</td>
                <td><asp:TextBox
                    id="txtDefaultDate"
                    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: