Jquery-ui Datepicker未显示在rails视图中，但出现错误Uncaught TypeError：$（...）。datepicker不是一个函数

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

谢谢大家的帮助！

Answer 1

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

正确配置environment.js。 $和jQuery应该是jquery而不是jquery的路径。请参阅以下更改。 您不需要require('jquery');中的application.js

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'
}
}
});