CODEWITHSUNDEEP
jqueryasp.net-mvcdatetimepicker
SmartestVEGA
SmartestVEGA

Reputation: 8889

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

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.

Upvotes: 3

Views: 17568

Answers (4)

Andrew Marais
Andrew Marais

Reputation: 965

This:

$('#example1').datetimepicker();

Should be:

$('#example1').datepicker();

Additionally you could try the compatibility version like this:

var jQuery = $.noConflict();
jQuery('#example1').datepicker();

Upvotes: 0

mR.idiOt
mR.idiOt

Reputation: 107

try putting the.js files in /script folder directly i.e instead of 

<script src="/Scripts/MVCControls/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

try

<script src="/Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

cut paste the jquery .js files accordingly and this may work in this folder structure

Upvotes: 0

mR.idiOt
mR.idiOt

Reputation: 107

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title>jQuery Datepicker Demo</title>
    <style type="text/css">
        div.ui-datepicker    
        {
            font-size: 10px;
        }
    </style>    
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/start/jquery-ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            $('#txtDateFrom,#txtDateTo').datepicker({
                changeYear: true,
                beforeShow: function (textbox, instance) {
                    instance.dpDiv.css({
                        marginTop: (-textbox.offsetHeight) + 'px',
                        marginLeft: textbox.offsetWidth + 'px'
                    });
                }
            });
        });
    </script>
    </head>
    <body>
     <form id="testForm" runat="server">
        <div>
            <input type="text" id="txtDateFrom" /><br />
            <input type="text" id="txtDateTo" />
        </div>
     </form>
    </body>
</html>

Upvotes: 0

Simon Edstr&#246;m
Simon Edstr&#246;m

Reputation: 6619

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

Upvotes: 6

Related Questions