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

  • Z时代
  • 2024-01-10
  • 分类：问答

我使用语义ui日历与Vuejs结合获取价值。使用日期选择器选择日期后，此日历未设置该值。所以我不能通过Vuejs保存日期。这是我的html：Vuejs - 获取vuejs中的语义日历的价值

<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: [] 
    } 
});

任何想法？

回答：

我在那里看不到日期选择器。尝试改变：

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

到

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

回答：

试试下面的代码

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>

以上是 Vuejs - 获取vuejs中的语义日历的价值 的全部内容， 来源链接： utcz.com/qa/264865.html

回到顶部