How to add JQuery Date Picker to Textbox in .ascx control

--> First we have to download Jquery Date Picker plug-in's from following site

http://blog.jqueryui.com/2011/01/jquery-ui-1-8-9/

       Or you can add following referencess as script scourcess......



1. Ø   http://ajax.microsoft.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css
2. Ø                http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js
3. Ø                http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js

or we can use these URL's as path in script and styles sources.

 the jquery code for date picker:

$(function () {

            $("[id$=txtdate]").datepicker(          //here the id is of textbox                                                                                                       which want date piker

                {

                    showOn: "button",                        //to show calendar icon

                    buttonImage: "../_layouts/15/images/calendar_icon1.png",

                    buttonImageOnly: true,

                    required: true,

                    message: "This is a required field",

                    dateFormat: 'dd-mm-y'

                }

                );

        });

with the  id attached to the date picker we have to create textbox as follows

<asp:TextBox ID="txtdate" runat="server" ></asp:TextBox>

Then if we want any validate functionality  add the code as follow

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ValidationGroup="error" SetFocusOnError="true" ControlToValidate="txtdate" runat="server" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

<asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="error" />

      

 The complete code is

<link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="Stylesheet" />

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("[id$=txtdate]").datepicker(

                {

                    showOn: "button",

                    buttonImage: "../_layouts/15/images/calendar_icon1.png",

                    buttonImageOnly: true,

                    required: true,

                    message: "This is a required field",

                    dateFormat: 'dd-mm-yy'

                }

                );

        });

    </script>

<asp:TextBox ID="txtdate" runat="server" ></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ValidationGroup="error" SetFocusOnError="true" ControlToValidate="txtdate" runat="server" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>

<asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="error" />

Screen shots :