Jquery-ui Datepicker not showing in rails view, got error Uncaught TypeError: $(...).datepicker is not a function

Question

来自 jquery-ui 的日期选择器没有出现在我的视图中。

application.js

require('jquery');
require("jquery-ui/ui/widgets/datepicker");

environment.js

const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
})
)

environment.toWebpackConfig().merge({
resolve: {
alias: {
'jquery': 'jquery/src/jquery'
}
}
});

在我看来

<script>
  $(function() {
    $('#reservation_start_date').datepicker({
      dateFormat: 'dd-mm-yy' });
      $('#reservation_end_date').datepicker({
        dateFormat: 'dd-mm-yy' });
  });

</script>

Chrome 控制台

jQuery.Deferred exception: $(...).datepicker is not a function TypeError: $(...).datepicker is not a function
Uncaught TypeError: $(...).datepicker is not a function

谢谢大家的帮助！

已解决： 我们必须将 jQuery 暴露给 window 对象：

packs/application.js

import JQuery from 'jquery';
window.$ = window.JQuery = JQuery;

Answer 1

yarn add jquery-ui-dist 然后在 alias 方法中添加 'jquery-ui': 'jquery-ui-dist/jquery-ui.js'。

正确配置您的environment.js。 $ 和 jQuery 应该是 jquery 而不是 jquery 的路径。请参阅以下更改。 application.js

中不需要 require('jquery');

new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: ["popper.js", "default"]
})

environment.toWebpackConfig().merge({
resolve: {
alias: {
'jquery': 'jquery/src/jquery',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
}
}
});