Vuejs - Get value of semantic calendar in vuejs

Question

I used semantic ui calendar combine 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 ?

Gatehouse

I believe this blog post addresses this: vuejsdevelopers.com/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. – Beka

Answer 1

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

Doggo

Answer 2

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">

Vendee

I used datepicker from semantic calendar (github.com/mdehoog/Semantic-UI-Calendar), not datepicker html.. – Gatehouse

Answer 3

<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.com/package/vuejs-datepicker

Truelove