Search code examples
javascriptvuejs2codepen

How can I use vue-datetime in a codepen?

I have a codepen at https://codepen.io/ericg_off/pen/ExEeBgK

I am trying to get https://github.com/mariomka/vue-datetime working within it, but I am getting the following errors:

vue-datetime.js:189 Uncaught TypeError: Cannot read properties of undefined (reading 'DateTime')

pen.js:5 Uncaught ReferenceError: Datetime is not defined

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'nonce-4ZajPbOswQ0='

JS

new Vue({
  el: '#app',
  components: {
    Datetime
  },
  data: {
    msg: 'Hello World',
    date: ''
  }
})

HTML:

<div id="app">
  {{ msg }}
  <datetime v-model="date" type="datetime"></datetime>
</div>

In the settings for the codepen, I have:

CSS

https://unpkg.com/browse/[email protected]/dist/vue-datetime.css

JS

https://unpkg.com/[email protected]/dist/vue.js
https://unpkg.com/[email protected]/dist/vue-datetime.js

I am not sure what I am doing wrong. There is a hole in my javascript, etc. knowledge that I would like to fill that would make the problem and solution obvious.

Solution

  • The component registration should be as window.VueDatetime.Datetime as per doc of https://github.com/mariomka/vue-datetime. It also has dependencies like luxon, weekstart you need to load that.

    The vue-datetime is no maintain project I suggest you to use different library. It also do not support luxon from v1.28.0.

    Here is the working example in codepen regarding the error you are facing. https://codepen.io/indra-hayu/pen/YzaJKdN