Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Question] How can I use in it in simple website using CDN? #4

Closed
amchconsult opened this issue Jan 4, 2022 · 2 comments
Closed

[Question] How can I use in it in simple website using CDN? #4

amchconsult opened this issue Jan 4, 2022 · 2 comments

Comments

@amchconsult
Copy link

amchconsult commented Jan 4, 2022 •
edited
Loading

Vue-datepicker-next version: 1.0.2
Vue version: 3.2.26
Browser: Chrome and Safari

I use the vue2-datepicker

<link rel="stylesheet" href="https://unpkg.com/vue2-datepicker/index.css">

<script src="https://unpkg.com/vue@2.6.10/dist/vue.runtime.min.js"></script>
<script src="https://unpkg.com/vue2-datepicker/index.min.js"></script>

but for vue 3 I use like this but it does not work. it shows on screen but it does not update value or show value

<link href="public/assets/vue-datepicker-next-1.0.2/index.css" rel="stylesheet">

<script src="public/assets/vue3/dist/vue.global.js"></script>
<script src="public/assets/vue-datepicker-next-1.0.2/index.js"></script>

components: {
      'date-picker':DatePicker,
}

Thank you
@amchconsult
Copy link
Author 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>VUE 3 TEST 7</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- <link href="public/assets/vue-datepicker-next-1.0.2/index.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-datepicker-next@1.0.2/index.css">
</head>
<body>

<style>
    
</style>

<div id="app">
    <div class="container mt-4">

        <section>
            <p>format</p>
            <date-picker v-model="value1" value-type="DD/MM/YYYY" format="YYYY-MM-DD"></date-picker>
            <p>
              <code>v-model = {{ value1 }}</code>
            </p>
        </section>
        <section>
            <p>format</p>
            <date-picker v-model="value2" value-type="YYYY-MM-DD" format="DD/MM/YYYY"></date-picker>
            <p>
              <code>v-model = {{ value2 }}</code>
            </p>
        </section>
        
    </div>
</div>

<!-- <script src="public/assets/vue3/dist/vue.global.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.26/dist/vue.global.js"></script>
<!-- <script src="public/assets/vue-datepicker-next-1.0.2/index.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue-datepicker-next@1.0.2/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<script>
    var vm = Vue.createApp({
        components: {
            'date-picker':DatePicker,
        },
        data(){
            return {
                value1:'2019-10-09',
                value2:'2022-01-03',
            }
        },
    })
    .mount('#app')
</script>

</body>
</html>

@amchconsult
Copy link
Author

Sorry, I got it

v-model:value="value1"

thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@amchconsult