此代码中的哪行使“ datepicker不是函数”出错?

时间:2019-09-24 00:57:29

标签: jquery

首先,很抱歉再次问这个问题,因为即使我在stackoverflow中发现了类似的问题,但我不明白。 我不断 JSfeatures_DP.js:66 Uncaught TypeError: $(...).datepicker is not a function. 我在代码中包括了几个脚本,因为我有很多JS功能。然后,我无法确定需要哪些代码,而哪些则不需要。

这是base.blade.php文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <div>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DemoProject!!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

        {{--datepicker--}}
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

        <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />

        {{--darkmode--}}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script src="{{ asset('js/JSfeatures_DP.js') }}"></script>

        {{-- <script src="{{ asset('js/app.js') }}" type="text/js"></script> --}}

        <div class="container">
            @yield('main')
        </div>
    </head>
    <body>
    </body>
    </html>

这是我在JSfeatures_DP.js中创建的datepicker函数。


    function Calendar(self){
        $(document).ready(function(){
            $(self).datepicker({
                inline: true,
                firstDay: 0,
                showOtherMonths: true,
                dateFormat: "yy-mm-dd",
                dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
            }).datepicker("show");
        });
    }


一个日期选择器呼叫

<input type="text" value="<?php echo date("Y-m-d")?>" class="form-control" name="date" onfocus="
                        Calendar(self);
                        highlightInput(this);
                    ">

1 个答案:

答案 0 :(得分:1)

“ Self”是指“ window”,因此,您应该在Calendar方法中使用$(“#self”),或者应将“ this”作为参数而不是“ self”。您无需将代码包装在$(document)内。就绪,到那时DOM显然已经准备就绪。

https://jsfiddle.net/9z16d0t2/1/

   <input type = "text" onfocus="calendar(this)">  

   function calendar(datepicker){          
        $(datepicker).datepicker({
          inline: true,
          firstDay: 0,
          showOtherMonths: true,
          dateFormat: "yy-mm-dd",
          dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        }).datepicker("show");        
    }

OR

 <input type = "text" id ="self" onfocus="calendar()">

  function calendar(){          
      $("#self").datepicker({
        inline: true,
        firstDay: 0,
        showOtherMonths: true,
        dateFormat: "yy-mm-dd",
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      }).datepicker("show");        
    }