How to call a datetimepicker ? Object doesn't support this property

Question

I am trying to call a datetime picker ..how to do it ?

i am referring this link

http://trentrichardson.com/examples/timepicker/

And i have included .js files as below:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script src="@Url.Content("~/Scripts/JqgridAction.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MVCControls/jquery-ui-1.8.16.custom.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MVCControls/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MVCControls/jquery-ui-sliderAccess.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MVCControls/jquery-1.7.1.min.js")" type="text/javascript"></script>
 <script type="text/javascript">
    $(document).ready(function () {
    alert($("#example1").length);
        $('#example1').datetimepicker();
    });  
</script>

And this is my body:

<div class="blueline">
    <div align="left">
        @Html.ValidationSummary(false, "Please correct the following errors")
        @using (Html.BeginForm())
        {   
             <div class="example-container">
                <p>
                    Add a simple timepicker to jQuery UI's datepicker</p>
                <div>
                    <input id="example1" class="hasDatepicker" type="text" value="" name="example1" />
                </div>              
            </div>

            <div class="clear">
            </div>
        }

</div>

I am getting error : Microsoft JScript runtime error: Object doesn't support this property or method

show code below:at the line $('#example1').datetimepicker();

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script src="/Scripts/JqgridAction.js" type="text/javascript"></script>
<script src="/Scripts/MVCControls/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/MVCControls/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script src="/Scripts/MVCControls/jquery-ui-sliderAccess.js" type="text/javascript"></script>
<script src="/Scripts/MVCControls/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
      $('#example1').datetimepicker(); 
    });  
</script>

I can see the render text box, after i ignore error, but i cannot get the calender when i focus the mouse inside the text box.

Solution

Try to use jQuery in noConflict mode. jQuery.noConflict()

The error occurs when you are using diffrent client libery that will attacth itself to the $ variable