I used semantic ui calendar bine with Vuejs to get value. After pick a date with datepicker, this calendar did not set the value. So i cannot save a date via Vuejs. This is my html:

<div class="ui calendar" id="date">
    <div class="ui input left icon">
         <i class="calendar icon"></i>
         <input type="text" v-model="input.date">
    </div>
</div>

My Vuejs :

var app = new Vue({
    el: "#app",
    data: {
        input: {
            unique_number:"",
            date: "",
            description: ""
        },
            inputErrors: []
    }
});

Any idea ?

I used semantic ui calendar bine with Vuejs to get value. After pick a date with datepicker, this calendar did not set the value. So i cannot save a date via Vuejs. This is my html:

<div class="ui calendar" id="date">
    <div class="ui input left icon">
         <i class="calendar icon"></i>
         <input type="text" v-model="input.date">
    </div>
</div>

My Vuejs :

var app = new Vue({
    el: "#app",
    data: {
        input: {
            unique_number:"",
            date: "",
            description: ""
        },
            inputErrors: []
    }
});

Any idea ?

• javascript
• vue.js
• datepicker
• semantic-ui

Share Improve this question Follow edited Nov 5, 2018 at 15:35 Xquick 67711 gold badge88 silver badges2020 bronze badges asked Jul 7, 2017 at 13:57 user3089464user3089464 25166 silver badges1414 bronze badges 1

• I believe this blog post addresses this: vuejsdevelopers./2017/05/20/vue-js-safely-jquery-plugin but your problem boils down to incorrectly assuming that vue works the same way jquery does (by operating on dom elements) it doesn't. – corse32 Commented Jan 23, 2018 at 11:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

try the following code

var app = new Vue({
    el: "#app",
    data: {
      input: {
        unique_number: '',
        date: '',
        description: ''
      },
      inputErrors: []
    },
    methods: {
      refreshCalendar: function () {
        $('#date').calendar('set date', this.input.date)
      }
    },
    mounted() {
      $('#date').calendar({
        onChange: function(date, text, mode) {
          console.log('change: ' + date + "  text: " + text + "  mode: " + mode)
          app.input.date = text
        }
      });
    }
});

<script src="https://unpkg./vue"></script>
<link href="//netdna.bootstrapcdn./font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare./ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit./mdehoog/Semantic-UI-Calendar/76959c6f7d33a527b49be76789e984a0a407350b/dist/calendar.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery./jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://cdn.rawgit./mdehoog/Semantic-UI-Calendar/76959c6f7d33a527b49be76789e984a0a407350b/dist/calendar.min.js"></script>


    <div id="app">

        <div class="ui calendar" id="date">
            <div class="ui input left icon">
                <i class="calendar icon"></i>
                <input type="text" v-model="input.date">
            </div>
        </div>

        <h3>
            output (look at mounted  onchange part)
        </h3>
        <p>date: {{input.date}}</p>

        <h3>input (look at refreshCalendar method)</h3>
        <p>
            if the value is changed somewhere else (like in this simple input text) call refreshCalendar
        </p>
        <input type="text" size="30" v-model="input.date" @change="refreshCalendar()">
    </div>

I don't see a datepicker in there. Try changing:

<input type="text" v-model="input.date">

to

<input type="date" v-model="input.date">

<div class="ui calendar" id="date">
    <div class="ui input left icon">
        <i class="calendar icon"></i>
        <input type="date" v-model="input.date">
    </div>
</div>

You can also use NPM module https://www.npmjs./package/vuejs-datepicker