locked
ASP.NET MVC 5 - jquery-3.3.1.min.js - 0x800a01b6 - Javascript runtime error: Object doesn't support property or method 'datepicker' RRS feed

  • Question

  • User135423268 posted

    <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script src="~/Scripts/jquery.datetimepicker.js"></script> <script src="~/Scripts/jquery-ui-1.12.1.js"></script>

    Good Day everyone

    I'm receiving an error below when i'm setting my textbox as a datepicker.

    "jquery-3.3.1.min.js - 0x800a01b6 - Javascript runtime error: Object doesn't support property or method 'datepicker'"

    here's my code below

    <p>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.datetimepicker.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
    </p>
    <p></p>
    <p>
    <script src="~/Scripts/jquery.timepicker.min.js"></script>
    <script src="~/Scripts/jquery.inputmask.bundle.min.js"></script>
    <script>
        
    
       
        $(function () {
    
            if (navigator.userAgent.search("Chrome") >= 0) {
    
                var departdatefrom = document.getElementById("txtdepartdatefrom");
                var returndateto = document.getElementById("txtreturndatefrom");
                departdatefrom.setAttribute('type', 'text');
                returndateto.setAttribute('type', 'text');
    
            }
            else {
    
                
    
                $('#txtdepartdatefrom').datepicker();
    
            }
    
        });
    
    
    </script>
    <input type="date" id="txtdepartdatefrom" class="form-control" required> </p>

    <script src="~/Scripts/jquery.timepicker.min.js"></script> <script src="~/Scripts/jquery.inputmask.bundle.min.js"></script> <script> $(function () { if (navigator.userAgent.search("Chrome") >= 0) { var departdatefrom = document.getElementById("txtdepartdatefrom"); var returndateto = document.getElementById("txtreturndatefrom"); departdatefrom.setAttribute('type', 'text'); returndateto.setAttribute('type', 'text'); } else { $('#txtdepartdatefrom').datepicker(); } }); </script>

    Thursday, July 5, 2018 3:48 AM

Answers

  • User1724605321 posted

    Hi amendoza,

    Please make sure you have make all the reference libraries load correctly , your code works on my side(i have already juqury file in layout page) :

    <div>
        <button type="button" class="btn" onclick="$('#myModal').modal('show')"/>
    </div>
    
    <div class="modal fade" id="myModal">
    
        <div class=modal-dialog modal-lg modal-dialog-centered">
    
            <div class="modal-content">
                <div class="modal-header">
                    <h6>Title</h6>
                    <button type="button" class="close" onclick="$('#myModal').modal('hide')"></button>
                </div>
                <div class="modal-body">
    
                    <input type="text" name="datefrom" id="datefrom" class="form-control">
    
                    <input type="button" class="btn" value="Save">
    
                </div>
            </div>
    
        </div>
    
    </div>
    
    
    @section scripts {
    
        <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    
        <script type="text/javascript">
            $(function () {
                $('#datefrom').datepicker();
    
            })
    
    
        </script>
    
    }

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 6, 2018 6:26 AM
  • User1724605321 posted

    Hi amendoza,

    Just try create a new view ,and add needed libraries , jquery and juqery ui :

    https://forums.asp.net/post/5652975.aspx 

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 6, 2018 7:40 AM
  • User135423268 posted

    Good Day Master Nan Yu

    Your solution works find, I found the problem on my main system where I set my datepicker, It has a problem on the position of the datepicker, so i adjust it using jquery, again your solution is working, your the best.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 12, 2018 2:34 AM

All replies

  • User1724605321 posted

    Hi amendoza,

    Please double check your reference ,also confirm that you haven't referenced JQuery twice . You can refer to below link for how to add jquery datepicker in mvc :

    https://forums.asp.net/t/1975676.aspx?Tutorial+for+Adding+Datepicker+in+MVC+5 

    How to Add jQuery Datepicker in MVC

    Best Regards,

    Nan Yu

    Thursday, July 5, 2018 5:18 AM
  • User135423268 posted

    Hi Nan Yu

    Thank you for the answer, I have notice that I declared it twice no my layout page, the error is gone but now, my input does not show the date picker.

    Thursday, July 5, 2018 5:52 AM
  • User135423268 posted

    Hi Nan Yu

    I think the reason why the datepicker not showing up because my input date is inside a modal popup, is there a way to show it inside a modal popup?

    Thursday, July 5, 2018 6:25 AM
  • User1724605321 posted

    Hi amendoza,

    Please try to set the z-index to 9999 and make it appear on top of the modal dialog :

    <script type='text/javascript'> 
      $(function() {
          $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
      });
    
      function openmodal() {   
          var $dialogContent = $("#event_edit_container");       
    
          $dialogContent.dialog({
             modal: true,
             title: "Test",
             close: function() {},
             buttons: {
              save : function() {},
              cancel : function() {}
             }
          }).show();
          $("#ui-datepicker-div").css("z-index", "9999");   
      }
    </script>
    
    <div ><a href="javascript:openmodal();">Open modal</a></div>
    <div id="event_edit_container" >
        <form>
            Date: <input type="text" id="datepicker" name="datepicker">
        </form>
    </div>

    Please refer to code samples below for more details :

    https://weblog.west-wind.com/posts/2009/Sep/12/jQuery-UI-Datepicker-and-zIndex 

    http://tech.chitgoks.com/2015/04/20/jquery-ui-datepicker-not-shown-in-bootstrap-modal-window/ 

    Best Regards,

    Nan Yu

    Thursday, July 5, 2018 6:59 AM
  • User135423268 posted

    Hi Master Nan Yu (You've helped me twice so let me call you one)

    I've tried your solution but still datepicker does not showing, here's my code in for the modalpop-up

    <script type="text/javascript">
    	$('#datefrom').datepicker();
    </script>
    
    
    <div>
    	<button type="button" class="btn" onclick="$('#myModal').modal('show')">
    </div>
    
    <div class="modal fade" id="myModal">
    
     <div class=modal-dialog modal-lg modal-dialog-centered">
       
       <div class="modal-content">
       		<div class="modal-header">
       			<h6>Title</h6>
       			<button type="button" class="close" onclick="$('#myModal').modal('hide')"></button>
       		</div>
       		<div class="modal-body">
    
       			<input type="text" name="datefrom" id="datefrom" class="form-control">
    
       			<input type="button" class="btn" value="Save">
    
       		</div>
       </div>
    
     </div>
    
    </div>


    Thursday, July 5, 2018 8:40 AM
  • User1724605321 posted

    Hi amendoza,

    Please make sure you have make all the reference libraries load correctly , your code works on my side(i have already juqury file in layout page) :

    <div>
        <button type="button" class="btn" onclick="$('#myModal').modal('show')"/>
    </div>
    
    <div class="modal fade" id="myModal">
    
        <div class=modal-dialog modal-lg modal-dialog-centered">
    
            <div class="modal-content">
                <div class="modal-header">
                    <h6>Title</h6>
                    <button type="button" class="close" onclick="$('#myModal').modal('hide')"></button>
                </div>
                <div class="modal-body">
    
                    <input type="text" name="datefrom" id="datefrom" class="form-control">
    
                    <input type="button" class="btn" value="Save">
    
                </div>
            </div>
    
        </div>
    
    </div>
    
    
    @section scripts {
    
        <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    
        <script type="text/javascript">
            $(function () {
                $('#datefrom').datepicker();
    
            })
    
    
        </script>
    
    }

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 6, 2018 6:26 AM
  • User135423268 posted

    Hi Master Nan Yu

    Thank you for your response, i'm currently checking my libraries, here's the libraries that I load on my View page

    <link href="~/Content/themes/base/all.css" rel="stylesheet" />
    <link href="~/Content/themes/base/datepicker.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap-datepicker.min.js"></script>
    
    <script src="~/Scripts/jquery.timepicker.min.js"></script>
    <link href="~/Content/jquery.timepicker.css" rel="stylesheet" />
    
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/jquery.inputmask.bundle.js"></script>

    Here are the libraries declared on my _Layout page.

        @Styles.Render("~/content/allcss")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
    
    

    On my Bundle Configuration

            bundles.Add(New StyleBundle("~/content/allcss").Include(
                        "~/content/mystyle.css",
                        "~/content/font-awesome.min.css",
                        "~/content/bootstrap.min.css",
                        "~/content/font-awesome.min.css",
                        "~/content/css/themes/base/datepicker.css"))        
    
            bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/respond.js"))
    
    
            bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
                       "~/Scripts/jquery-{version}.js"))

    Tell if I have chose the long libraries? Sorry Master Nan Yu for this, I'm a beginner on web development specially with jquery and javascript.

    Friday, July 6, 2018 6:46 AM
  • User1724605321 posted

    Hi amendoza,

    Just try create a new view ,and add needed libraries , jquery and juqery ui :

    https://forums.asp.net/post/5652975.aspx 

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 6, 2018 7:40 AM
  • User135423268 posted

    Good Day Master Nan Yu

    Your solution works find, I found the problem on my main system where I set my datepicker, It has a problem on the position of the datepicker, so i adjust it using jquery, again your solution is working, your the best.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 12, 2018 2:34 AM