Vuejs - Get semantic calendar value in vuejs

Question

I used the semantic ui calendar in conjunction with Vuejs to get the value. After selecting a date with datepicker, this calendar has not set a value. Therefore, I cannot save the date via Vujs. 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?

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> 

Answer 2

I do not see the dumper. Try changing:

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

to

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

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 the NPM module https://www.npmjs.com/package/vuejs-datepicker