Using jquery ui and time picker with vue

Question

I am trying to setup vue cli with jquery ui, but couldn't figure out how to use jquery ui components. I need to load following js files

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js

and css files

https://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css

To make the timepicker work. Here is a codepen link where I have tested the functionality. https://codepen.io/cksachdev/pen/EJgGVR

Any suggestions on how should I go about loading these using vue-cli/ webpack configuration.

Here is what I have tried so far:

 module: {
    loaders: [
      { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
      { test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader' },
    ],
  },
  plugins: [
    // eslint-disable-next-line no-undef
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery',
    }),
  ],
  resolve: {
    alias: {
      'jquery-ui': '../../../node_modules/jquery-ui/ui/widgets',
      'jquery-ui-css': '../../../node_modules/jquery-ui/../../themes/base',
    },
  },

Matt Oestreich · Accepted Answer · 2019-04-19 22:44:06Z

2

Edit 2: I went ahead and wrote a demo project that you can mirror to accomplish this..

View the demo here

View the source code/repo here

Again, not sure why you would want to do this, but ^that^ is (another) solution..

You can add those scripts and css files inside the 'index.html' file (public -> index.html), and use it like this:

Edit 1: it is extremely important to note there is no reason you need to import (the rather large) jQuery or even use jQuery. The Vue ecosystem has plenty of existing options for things like this..

vue2-timepicker and Vuetify timepicker (Vuetify is more of a full library of pre-styled components)..

[CodePen mirror]

/* TIMEPICKER COMPONENT */
const VueTimepicker = {
  template: "#vue-timepicker",
  computed: {
    id() {
      // give the component a unique id/name
      return "time-picker-" + this._uid;
    }
  },
  mounted() {
    $("#" + this.id).timepicker({
      timeFormat: "HH:mm:ss:l"
    });
  }
};

/* VUE APP */
new Vue({
  el: "#app",
  components: {
    VueTimepicker,
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css" />

<!-- ******************** -->
<!-- VUE APP -->
<!-- ******************** -->
<div id="app">
  <div>
    <div>
      <span>Timepicker 1</span>
      <vue-timepicker/>
    </div>
    <div style="margin-top: 20px;">
      <span>Timepicker 2</span>
      <vue-timepicker/>
    </div>
  </div>
</div>

<!-- ******************** -->
<!-- TIMEPICKER COMPONENT -->
<!-- ******************** -->
<script type="text/x-template" id="vue-timepicker">
  <div>
    <input type="text" :name="id" :id="id" value=" ">
  </div>
</script>

edited Apr 19, 2019 at 22:44

answered Apr 19, 2019 at 17:10

Matt Oestreich

8,6163 gold badges19 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Chetan Sachdev Over a year ago

Thanks for your response. I am looking for a webpack based solution using vue-cli.

Matt Oestreich Over a year ago

This will work with webpack and vue-cli. That's what CodeSandbox uses. Do you mean you want to use jQuery as a module versus importing in index.html?

Chetan Sachdev Over a year ago

Yes, I want to import jQuery and jQuery ui using webpack. Below is what I have tried, but it fails on loading jQuery ui images. I have tried to add alias, that didn't worked and tried copy pasting the images folder manually too, but no luck. Can't paste here, updating in main question.

Chetan Sachdev Over a year ago

I tried codesandbox.io/s/o96mp85m86?fontsize=14 link, and I can't see timepicker working.

Matt Oestreich Over a year ago

@ChetanSachdev I went ahead and wrote a demo for you. Please see my updated answer - provides a demo site, as well as the GitHub repo that I am storing the source code at.

|

Collectives™ on Stack Overflow

Using jquery ui and time picker with vue

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related