Vuejs -获取vuejs中的语义日历的值

Question

我使用语义ui日历结合Vuejs来获取值。使用datepicker选择日期后，此日历未设置值。所以我不能通过Vuejs保存日期。这是我的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>

我的Vuejs：

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

有什么想法吗？

Answer 1

尝试以下代码

​

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

我没看到里面有日期选择器。尝试更改：

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

至

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

您也可以使用NPM模块https://www.npmjs.com/package/vuejs-datepicker