Datepicker in Expression Web using jQuery

Manoj Singh Panwar
Sep 30, 2012
12.2k
0
0
Article

Hi guys, In this article you will learn how to use jQuery to add a Datepicker in Expression Web4. It is not a big deal to work out but quite interesting for the beginners. Here I have used the Datepicker in through the Record form entry in which validation is also used to give much better look to the user.

Follow the steps below to implement this application:

Step 1 : Open a new HTML page by selecting File--> New-->Page--> HTML.

Step 2 : Now in the page so opened, add a <div></div> tag to give nice look to the form.

Step 3 : Then add textbox from the toolbox and arrange them in this way aside the Text fields.

Step 4 : Now type the following code in the code panel.

Step 5 : Here what happens in the code is that a text box named "tbDate" is bind with the Datepicker control and functionality is added to the Datepicker such that it will display list of previous six years and next three years from the current year. Also the code calendar is displayed as soon as the textbox is clicked.

Step 6 : Now adding Validation to the texboxes. Add validations to these fields :

State : Required field validator
pin code : Required field validator
Email Id : Regular Expression Validator Of Internet Email Format

Step 7 : Now add a button so that the page refreshes to check for validation :

Step 9 : The complete code in HTML is as follows:

<!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>\
        <title>Using DatePicker in Expression Web using jQuery </title>
            <script type="text/javascript"
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
            </script>
            <script type="text/javascript"
                src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js">
            </script>
            <script type="text/javascript">

                $(function ()
                {
                        var options = {
                        numberOfMonths: 1,
                        changeYear: true,
                        yearRange: "-6+3",
                                       }

                            $("#tbDate").datepicker(options);
             </script>
             <style type="text/css">
                .auto-style1 {
                font-size: xx-large;
                             }

                .auto-style2 {
                margin-left: 131px;
                             }

                .auto-style3 {
                margin-left: 117px;
                             }
            </style>
     </head>
     <body bgcolor="#999999">\
      <form id="form1" runat="server" class="auto-style3" style="height: 784px; width: 500px">
       <div style="width: 473px; height: 75px; color: #CC3300; background-color: #003300; position: fixed; left: 142px; top: 15px;">
           <br />          &nbs;   &nnbsp;       
        <span class="auto-style1">Record Form</span></div>
            <br /><br /><br /><br />

                                     
            <div class="auto-style2" style="width: 475px; height: 706px; color: #000000; background-color: #C0C0C0; font-size: x-large; position:
          fixed; left:10px; top: 91px;">Personal Information:<br /><br />
                First Name           
            <asp:TextBox id="TextBox1" runat="server"></asp:TextBox><br /><br />
                Last Name           
            <asp:TextBox id="TextBox2" runat="server"></asp:TextBox><br /><br />
                Date of birth        
            <input id="tbDate" type="text" /><br /><br />
                Email                   
            <asp:TextBox id="TextBox3" runat="server"></asp:TextBox>
            <asp:RegularExpressionValidator id="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox3" ErrorMessage="*"
                ForeColor="#CC3300"></asp:RegularExpressionValidator><br /><br />
                Address               
            <asp:TextBox id="TextBox4" runat="server"></asp:TextBox><br /><br />
                City                     
            <asp:TextBox id="TextBox5" runat="server"></asp:TextBox><br /><br />
                State                    
            <asp:TextBox id="TextBox8" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator id="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox8" ErrorMessage="*"\
                    ForeColor="#CC3300"></asp:RequiredFieldValidator><br /><br />
                Pin code              
            <asp:TextBox id="TextBox7" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox7" ErrorMessage="*"\
                    ForeColor="#CC3300"></asp:RequiredFieldValidator><br /><br />   <br />
            <asp:Button id="Submit" runat="server" BackColor="Black" BorderStyle="None" Font-Bold="True" Font-Underline="True" ForeColor="White"                     Text="Button"/>
            </div>
      </form>
    </body>
</html>