Jquery Datepicker not working in a control

I am trying to use a simple date开发者_JAVA百科picker in a control. When the user clicks on the textbox, the calendar should be displayed. But, the calendar isn't popping up.

Here is my code.

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Activity.ascx.cs" Inherits="Website.Controls.Activity"  %>


    <script type="text/javascript" src="assets/libs/jquery-ui-1.8.14.custom.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $('#<%= DateHtmlInputText.ClientID %>').datepicker();
    });
    </script>

    <div id="activity">
       <asp:TextBox ID="DateHtmlInputText" CssClass="datePicker" runat="server" />
    </div>

You should take a look at jQuery UI Date Picker, they have working examples that you can use/apply. Make sure that you include all the dependencies if you don't use the complete UI library. You can use the "view source" link below the example to see the HTML/JavaScript of how the example was made.

jQuery UI DatePicker

Example with .NET TextBox Control

<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/JavaScript">
    $(document).ready(function () {
        $('#<%= TextBox1.ClientID %>').datepicker();
    });
</script>

Make sure that you include proper JavaScript references in your page/masterpage and also ensure of you are using updatepanel in your control markup then you should include the following JavaScript end request handler in your page

function pageLoad(sender, args) {
        if (args.get_isPartialLoad()) {
            jQuery(document).ready(function() {
                jQuery("#txttdate").datepicker({ minDate: 0 });

                $('.timepicker_input').timepicker({
                    showPeriod: true,
                    showLeadingZero: true
                });
  });

EDIT

If you are not using updatepanel then you should also enclose the datpicker() call in

jQuery(document).ready(function() 
{
}

it will make sure that your function will execute only after complete load

also visit Jquery Datepicker UI as suggested by our peer for more insights

Hope it may help you