$(...).datetimepicker 不是函数

编程问答 2022-04-22

问题描述

在我的代码中，当我调用 $('.date-picker').datetimepicker 函数时，我收到错误 $(...).datetimepicker is not a function。我不知道为什么 $ 变量不包含 datetimepicker 函数，应该在 main.bundle.js 中定义

main.bundle.js 文件中有 $.fn.datetimepicker。

如果我在 package.json 文件中使用 "jquery": "3.6.0" - 它可以正常工作，但我必须使用 "jquery": "1.11.3"。

如果我从 index.js 文件中删除所有导入并添加：

<script src="node_modules/moment/moment.js"></script>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <link rel="stylesheet" type="text/css"
          href="node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"/>
    <script src="node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script>

到 index.html 文件（即使使用“jquery”：“1.11.3”） - 它工作正常，但我不能在 index.html 文件中使用任何脚本，必须在我的项目中使用导入。

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',entry: {
        main: './src/index.js'
    },output: {
        filename: '[name].bundle.js',path: path.resolve(__dirname,'dist')
    },module: {
        loaders: [{
            test: /\.m?js$/,exclude: /node_modules(?!\/lof)/,loader: 'babel-loader?' + JSON.stringify({
                presets: ['babel-preset-es2015','babel-preset-stage-2'].map(require.resolve)
            })
        },{
            test: /\.html$/,loaders: ['html']
        }]
    },resolve: {
        'root': __dirname
    },resolveLoader: {
        root: path.join(__dirname,'node_modules')
    }
}

package.json

{
  "name": "webpack-test","version": "1.0.0","description": "","main": "test.js","scripts": {
    "build": "webpack","test": "echo \"Error: no test specified\" && exit 1"
  },"browserslist": "> 0.25%,not dead","author": "","license": "ISC","dependencies": {
    "moment": "2.9.0","jquery": "1.11.3","eonasdan-bootstrap-datetimepicker": "^4.17.49"
  },"devDependencies": {
    "babel-core": "^6.9.1","babel-loader": "^6.2.4","babel-preset-es2015": "^6.9.0","babel-preset-stage-2": "^6.5.0","expose-loader": "^3.0.0","express": "^4.17.1","html-loader": "^0.4.4","imports-loader": "^3.0.0","webpack": "~1.13.2","webpack-cli": "^4.7.2","webpack-node-externals": "^3.0.0"
  }
}

index.js

import moment from 'moment'
import $ from 'jquery';
import 'eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js';

console.log('jquery - ' + $().jquery);
console.log('moment - ' + moment.version);

$(document).ready(function() {
    $(".date-picker").datetimepicker();
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Some title</title>


    <script src="./dist/main.bundle.js"></script>
</head>

<body>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date date-picker' id='datetimepicker1'>
                    <input type='text' class="form-control"/>
                    <span class="input-group-addon">
               <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

我尝试了以下解决方案： $(...).datetimepicker is not a function 和许多其他人从 stackoverflow 中回答，但没有找到解决方案。请在我的情况下提供任何帮助，我将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

datetimepickerdatetimepickereonasdan-datetimepickerjavascriptjquerywebpackwebpackwebpack