Wednesday, July 11, 2012

Asp.Net jQuery UI Datepicker date format


In this post Asp.Net jQuery UI Datepicker date format we shall see on how to set the format in which the datepicker should return the selected date.

By default the datepicker will return the date in mm/dd/yyyy format,  you can use the dateFormat property to alter the format in which the date is returned.

mm-dd-yy – Returns 07-01-2012
dd-M-yy  - Returns 11-Jul-2012

For a list of the possible formats which can be used refer to the jQuery UI datepicker documentation http://docs.jquery.com/UI/Datepicker/formatDate

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() {
$("#txtDateFormat1").datepicker({ dateFormat: "mm-dd-yy" });
        });
      </script>
</head>
<body>
    <form id="frmDatePicker" runat="server">
        <table>
            <tr>
                <td>Date Format (mm-dd-yy)</td>
                <td><asp:TextBox
                    id="txtDateFormat1"
                    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: