CODEWITHSUNDEEP
jquerydatepicker
Newtechbee
Newtechbee

Reputation: 3

Jquery Datepicker not working in a control

I am trying to use a simple datepicker 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>

Upvotes: 0

Views: 2469

Answers (2)

Devjosh
Devjosh

Reputation: 6486

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

Upvotes: 0

Zachary
Zachary

Reputation: 6532

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>

Upvotes: 1

Related Questions